Charts

Additional communication through visual representation

Charts can typically help users who need to act on information in large datasets. Some examples include representing current status in evolving data and summarise content in large tables.

Guidelines

• Charts are additions, and the elements are inaccessible canvas. Information and functionality should therefore be available outside the charts.
• Charts are simplifications. If they are messy, difficult to read or every data piece need explanations, the chart is too complex or unnecessary.
• We primarily use bars and lines because of their readability. Bars are suitable for comparison. Lines are good at showing change over time.
• The y-axis should have zero to give the most honest representation for comparison. An exception might be if the numbers are always positive or negative and moving in a minimal range, and we want to exaggerate the difference.

Using chart.js

We use chart.js and have bundled it with a base config and colours to minimise the need for configuration and repetition.

Install @mybring/charts and react-chartjs-2 using npm or yarn.

import { configureChartJs, colors } from '@mybring/charts'
configureChartJs()

Import colors from @mybring/charts and the chart type from react-chartjs-2 in your respective chart components. The design system source has several examples.

If you need to register plugins that are not included in chart.js, pass them as an array into the configureChartJs function.

configureChartJs([pluginName])

const data = {
    datasets: [
      {
        backgroundColor: colors.greenLight,
        hoverBackgroundColor: colors.greenLightHover,
      }
    ]
  }

Colour schemes