<.chart
  data={%ChartData{labels: ["Red", "Blue", "Yellow", "Green"], datasets: [%{data: [12, 19, 3, 5, 2, 3], label: "# of Votes", borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)"], borderWidth: 1, backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)"]}]}}
  id="chart-single-bar-chart"
  type={:bar}
  width={500}
  height={200}
 />

<.chart
  data={%ChartData{labels: ["06h", "07h", "08h", "09h", "10h", "11h", "12h"], datasets: [%{data: [50, 32, 0, 16], label: "Story", backgroundColor: "#EDCE8C"}, %{data: ~c"2DdT", label: "Campaign", backgroundColor: "#27B6AF"}]}}
  id="chart-single-player-logs"
  width={500}
  preset={:player_logs}
  height={300}
 />

<.chart
  data={%ChartData{labels: ["04/07", "05/07", "06/07", "07/07", "08/07"], datasets: [%{data: [100000, 95000, 10000, 15000, 110000], label: "Views"}, %{data: [15000, 28000, 28000, 28500, 32000], label: "Unique viewers"}]}}
  id="chart-single-views-audience"
  width={500}
  preset={:views_audience}
  height={200}
 />