Set line chart plot line color - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Set line chart plot line color

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head></head>
   <body translate="no"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="width:100%; height:400px;"></div> 
      <script>
      $(function () {// w  w  w  . j a v a 2s. c o  m
    var data = {"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]};
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
             }]
        },
        series: [data]
    });
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials