CODEWITHSUNDEEP
javascripthighcharts
devabhishekpal
devabhishekpal

Reputation: 115

Reversed bullet chart in Highcharts

I started working with highcharts. Now a problem I am facing is that the bulletcharts can’t be used for a dataset that is in descending order.

For example say we want to plot the ranking of a few companies. In this case the ranking is better the lower it gets. So a Rank 10 is better than a Rank 15 and so on.

In this case I want my graph to get reversed. The target would be lets say 10. The min value would start from say 100 to 0. So you can see how this isnt possible.

P.S: I know the

reverse: true/false

property. But that simply flips the graph and I don’t want that/need that. Thanks world.

Mockup explaining my idea

Upvotes: 0

Views: 483

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You can add a second y-axis with the same extremes as the first one, but reversed. Next, hide the first y-axis, calculate mocked y and target values and finally, set a custom formatter function for tooltip to show original values.

const MAX = 300;
const TARGET = 50;
const Y = 25;

Highcharts.chart('container1', {
    chart: {
        inverted: true,
        type: 'bullet',
    },
    yAxis: [{
        visible: false,
        min: 0,
        max: MAX
    }, {
        min: 0,
        max: MAX,
        reversed: true,
        ...
    }],
    tooltip: {
        formatter: function(tooltip) {
            const point = this.point;

            return `<span style='color: ${this.color}'>●</span> ${this.series.name}: <b>${point.originalY}</b>. Target: <b>${point.originalTarget}</b><br/>`

        }
    },
    series: [{
        data: [{
            y: MAX - Y,
            target: MAX - TARGET,
            originalY: Y,
            originalTarget: TARGET
        }]
    }]
});

Live demo: https://jsfiddle.net/BlackLabel/ve8hosd3/

API Reference: https://api.highcharts.com/highcharts/tooltip.formatter

Upvotes: 2

Related Questions