CEO Donut

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

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'line',
      width: 440,
      height: 270,
      backgroundColor: '#fff'
    },
    title: {
      text: ' '
    },
    xAxis: {
      categories: ['8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm'],
      title: {
        text: null
      },
      labels: {
        style: {
          fontFamily: 'Open Sans',
          fontSize: '15px',
          color: '#595959'
        }
      },

    },
    yAxis: {
      min: 0,
      max: null,
      tickInterval: 5,
      title: {
        text: ' ',
      },
      labels: {
        style: {
          fontFamily: 'Open Sans',
          fontSize: '15px',
          color: '#595959'
        }
      },
    },
    plotOptions: {
      series: {
        stickyTracking: false,
        dashStyle: "Solid",
        marker: {
          enabled: false
        },
      }
    },
    legend: {
      borderWidth: 0,
      itemStyle: {
        fontWeight: 'normal',
        fontFamily: 'Open Sans',
        fontSize: '15px',
        color: '#595959'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      column: {
        dataLabels: {
          y: 20,
          color: '#ffffff',
          enabled: true,
          fontWeight: 'normal',
        }
      }
    },

    series: [{
      name: 'Wait time',
      data: [10, 13, 11, 6, 14, 15, 11, 9, 4, 10, 9],
      color: '#c0504d',
      marker: {
        enabled: false
      },
    }, {
      name: 'Target',
      data: [6, 6, 5, 4, 4, 4, 5, 5, 4, 4, 5],
      color: '#4f81bd',
      marker: {
        enabled: false
      },
    }]
  });
});