Coral Charts: Part 1

In this recipe, we're taking a look at building simple bar charts, as well as the more complex stack chart, making use of the pre-built chart types in coral-charts.

Bar Chart

You can instantiate a bar chart by simply providing a data object to CoralBarChart. This pre-built has some basic defaults that lay the chart out without you needing to provide any overrides.

<CoralBarChart
  data={[
      {
          x: '00',
          y: 1000,
      },
      {
          x: '01',
          y: 500,
      },
      ...
  ]}
/>

Tooltips

You can provide labelFormat to the modifiers.chart property to provide extra messaging, such as units or explanatory messaging, to the tooltip.

<CoralBarChart
  modifiers={{
      tooltip: {
          labelFormat: ({ datum }) => `Usage: ${datum.y}kWh`,
      },
  }}
  data={[
      {
          x: '00',
          y: 1000,
      },
      {
          x: '01',
          y: 500,
      },
      ...
  ]}
/>

Fill Colours

There are three ways to provide colour to the bars.

By default, the colour will be set by the default theme provided via ChartsProvider, however, you can opt to pass fillColour (or strokeColour, for CoralLineChart) to the chart via modifiers.bar.fillColour

<CoralBarChart
  modifiers={{
      bar: {
          fillColour: "red"
      }
  }}
  data={[
      {
          x: '00',
          y: 1000,
      },
      {
          x: '01',
          y: 500,
      },
      ...
  ]}
/>

or you can provide fill to your data param to set different colours per bar

<CoralBarChart
  data={[
      {
          x: '00',
          y: 1000,
          fill: 'red'
      },
      {
          x: '01',
          y: 500,
          fill: 'purple'
      },
      ...
  ]}
/>

Note that the colours also cascade in this way, too, so setting fill in data will take precedent over fillColour, and fillColour will take precedent over the colour set in your theme.

Stack Chart

You can instantiate a basic stack chart by providing a data object to CoralStackChart. Unlike the bar chart, this pre-built doesn't have basic defaults that lay the chart out without you needing to provide any overrides, as the content can generally be more variable.

A basic integration might look like this

<CoralStackChart
  data={[
      [
          { x: '00', y: 1000 },
          { x: '01', y: 800 },
          ...
      ],
      [
          { x: '00', y: 2300 },
          { x: '01', y: 1100 },
          ...
      ],
      [
          { x: '00', y: 1920 },
          { x: '01', y: 0 },
          ...
      ]
  ]}
  modifiers={{
      chart: {
          domainPadding: { x: 40, y: 20 },
      }
  }}
/>

Colors

If you don't want to use the default theme colourway, you can pass through modifiers.stack.colorScale with an array of colours that matches the number of items in your chart

<CoralStackChart
  data={[ ... ]}
  modifiers={{
      ...
      stack: {
          colorScale: [
              octopusTheme.color.primary.dark,
              octopusTheme.color.primary.light,
              octopusTheme.color.primary.main,
          ]
      }
  }}
/>

Placement Modifier

CoralStackChart (and also CoralGroupBarChart and CoralGroupLineChart) has an additional property called placementModifier that allows more refined positioning of the tooltip labels when you have more (or less) than three items in your chart.

If you have more than three items, you should make the modifier smaller than the default 2.8, conversely if you only have two items then you should make the modifier smaller (if you only have one item, the tooltip will default to the same as on CoralBarChart, so the modifier is disregarded).

You can see on the left below the modifier is set to the default 2.8, which positions the labels too low, and on the right it is set to 2.1 which renders the labels correctly in the middle of the tooltip. This will require some manual refinement per chart init.

<CoralStackChart
  data={[ ... ]}
  modifiers={{
      ...
      stack: {
          colorScale: [
              ...
          ],
          placementModifier: 2.1
      }
  }}
/>

Custom Tooltips

You can provide custom tooltips to CoralStackChart, CoralGroupBarChart and CoralGroupLineChart, which you can read about by visiting this recipe.