Product Revenue vs Margin
Toast
$ npx flitter-ui add bubble-chart --toastCode
import ToastBubbleChart from "@/components/flitter/charts/toast-bubble-chart";
const chart = ToastBubbleChart({
data: {
datasets: [
{
legend: "Asia",
data: [
{ x: 82, y: 45, value: 55, label: "China" },
{ x: 68, y: 58, value: 40, label: "India" },
{ x: 55, y: 35, value: 62, label: "Japan" },
{ x: 40, y: 68, value: 30, label: "S. Korea" },
{ x: 75, y: 52, value: 48, label: "Indonesia" },
{ x: 28, y: 42, value: 35, label: "Thailand" },
{ x: 62, y: 72, value: 25, label: "Vietnam" },
],
},
{
legend: "Europe",
data: [
{ x: 35, y: 78, value: 42, label: "Germany" },
{ x: 48, y: 65, value: 55, label: "France" },
{ x: 22, y: 82, value: 30, label: "UK" },
{ x: 58, y: 48, value: 38, label: "Italy" },
{ x: 42, y: 72, value: 20, label: "Spain" },
{ x: 15, y: 55, value: 45, label: "Poland" },
{ x: 52, y: 60, value: 28, label: "Netherlands" },
],
},
{
legend: "Americas",
data: [
{ x: 88, y: 32, value: 65, label: "USA" },
{ x: 72, y: 42, value: 50, label: "Canada" },
{ x: 45, y: 25, value: 58, label: "Brazil" },
{ x: 60, y: 38, value: 42, label: "Mexico" },
{ x: 32, y: 55, value: 35, label: "Argentina" },
{ x: 78, y: 28, value: 48, label: "Chile" },
],
},
{
legend: "Oceania",
data: [
{ x: 50, y: 85, value: 20, label: "Australia" },
{ x: 65, y: 75, value: 32, label: "N. Zealand" },
{ x: 38, y: 62, value: 28, label: "Fiji" },
{ x: 72, y: 68, value: 18, label: "Papua N.G." },
{ x: 45, y: 80, value: 24, label: "Samoa" },
],
},
],
},
config: {
title: { text: "Product Revenue vs Profit Margin", visible: true },
},
});