CODEWITHSUNDEEP
javascripthighchartsbar-chart
user1579557
user1579557

Reputation: 393

Hightlight a Bar in HighCharts Bar chart

How can I make a bar standout in a bar chart made in Highchart.js ?

Suppose I have a bar chart of success , fails , warnings (all in one array), and success score is too high , it dwarfs the error bar and is not easily visual. I want to make 'error bar' standout if value > 0.

              RenderBarChart('service_stats'+x, [
                                            {y:1000, color: 'green', url:'http://www.google.com'},
                                            {y:5, color: 'red', url:'http://www.googl22e.com'},
                                            {y:6, color: 'orange', url:'http://www.googl22e.com'},
                                            {y:7, color: 'yello', url:'http://www.googl22e.com'},
                                            ], 'servidsace_stats');


    function RenderBarChart(elementId, dataList, name) {
            new Highcharts.Chart({

                      chart: {
                          renderTo: elementId,
                          plotBackgroundColor: null,
                          plotBorderWidth: null,
                          plotShadow: true
                      },


        title: {
            text: 'Host Statistics'
        },
        subtitle: {
            text: 'Cluster: Appservers'
        },
        xAxis: {
            categories: ['OK', 'CRITICAL', 'WARNING', 'UNKNOWN'],
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: null,
            },
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: 100,
            y: 100,
            floating: false,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: false
        },
        credits: {
            enabled: false
        },
        series:[{
                        type: 'bar',
                        name: name,
                        data: dataList,
                        cursor: 'pointer',
                         point: {
                                events: {
                                click: function() {
                                location.href = this.options.url;
                    }
                }
            }
                     }]
                 }

Increasing the width of error bar does not help. Scaling the height might help but couldn't do it.

Upvotes: 0

Views: 1445

Answers (1)

jlbriggs
jlbriggs

Reputation: 17791

There are a number of things you can do.

Here is one example fiddle, using a couple of different techniques to highlight the bar:

http://jsfiddle.net/jlbriggs/78LHt/

1) you can specify colors in the data point object. You'll need to pre-process your data to build the appropriate data point depending on the specifics

2) you can add data labels to points you need to highlight

However - I would strongly caution that this type of display is essentially useless for this purpose. Unless you have serious problems going on, as you've seen, the comparison is not remotely helpful, and in fact obscures exactly the one piece of information that you need to be aware of.

This is one of the cases where a simple table with numbers listed will be far more effective at displaying the type of data that you need.

something simple and clear. exampe:

To bring charts back into, a sparkline of the status history would be useful:

Upvotes: 2

Related Questions