UI Kit

Base Chart

UI Kit includes several chart components powered by ECharts. For unsupported chart types, use HvBaseChart—a flexible wrapper around the ECharts API that lets you build fully custom configurations.

The example below demonstrates how to create a Sankey chart, which is not available out of the box.
HvBaseChart includes the CanvasRenderer and AriaComponent by default, but you must manually import and register the SankeyChart component from ECharts.

echarts.use([SankeyChart]);

You can also enhance your chart with additional ECharts components like TooltipComponent or LegendComponent.
Refer to the ECharts cheat sheet for a full list of available components.

import { SankeyChart } from "echarts/charts";
import * as echarts from "echarts/core";


export default function Demo() {
  echarts.use([SankeyChart]);


  return (
    <HvBaseChart
      width={600}
      height={350}
      option={{
        animation: false,
        series: {
          type: "sankey",
          layout: "none",
          nodeAlign: "left",
          emphasis: {
            focus: "adjacency",
          },
          data: [
            {
              name: "Top Area",
            },
            {
              name: "Main Area",
            },
            {
              name: "West Door",
            },
            {
              name: "East Door",
            },
            {
              name: "Main Door",
            },
          ],
          links: [
            {
              source: "Top Area",
              target: "West Door",
              value: 5,
            },
            {
              source: "Top Area",
              target: "East Door",
              value: 8,
            },
            {
              source: "Top Area",
              target: "Main Door",
              value: 3,
            },
            {
              source: "Main Area",
              target: "East Door",
              value: 10,
            },
            {
              source: "Main Area",
              target: "Main Door",
              value: 6,
            },
          ],
        },
      }}
    />
  );
}

import { SankeyChart } from "echarts/charts";
import * as echarts from "echarts/core";

export default function Demo() {
  echarts.use([SankeyChart]);

  return (
    <HvBaseChart
      width={600}
      height={350}
      option={{
        animation: false,
        series: {
          type: "sankey",
          layout: "none",
          nodeAlign: "left",
          emphasis: {
            focus: "adjacency",
          },
          data: [
            {
              name: "Top Area",
            },
            {
              name: "Main Area",
            },
            {
              name: "West Door",
            },
            {
              name: "East Door",
            },
            {
              name: "Main Door",
            },
          ],
          links: [
            {
              source: "Top Area",
              target: "West Door",
              value: 5,
            },
            {
              source: "Top Area",
              target: "East Door",
              value: 8,
            },
            {
              source: "Top Area",
              target: "Main Door",
              value: 3,
            },
            {
              source: "Main Area",
              target: "East Door",
              value: 10,
            },
            {
              source: "Main Area",
              target: "Main Door",
              value: 6,
            },
          ],
        },
      }}
    />
  );
}

Please check the Charts examples page for more examples of charts built with the HvBaseChart component.

Get Started Bar Chart