Adding series to yAxis with id for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Adding series to yAxis with id for column 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"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from w w  w . j  ava 2s . co  m*/
            $('#graf').highcharts({
                chart: {
                    zoomType: 'xy'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: [{type: 'datetime',
                        title: {
                            text: 'Date'
                        }}],
                yAxis: [],
                        series : []
                        ,
                tooltip: {
                    shared: true
                },
                legend: {
                    enabled: true,
                    align: 'left',
                    backgroundColor: '#FFFFFF',
                    borderColor: 'grey',
                    borderWidth: 1,
                    layout: 'vertical',
                    verticalAlign: 'top',
                    y: 0,
                    shadow: true
                }
            });
    var chart = $('#graf').highcharts();
    $('#add').click(function () {
        chart.addAxis({ // Secondary yAxis
            id: "asd",
            title: {
                text: 'Rainfall'
            },
            lineWidth: 2,
            lineColor: '#08F',
            opposite: true
        },false);
        chart.addSeries({
            name: 'Rainfall',
            type: 'column',
            color: '#08F',
            yAxis: "asd",
            data: [ [Date.UTC(1970,  9, 27), 0   ],
                [Date.UTC(1970, 10, 10), 0.6 ],
                [Date.UTC(1970, 10, 18), 0.7 ],
                [Date.UTC(1970, 11,  2), 0.8 ],
                [Date.UTC(1970, 11,  9), 0.6 ]]
        });
        chart.addAxis({ // Secondary yAxis
            id: "abc",
            title: {
                text: 'Rainfall'
            },
            lineWidth: 2,
            lineColor: '#08F',
            opposite: true
        },false);
    });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="graf" style="height: 400px"></div> 
      <button id="add" class="autocompare">Add axis and series</button>  
   </body>
</html>

Related Tutorials