<.chart id="chart-single-chart-1" chart_data={[%{temp: 10, humidity: 20}, %{temp: 20, humidity: 10}, %{temp: 30, humidity: 10}, %{temp: 40, humidity: 80}, %{temp: 50, humidity: 20}, %{temp: 60, humidity: 90}, %{temp: 70, humidity: 30}, %{temp: 80, humidity: 30}]} chart_config={%{type: "bar", options: %{responsive: true}, labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], humidity: %{label: "Humidity", backgroundColor: "hsl(var(--chart-2))"}, temperature: %{label: "Temperature", backgroundColor: "hsl(var(--chart-4))", datakey: "temp"}}}/>

<.chart id="chart-single-chart-2" chart_data={[%{revenue: 20, sales: 10}, %{revenue: 50, sales: 70}, %{revenue: 40, sales: 30}, %{revenue: 90, sales: 50}]} chart_config={%{type: "line", options: %{responsive: true}, labels: ["Q1", "Q2", "Q3", "Q4"], revenue: %{label: "Revenue", borderColor: "hsl(var(--chart-4))"}, sales: %{label: "Sales", borderColor: "hsl(var(--chart-3))"}}}/>