set tick length in y-axis to 0 or remove tickline from y axis in area chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

set tick length in y-axis to 0 or remove tickline from y axis in area 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" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from   w ww .  j  a va2 s.c o m
$(function () {
    Highcharts.setOptions({
        colors: ['#C9F4F4']
    });
    $('.container').highcharts({
        chart: {
            type: 'area',
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul','Aug','Sep','Oct','Nov','Dec'],
            tickmarkPlacement: 'on',
            overflow:'false',
            gridLineWidth: 1,
            //tickLength: 0,
            title: {
                enabled: false
            },
            startOnTick: false,
            min: 0.5
        },
        yAxis: {
            min: 100,
            max: 1000,
            tickInterval: 100,
            gridLineWidth: 1,
            title: {
                enabled: false
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            shared: true,
            formatter: function () {
                return this.y;
            }
        },
        plotOptions: {
            series: {
                lineColor: '#00CFCF',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#00CFCF',
                    enabled: false,
                }
            }
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 900, 1000, 1000,200,750,630,400,75]
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <div class="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials