<.chart
  id="chart-single-chart-1"
  chart-data={%{labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [%{data: [10, 20, 30, 40, 50, 60, 70, 80], label: "Temperature", backgroundColor: "rgba(0,0,0)"}, %{data: [20, 10, 10, 80, 20, 90, 30, 30], label: "Humidity", backgroundColor: "rgba(128,128,128)"}]}}
  chart-type="bar"
  chart-config={%{responsive: true}}
/>

<.chart
  id="chart-single-chart-2"
  chart-data={%{labels: ["Q1", "Q2", "Q3", "Q4"], datasets: [%{data: [10, 70, 30, 50], label: "Sales", borderColor: "rgb(0,0,0)", tension: 0.4}, %{data: [20, 50, 40, 90], label: "Revenue", borderColor: "rgb(128, 128, 128)", tension: 0.4}]}}
  chart-type="line"
  chart-config={%{responsive: true}}
/>