change line width programmatically and prevent resetting line width for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

change line width programmatically and prevent resetting line width for line 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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  www  .ja v a 2s .  c o  m
$(function () {
    var myChart = $('#container').highcharts({
        chart: {
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            line: {
                states: {
                    hover: {
                        enabled: false,
                    }
                }
            },
        },
        series: [{
            id: 'series-1',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    $('#configButton').click(function () {
        var chart = $('#container').highcharts(),
            series = chart.get('series-1');
        series.update({
            lineWidth:10
        });
    });
});
    });

      </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" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <button id="configButton">Make line thicker</button>  
   </body>
</html>

Related Tutorials