Highcharts Demo

author(s): Torstein Hønsi

by sgearhart2

HTML

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

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

JavaScript

const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    
    Highcharts.chart('container', {

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

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

    xAxis: {
      type : 'datetime',
                labels:{
                    enabled:true,
                    useHTML:true,
                    rotation: -45,
                    formatter:function(){
                        const date = new Date(this.value);
                        const month = monthNames[date.getUTCMonth()];
                        const year = date.getUTCFullYear();
                        return month+"-"+year;
                    },
                },
    	tickPositioner: function() {
      	var tickPositions = [];
        
        var i = this.dataMin, year, month;
        
        while(i <= this.dataMax) {
        	year = (new Date(i)).getUTCFullYear();
          month = (new Date(i)).getUTCMonth();
          
          if(month === 3 /* April */ || month === 9 /* October */) {
          	tickPositions.push(Date.UTC(year, month, 1, 0, 0, 0));
          }
          // increment
          month++;
          if(month > 11) {
          	month = 0;
            year++;
          }
          i = Date.UTC(year, month, 1, 0, 0, 0)
        }
        console.log(tickPositions);
        return tickPositions;
      }
    },

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

            if (this.dataMax !== null && this.dataMin !== null) {
                for (tick; tick - increment <= this.dataMax; tick += increment) {
                    positions.push(tick);
                }
            }
            return positions;
        }
    },

    series: [{
        data: [
            [Date.UTC(2019, 0,...