Column Highchart - display absolute values but keep information about which values are negative

Question

I receive both negative and positive values from an api, which I feed into my column chart.

http://jsfiddle.net/jn7Lvoz4/3/

The problem is that I don't want my negative values to be displayed below the x-axis, but above, just like the positive values. I still want to keep the values negative though, so that I can color them red and pass them into a function when the values are hovered. (I am just outputting them with a console.log in my fiddle, but I think you get the idea.)

I found a solution to this problem right here, but they solve it by using H.seriesTypes.column. Hightcharts.seriesTypes doesn't seem to exist in angular-highcharts so this sadly didn't really help me.

Does anybody know how I could achieve this?

Answer 1

I think this is what you're going for http://jsfiddle.net/fq2u76hg/2/.

The main change was adding a map function to convert each [x, y] to an object.

function mapData([x, y]) {
    return {
        name: x,
        x: x,
        y: Math.abs(y),
        actualY: y,
        color: y >= 0 ? '#63CCA6' : '#E6496F'
    }
}

Then Highcarts will automatically use the absolute y value and the color provided for each data element and in your listener function you can grab the 'actualY' value instead of 'y'.