Style label for axis in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Style label for axis in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <div id="container" style="height: 400px"></div> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript">
var categories = ['Jan 12_Jan 12', 'Feb 12_Feb 12'];
Highcharts.chart('container', {
  chart: {// w  ww .j a  va2s  . co  m
    type: 'line',
    alignTicks: true,
    marginRight: 25,
    borderWidth: 0,
    plotBorderWidth: 0,
    shadow: false,
    zoomType: "xy"
  },
  credits: {
    enabled: false,
    href: "",
    text: ""
  },
  plotOptions: {
    area: {
      fillOpacity: 0
    }
  },
  title: {
    text: ""
  },
  legends: {
    enabled: false
  },
  xAxis: {
    labels: {
      style: {
        color: "#000000",
        fontBold: true,
        fontSize: 7
      },
      rotation: 0,
      y: 12,
      lineColor: "#816A44",
      lineWidth: 0.50,
      tickColor: "#816A44",
      formatter: function() {
        return categories[this.value];
      }
    },
    tickInterval: 1,
    tickLength: 4,
    tickWidth: 0.5,
    tickmarkPlacement: "on",
  },
  yAxis: {
    allowDecimals: true,
    gridLineColor: "#999999",
    gridLineWidth: 0.25,
    labels: {
      style: {
        Color: "#000000",
        fontSize: 7,
      }
    },
    y: 2,
    min: 20,
    offset: -10,
    tickPixelInterval: 25,
    title: {
      text: ""
    }
  },
  series: [{
    data: [29.9, 71.5]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials