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 = 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-primary50', 'brand-primary-dark80'], fill: ['brand-primary50', 'brand-primary-dark80'] }
  ];

  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.


StatLine

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

  const colors: ChartStyle[] = [
    { fill: 'chart.green', stroke: 'chart.green' }, // Completed
    { fill: 'chart.grey-dark', stroke: 'chart.grey-dark' }, // Failed
    { fill: 'chart.orange-dark', stroke: 'chart.orange-dark' }, // Error
    { fill: 'chart.green-light', stroke: 'chart.green-light' }, // User Collaboration Needed
    { fill: 'blue10', stroke: 'blue10' } // Escalate Manually
  ];

  const total = Object.values(data[0]).reduce((sum: number, n) => {
    if (typeof n === 'number') {
      return sum + n;
    }
    return sum;
  }, 0);

  return (
    <Box>
      <Chart.Donut data={data} fills={colors} title={total.toString()} subtitle="Total Work Items" />
    </Box>
  );
}

Donut chart expresses proportions of a whole, using a circle's circumference.


Chart component

Bar

Bars

Bar Group Horizontal

Stat Line

Donut