CODEWITHSUNDEEP
javascripthighcharts
maafk
maafk

Reputation: 6906

highcharts add yAxis label based on negative/positive value

I have a column chart that shows the trade balance between the US and other countries over time.

I need the ability to show on the right side of the chart that positive numbers are imports (positive trade balance) and that negative numbers are exports (negative trade balance).

A badly written start can be seen in this fiddle

I'm attempting to add the import/export labels with the following (ugly) code:

 yAxis: [{

        title: {
            text: 'Millions of Dollars'
        }
    },{
        opposite: true,
        title : {
          rotation: 0,
          text: 'Imports',
          x: 17,
          y: -48
      }
    },{
      opposite: true,
        title : {
          rotation: 0,
          text: 'Exports',
          x: -40,
          y : 5
      }
    }]

I'm looking to create something like a category on the yAxis for positive and negative values to label positive values as imports and negative values as exports.

Would like to keep in highcharts so all the nice options that come with highcharts (download, etc) shows this secondary yAxis labels as well.

Is there something simple I'm missing to make this work?

Thanks!!

Upvotes: 0

Views: 1138

Answers (2)

maafk
maafk

Reputation: 6906

I ended up using the following to manually position the text

See working http://jsfiddle.net/0s17qt56/4/

excerpt below

labels: {
      items : [{
         html : 'Imports',
         style : {
           left: '710px',
           top : '130px'
         }
       },{
         html : 'Exports',
         style : {
           left: '710px',
           top : '70px'
         }
       }]
    },

Upvotes: 0

apokryfos
apokryfos

Reputation: 40720

Since you didn't your own solution, here's my own dirty hacky solution which is probably worse, but you at least don't need to specify positions for the axes (sort of).

The idea is to add an extra category with no name, add another series with 2 points with an x value of that category and a name being "import" and "export".

You could eventually derive the values of these 2 "hidden" points based on the data you have so they can adjust automatically. It's dirty but it works. 

$(function () {
    $('#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]

        }]
    });
});

See fiddle http://jsfiddle.net/r2etx98t/

Upvotes: 0

Related Questions