DonutChart

Donut charts nicely convey the part-whole relationship and they have become the most recognizable chart types for representing proportions in business and data statistics.

Source Code

uikit-react-viz

Usage

This example demonstrates a simple donut chart with two data points.

<HvDonutChart
  height={200}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
/>

<HvDonutChart
  height={200}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
/>

Thin

If you need to have a thin donut chart, you can set the type prop to thin.

<HvDonutChart
  height={200}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
  type="thin"
/>

<HvDonutChart
  height={200}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
  type="thin"
/>

Split data

Use the splitBy property to split the data into different groups.

<HvDonutChart
  height={300}
  data={{
    Year: ["2021", "2022", "2020", "2020", "2021", "2022"],
    Semester: ["S1", "S1", "S1", "S2", "S2", "S2"],
    Precipitation: [212.6, 115.9, 219.0, 226.0, 128.2, 170.7],
  }}
  groupBy={["Year", "Semester"]}
  measure="Precipitation"
  sortBy={{ field: "Year", order: "asc" }}
  tooltip={{
    valueFormatter: (value?: string | number) => `${value} mm`,
  }}
  slicesNameFormatter={(value?: string) => `${value?.split("_").join(" ")}`}
/>

<HvDonutChart
  height={300}
  data={{
    Year: ["2021", "2022", "2020", "2020", "2021", "2022"],
    Semester: ["S1", "S1", "S1", "S2", "S2", "S2"],
    Precipitation: [212.6, 115.9, 219.0, 226.0, 128.2, 170.7],
  }}
  groupBy={["Year", "Semester"]}
  measure="Precipitation"
  sortBy={{ field: "Year", order: "asc" }}
  tooltip={{
    valueFormatter: (value?: string | number) => `${value} mm`,
  }}
  slicesNameFormatter={(value?: string) => `${value?.split("_").join(" ")}`}
/>

Custom ECharts options

If needed, you can customize the chart using ECharts options.

In this example, we:

Use round icons in the legend
Position labels next to each slice
Adjust the radius to create a pie look instead of a donut
Style slice borders to make the margins visible

<HvDonutChart
  height={400}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
  tooltip={{ show: false }}
  onOptionChange={(option) => {
    if (
      option.legend &&
      typeof option.legend === "object" &&
      !Array.isArray(option.legend)
    ) {
      option.legend.icon = "circle";
    }
    option.series[0].label = {
      show: true,
      position: "outside",
      formatter: "{c} ({d}%)",
      fontSize: 12,
    };
    option.series[0].labelLine = {
      show: true,
      length: 10,
      length2: 15,
      smooth: true,
      lineStyle: {
        width: 1.5,
        type: "solid",
      },
    };
    option.series[0].radius = "75%";
    option.series[0].center = ["50%", "60%"];
    option.series[0].emphasis = {
      label: {
        show: true,
        fontSize: 16,
        fontWeight: "bold",
      },
    };
    option.series[0].itemStyle = {
      borderRadius: 4,
      borderColor: "#fff",
      borderWidth: 1,
    };
    return option;
  }}
/>

<HvDonutChart
  height={400}
  data={{
    Type: ["Solar", "Wind", "Hydro", "Other"],
    Total: [1641.58, 2325.31, 4240.01, 781.5],
  }}
  groupBy="Type"
  measure="Total"
  tooltip={{ show: false }}
  onOptionChange={(option) => {
    if (
      option.legend &&
      typeof option.legend === "object" &&
      !Array.isArray(option.legend)
    ) {
      option.legend.icon = "circle";
    }
    option.series[0].label = {
      show: true,
      position: "outside",
      formatter: "{c} ({d}%)",
      fontSize: 12,
    };
    option.series[0].labelLine = {
      show: true,
      length: 10,
      length2: 15,
      smooth: true,
      lineStyle: {
        width: 1.5,
        type: "solid",
      },
    };
    option.series[0].radius = "75%";
    option.series[0].center = ["50%", "60%"];
    option.series[0].emphasis = {
      label: {
        show: true,
        fontSize: 16,
        fontWeight: "bold",
      },
    };
    option.series[0].itemStyle = {
      borderRadius: 4,
      borderColor: "#fff",
      borderWidth: 1,
    };
    return option;
  }}
/>