<.chart data={%ChartData{labels: ["Red", "Blue", "Yellow", "Green"], datasets: [%{data: [12, 19, 3, 5, 2, 3], label: "# of Votes", 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)"], borderColor: ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)"], borderWidth: 1}]}} 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}/>