Chapter 1 Example - HC 4

by pepperdigital

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/exporting.js"></script>


<div id="main" style="width:400px; padding-top: 20px; padding-bottom: 20px">
  <div id="container" style="min-width: 200px; max-width: 360px; height: 400px; margin: 0 auto;"></div>
</div>

CSS

#main {
  background-color: #383838;
}

.legend-title {
  display: block;
  width: 150px;
  margin: 1px 0px;
  text-align: center;
}

JavaScript

$(document).ready(function() {
      document.title = "Highcharts " + Highcharts.version;

      var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          type: 'spline',
          polar: true,
          backgroundColor: '#383838',
          spacing: [10, 5, 5, 5],
          marginTop: 100,
          marginBottom: 75,
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        title: {
          text: 'REACTION TIME',
          style: {
            color: '#ffffff',
            fontSize: '14px'
          },
        },
        subtitle: {
          text: '(seconds)',
          style: {
            color: '#ffffff',
            fontSize: '10px'
          },
        },
        pane: {
          size: '110%',
          startAngle: -36,
          center: ['50%', '40%']
        },
        legend: {
          verticalAlign: 'bottom',
          itemStyle: {
            color: '#ffffff',
            fontSize: '10px',
          },
          y: 5,
          borderWidth: 1,
          borderRadius: 3,
          useHTML: true,
          labelFormatter: function() {
            return '<span class="legend-title">' + this.name + '</span>'
          },
        },
        tooltip: {
          pointFormat: 'Reaction Time: {point.y:.2f} <b>seconds</b></br>',
        },
        xAxis: {
          categories: ['RoundRound Round Round 1', 'RoundRound Round 2', 'Round 3', 'Round 4', 'Round 5', ],
          tickmarkPlacement: 'on',
          labels: {
            style: {
              whiteSpace: 'nowrap',
              color: '#ffffff',
              fontSize: '10px'
            },
            distance: 10,
          },
          lineWidth: 0,
        },
        yAxis: {
          title: {
            text: ''
          },
          labels: {
            style: {
              color: '#FF3333',
              fontSize: '9px'
            },
          },
         ...