Six Pillars Line

by Danielle Parkinson

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'line',
    backgroundColor: '#F0F0F5',
    style: {
      fontFamily: 'Open Sans',
      color: '#333'
    },
    height: 230,
    width: 940
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  title: {
    text: ' '
  },
  subtitle: {
    text: ' '
  },
  xAxis: {
    categories: ['Personalisation', 'Integrity', 'Expectations', 'Resolution', 'Time and Effort', 'Empathy'],
    labels: {
      style: {
        color: '#333',
        fontSize: '14px',
        fontFamily: 'Open Sans'
      }
    },
    tickLength: 0
  },
  yAxis: {
    title: {
      text: ' '
    },
    //tickInterval: 2,
    gridLineColor: '#aec4db',
    labels: {
      style: {
        color: '#333',
        fontSize: '14px',
        fontFamily: 'Open Sans'
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
  },
  plotOptions: {
    area: {
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical',
    itemStyle: {
      color: '#333',
      fontSize: '14px',
      fontFamily: 'Open Sans',
      fontWeight: 'normal'
    }
  },
  series: [{
    name: 'Brand Pillar Performance',
    color: '#D72428',
    data: [30, 55, 50, 33, 59, 30],
    marker: {
      radius: 4,
      fillColor: '#fff',
      lineColor: '#D72428',
      lineWidth: 2,
      symbol: 'circle'
    }
  }, {
    name: 'Consideration Pillar<br/>Performance',
    color: '#2F3A41',
    data: [60, 68, 62, 59, 65, 62],
    marker: {
      radius: 4,
      fillColor: '#fff',
      lineColor: '#2F3A41',
      lineWidth: 2,
      symbol: 'circle'
    }
  }]
});