Ice Cream Sales by Flavor ($K)
Toast
$ npx flitter-ui add heatmap-chart --toastCode
import ToastHeatmapChart from "@/components/flitter/charts/toast-heatmap-chart";
const chart = ToastHeatmapChart({
data: {
xLabels: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
],
yLabels: [
"Vanilla", "Chocolate", "Strawberry",
"Mint Chip", "Cookie Dough", "Mango Sorbet",
],
values: [
[12, 11, 14, 18, 28, 38, 52, 50, 32, 20, 14, 13],
[15, 14, 16, 20, 30, 40, 54, 51, 34, 22, 16, 17],
[8, 7, 10, 15, 24, 34, 46, 44, 28, 16, 9, 8],
[6, 5, 7, 10, 16, 22, 30, 28, 18, 11, 7, 6],
[10, 9, 12, 16, 22, 30, 42, 40, 26, 17, 11, 12],
[4, 3, 6, 12, 22, 36, 48, 46, 30, 14, 5, 3],
],
},
config: {
title: { text: "Monthly Ice Cream Sales by Flavor ($K)", visible: true },
heatmap: {
colorRange: ["#FEE2E2", "#EF4444", "#7F1D1D"],
segment: { gap: 0 },
},
},
});