Show only used ticks in chart - Javascript highcharts

Javascript examples for highcharts:Tick

  1. HOME
  2. Javascript
  3. highcharts
  4. Tick

Description

Show only used ticks in chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){//w  ww  .ja va  2  s  .c o m
Highcharts.chart('container', {
      chart: {
            defaultSeriesType: 'line',
    },
    xAxis: {
            gridLineWidth: 1,
            minorGridLineWidth: 1,
            type: 'datetime',
            tickInterval: 3600 * 24 * 30 * 1000,
            labels: {
                rotation: -45,
                formatter: function () {
                      var monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"
                    ];
                    var monthStr = monthNames[new Date(this.value).getMonth()];
                    return monthStr;
                }
            }
        },
    yAxis: [{
            title: {
                text: null
            },
            gridLineWidth: 1,
            minorGridLineWidth: 1,
                        labels: {
                formatter: function() {
                    return this.value * 100 + " %";
                }
            },
            opposite: true
    },{
                title: {
                text: null
            },
            gridLineWidth: 1,
            minorGridLineWidth: 1,
             min: 0
    }
    ],
    series: [{
            name: "left",
            data: [[1485896400000,8086.829999999999],[1488315600000,9575.62],[1490994000000,8446.84],[1493586000000,9959.93],[1496264400000,9246.06],[1498856400000,2346]],
            yAxis: 1,
            marker: {
                symbol: 'circle'
            }
        },{
            name: "right",
            data:  [[1485896400000,0.7920220246886492]
            ,[1488315600000,0.7950181534688361]
            ,[1490994000000,0.8068168576051594]
            ,[1493586000000,0.850108440799688]
            ,[1496264400000,0.8010823118430489]
            ,[1498856400000,0.8243148278285313]],
            yAxis: 0,
            colorIndex: 3,
            marker: {
                symbol: 'circle'
            },
            tooltip: {
               pointFormatter: function(){
                  return '<b>' + Highcharts.numberFormat(this.y * 100, 2)  + '%</b>'
              }
            }
        }]
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials