Highcharts Demo

author(s): Torstein Hønsi

by Craig Martin

HTML

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

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

JavaScript

row_high = '4.1';
row_average = '3.1';
row_low = '2.1';

Highcharts.chart('container', {

    title: {
        text: 'Custom tick positions'
    },

    subtitle: {
        text: 'through axis.tickPositions and axis.tickPositioner'
    },

    xAxis: {
        tickPositions: [0, 1, 2, 4, 8]
    },

    yAxis: {    
        plotLines: [{
            color: '#e40101',
            width: 3,
            value: row_high
        }, {
            color: '#cebc00',
            width: 3,
            value: row_average
        }, {
            color: '#05c805',
            width: 3,
            value: row_low
        }],  

				tickPositioner: function () {
            var positions = [],
                tick = Math.floor(this.dataMin),
                increment = Math.ceil((this.dataMax - this.dataMin) / 10);

            if (this.dataMax !== null && this.dataMin !== null) {

                for (tick; tick - increment <= this.dataMax; tick += increment) {
									positions.push(tick);
                    if(tick !== row_low){
										positions.push(row_low);
										}
                    if(tick !== row_average){
										positions.push(row_average);
										}
										if(tick !== row_high){
										positions.push(row_high);
										} 
 
								}
            }
            return positions;
        },

		labels: {
	    formatter: function () {
  	      if (row_high === this.value) {
   	         return '<span style="fill: red;">High ' + this.value + '</span>';
					} else 
  	      if (row_average === this.value) {
  	          return '<span style="fill: #cebc00;">Average ' + this.value + '</span>';
	        } else 
 	       if (row_low === this.value) {
 	           return '<span style="fill: #05c805;">Low ' + this.value + '</span>';
 	       } else {
 	           return this.value;
 	       }
    	}
		}

},

    series: [{
        data: [
            [0, 1],
            [1, 3],
            [2, 2],
            [4, 4],
            [8, 3]
        ]
    }]
});