Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

Highcharts.chart('container', {
  xAxis: {
    categories: ['A', 'B', 'C'],
    tickWidth: 1
  },
  yAxis: [{
    tickPositions: [0, 1, 2, 3, 4, 5],
    labels: {
      formatter: function() {
        switch (this.value) {
          case 1:
            return 'Bad';
          case 2:
            return 'OK';
          case 3:
            return 'Good';
          default:
            return '';
        }
      }
    }
  }, {
    opposite: true,
    tickPositions: [0, 20, 40, 60, 80, 100]
  }],
  series: [{
    type: 'column',
    pointPadding: 0.4,
    pointPlacement: 0.3,
    data: [70, 50, 65],
    yAxis: 1
  }, {
    type: 'bubble',
    data: [3, 2, 3]
  }]
});