Gallery

Browser Market Share

AG
$ npx flitter-ui add pie-chart --ag

Code

import PieChart from "@/components/flitter/charts/pie-chart";

const chart = PieChart({
  data: {
    datasets: [
      { name: "Chrome", value: 65 },
      { name: "Safari", value: 18 },
      { name: "Firefox", value: 8 },
      { name: "Edge", value: 5 },
      { name: "Other", value: 4 },
    ],
  },
  config: {
    legend: { visible: false },
    radial: { visible: false },
    dataLabel: {
      visible: true,
      formatter: (args) =>
        args.percentage >= 5 ? `${args.name}\n${args.percentage.toFixed(0)}%` : "",
    },
  },
});

Related Charts