• Components
  • Charts

Multi Series Chart

Usage notes

Different shaped points are used as well as colour (which are in keeping with the ONS colour guidelines so that colour alone isn't used to indicate which data set the line is applicable to.

Adding the shapes to the tooltip helps differentiate between the data points.

All data values are shown in the tooltip (as a pose to the point currently hovered over) as some points may stack.

Note: The inline height style is shown here as an example. Inline styles should not be used in production ready code.

 
<div data-chart="multi-series" style="height:500px;">
  <!-- this is a no-js image representation of the graph, which needs to be built on the server -->
  <noscript>
    <img src="http://placehold.it/1000x500&amp;text=No+-+JS+Chart+area+goes+here" alt="">
  </noscript>
</div>

Developer Notes

General Chart Approach

All ONS charts are based on the Highcharts library.

Usage

The Javascript for this pattern can be seen here and shows an example of how the chart is initialised.

var data = {
  xAxis: {
    categories: ['Feb 2013', 'Mar 2013', 'Apr 2013', 'May 2013', 'Jun 2103', 'Jul 2013', 'Aug 2013', 'Sept 2013', 'Oct 2013', 'Nov 2013', 'Dec 2013', 'Jan 2014', 'Feb 2014'],
  },

  series: [{
    name: 'CPI % change',
    data: [1.7, 1.9, 2, 2.1, 2.2, 2.7, 2.7, 2.8, 2.9, 2.7, 2.4, 2.8, 2.8],
    marker: {
      symbol: "circle",
      states: {
        hover: {
            fillColor: '#007dc3'
        }
      }
    },
    dashStyle: 'Solid'
  }, {
    name: ' CPIH % change',
    data: [1.6, 1.8, 1.9, 1.9, 2, 2.5, 2.5, 2.5, 2.7, 2.5, 2.2, 2.6, 2.6],
    marker: {
      symbol: "square",
      states: {
        hover: {
            fillColor: '#409ed2'
        }
      }
    },
    dashStyle: 'longdash'
  }, {
    name: 'RPIJ % change',
    data: [2, 2.1, 2, 2, 1.9, 2.5, 2.6, 2.6, 2.7, 2.5, 2.3, 2.7, 2.6],
    marker: {
      symbol: "diamond",
      states: {
        hover: {
            fillColor: '#7fbee1'
        }
      }
    },
    dashStyle: 'shortdot'
  }, {
    name: 'RPI % change',
    data: [2.7, 2.8, 2.7, 2.6, 2.6, 3.2, 3.3, 3.1, 3.3, 3.1, 2.9, 3.3, 3.2],
    marker: {
      symbol: "triangle",
      states: {
        hover: {
          fillColor: '#007dc3'
        }
      }
    },
    dashStyle: 'Dot'
  }]

};

var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: "X-Axis label"
  }],
  title: {
    text: "The Chart Title"
  }
};

$.extend(true, options, data);

$('[data-chart]').highcharts(options);