add yAxis label based on negative/positive value - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

add yAxis label based on negative/positive value

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.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from   w ww .  j a  va 2s.  c o  m*/
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Widget trade balance'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec',
                ""
            ],
            crosshair: true
        },
        yAxis: [{
            title: {
                text: 'Millions of Dollars'
            }
        }],
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [
              {
                  type: "scatter",
                color: "transparent",
                data: [ { x:12, y:20,name:"Imports" }, { x:12, y:-20,name:"Exports" } ],
                showInLegend: false,
                dataLabels: {
                      enabled: true,
                    formatter: function () { return this.point.name; },
                    y: 10
                }
            },
        {
            name: 'Canada',
            data: [-83.6, -78.8, -98.5, -93.4, -66.0, -44.5, -105.0, -104.3, -91.2, -83.5, -106.6, -92.3]
        }, {
            name: 'Mexico',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: 'England',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials