Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts Bar Chart - How to set the minimum bar width/length

We're having issues throughout our application with bars not rendering if a particular value is very small relative to the largest value. The following jsFiddle illustrates the issue:

http://jsfiddle.net/yahsukram/dQHQf/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },
        xAxis: {
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        yAxis: {
            min: -50000,
            max: 5000000,
            title: {
                text: null
            }
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            categories: ['John', 'Jane', 'Bob', 'Bill', 'Jesus'],
            data: [5000000, 20000, 200, -50000, -10000]
        }]
    });
});

Note that the bars for 200 and -10000 do not render at all. Is there a way to set the minimum width to 2 or 3 pixels? I've tried several things and searched around but haven't found anything that really gets around the issue. We have quite a few different charts that exhibit this behavior and the upper/lower values can change drastically depending on what type of data we're fetching.

Increasing the width of the container is not an option as we're rending many charts in column format which gives us limited real estate.

Any help is greatly appreciated.

like image 325
Markus Hay Avatar asked Apr 02 '13 20:04

Markus Hay


People also ask

How do you adjust the width of a bar chart?

Click on any bar in the Bar Chart and right click on it, then select Format Data Series from the right-clicking menu. See screenshot: 2. In the popping up Format Data Series pane, move the Zoom bar of the Gap Width to the left side until the bar width meets your needs under the Series Options section.

How do I reduce the space between bars in Highcharts?

Re: How to adjust the margins between bars We need to set groupPadding and pointPadding properties to 0, then there will be almost no space between bars.

How do I change the width and height of a Highchart?

Height and width is set either by setting a height and width of the container div, or by setting the chart. height and chart. width Highcharts options.


1 Answers

I think the option you want is minPointLength:

plotOptions: {
            bar: {
                minPointLength:5,
                dataLabels: {
                    enabled: true
                }
            }
like image 88
SteveP Avatar answered Sep 23 '22 02:09

SteveP