Highcharts Demo

author(s): Torstein Hønsi

by Venkatesh Dematti

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<div id="container"></div>

JavaScript

const generatePatterns = (color) => {
  const patterns = [];

  [
    'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
    'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
    'M 2 0 L 2 5 M 4 0 L 4 5',
    'M 0 2 L 5 2 M 0 4 L 5 4',
    'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5'
  ].forEach((pattern, i) => {
    patterns.push({
      path: pattern,
      color,
      width: 5,
      height: 5,
      patternTransform: 'scale(1.4 1.4)'
    });
  });

  [
    'M 0 0 L 5 10 L 10 0',
    'M 3 3 L 8 3 L 8 8 L 3 8 Z',
    'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0',
    'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
    'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9'
  ].forEach((pattern, i) => {
    patterns.push({
      path: pattern,
      color,
      width: 100,
      height: 10
    });
  });

  return patterns;
};

Highcharts.chart('container', {

  chart: {
    type: 'pie',
    plotBorderWidth: 1,
    zoomType: 'xy'
  },

  legend: {
    enabled: true
  },

  title: {
    text: 'Sugar and fat intake per country'
  },

  subtitle: {
    text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
  },

  accessibility: {
    point: {
      valueDescriptionFormat: '{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%.'
    }
  },

  xAxis: {
    gridLineWidth: 1,
    title: {
      text: 'Daily fat intake'
    },
    labels: {
      format: '{value} gr'
    },
    plotLines: [{
      color: 'black',
      dashStyle: 'dot',
      width: 2,
      value: 65,
      label: {
        rotation: 0,
        y: 15,
        style: {
          fontStyle: 'italic'
        },
        text: 'Safe fat intake 65g/day'
      },
      zIndex: 3
    }],
    accessibility: {
      rangeDescription: 'Range: 60 to 100 grams.'
    }
  },

  yAxis: {
    startOnTick: false,
    endOnTick: false,
    title: {
      text: 'Daily sugar intake'
    },
    labels: {
      format: '{value}...