Chart components help to visualize data sets in an intuitive, easy to understand way.

() => {
  const data = useMockData(30, true);

  const tooltipLabelFn = useCallback((item: ChartData, key: string) => {
    if (!item.date) {
      return key;
    }

    if (key === 'Previous Period') {
      const previousDate = new Date(item.date);
      previousDate.setMonth(item.date.getMonth() - 1);
      return formatDate(previousDate);
    }

    return formatDate(item.date);
  }, []);

  return (
    <Box width="100%" height={230}>
      <Chart.Line
        data={data}
        features={{ legend: true, xAxisLabelCount: 4, yAxisLabelCount: 2 }}
        tooltipLabelFn={tooltipLabelFn}
      />
    </Box>
  );
}

Line chart plots data at regular intervals connected by lines to visualize trends over time and compare several data sets.


Chart

() => {
  const data = usePieMockData();

  const colors: ChartStyle[] = [
    { fill: 'content.success', stroke: 'content.success' },
    { fill: 'content.error', stroke: 'content.error' },
    { fill: 'content.primary', stroke: 'content.primary' },
    { fill: ['blue30', 'blue70'], stroke: ['blue30', 'blue70'] }
  ];

  return (
    <Box display="flex" gap="$24" flexDirection={['column', 'column', 'row']}>
      <Box height={180}>
        <Chart.Pie labels data={data} fills={colors} />
      </Box>
      <Box>
        <Tooltip text="Explanation of the Performance term" $nowrap>
          <Box display="flex" alignItems="center" color="content.subtle.light" gap="$4" mb="$24">
            <Typography variant="body-small">Performance</Typography>
            <IconHelpCircle size={21} />
          </Box>
        </Tooltip>
        <Chart.Legend data={data} colors={colors} $size="large" $withValues $valueSuffix="%" />
      </Box>
    </Box>
  );
}

Pie chart express portions of a whole, using arcs or angles within a circle.


() => {
  const data = useMockData(4);

  return (
    <Box width="100%">
      <Chart.Bar labels data={data} />
    </Box>
  );
}

Bar chart uses horizontal data markers to compare proportional contributions within a data set.


() => {
  const data = useMockData(12, true);
  const fills: ChartStyle[] = [{ stroke: 'content.error', fill: ['red70', 'red70'] }];

  return (
    <Box width="100%" height={230}>
      <Chart.Bars
        data={data}
        fills={fills}
        xAxisLabel={(f: number | Date | null) => {
          return f ? new Date(f).toLocaleString('en-US', { month: 'short', day: 'numeric' }) : '';
        }}
        features={{ yAxisMaxValue: 100 }}
      />
    </Box>
  );
}

Bars chart expresses quantities through a bar's length, using a common baseline.


Bars

() => {
  const data = useMockData(6);

  const dataWithoutDate = useMemo(() => {
    return data.map((d) => {
      // eslint-disable-next-line no-param-reassign
      delete d.date;
      return d;
    });
  }, [data]);

  return (
    <Box width="100%" height={420}>
      <Chart.BarGroupHorizontal
        data={dataWithoutDate}
        xAxisLabel={(value) => \`\${value}k\`}
        features={{
          legend: true,
          groups: [
            { label: 'Marketing' },
            { label: 'Finance & Ops' },
            { label: 'Business Unit' },
            { label: 'CEO' },
            { label: 'R&D' },
            { label: 'Human Resources with a long name' }
          ]
        }}
      />
    </Box>
  );
}

Bar group chart uses horizontal data markers to compare values across multiple categories.


BarGroupHorizontal

() => {
  const data = useMockData(10).map((d) => ({ date: d.date || new Date(), runMinutes: d['Current Period'] }));
  const fills: ChartStyle[] = [{ stroke: ['brand-green50', 'brand-green80'], fill: ['brand-green50', 'brand-green80'] }];

  return (
    <Box width="100%">
      <Chart.StatLine
        features={{ highlightSlice: [[2]], highlightColors: { stroke: ['green50'] } }}
        fills={fills}
        data={data}
        tooltipXAxisValue
      />
    </Box>
  );
}

StatLine chart plots a single data set at regular intervals to visualize it's trend over time.


Chart component

Pie

Bar

Bars

Bar Group Horizontal

Stat Line