I like to set dynamically the value of the minPointLengh for high chart. But the below mentioned code is not working. can you please help me to get it done.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
        var minPointLength; 
                if(this.y > 0)  
                  minPointLength = 3,  
             else  
                  minPointLength = 0,
            series: {
                        minPointLength: minPointLength,
            }
        },
        series: [{
            data: [4, 0, 1, 5]
        }]
    });
});

I like to set dynamically the value of the minPointLengh for high chart. But the below mentioned code is not working. can you please help me to get it done.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
        var minPointLength; 
                if(this.y > 0)  
                  minPointLength = 3,  
             else  
                  minPointLength = 0,
            series: {
                        minPointLength: minPointLength,
            }
        },
        series: [{
            data: [4, 0, 1, 5]
        }]
    });
});

• javascript
• charts
• highcharts
• lazy-high-charts

Share Improve this question Follow edited Jun 16, 2016 at 12:26 Nirmal Srinath asked Jun 16, 2016 at 12:09 Nirmal SrinathNirmal Srinath 5166 bronze badges 1

• 1 minPointLength is a series level option, but you are trying to tell it to look at the y value of a point. There are many reasons why this won't work the way you're trying to do it. The best option that I have found for acplishing what you want here, is to change all of your zero values for null values. minPointLength will not affect null values, but it will affect 0 values. – jlbriggs Commented Jun 16, 2016 at 17:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 9

My suggestion: change any 0 values to null values.

The minPointLength will not affect any points with null y values.

Update code to:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
              minPointLength: 3
          }
        },
        series: [{
            data: [4, null, 1, 5]
        }]
    });
});

Example:

• http://jsfiddle/3d3fuhbb/155/

Additional reason that your code wouldn't work: you are trying to set the minPointLength property directly within the plotOptions object - it needs to be inside one of the series selector objects (ie 'series: {}', 'column: {}', etc).

The solution shared by @jlbriggs works fine, but it also removes data from tooltips.

I took similar approach, but instead of making them null, I simply converted 0 values to -1 and set min in yAxis as 1. And also showed 0 for values <0 in tooltip.

This is not possible. The attribute minPointLength applies to an entire series and cannot be changed for individual points.

If you want to correctly show when values are positive and when they are 0, it may be helpful to show data labels so those columns are clearly marked (see this example at: https://jsfiddle/brightmatrix/1spxcsmd/).

Also, anything you want to do dynamically within Highcharts code needs to be in functions called by either events or the formatter function. You can't insert variables or code directly into the chart options. One of the reasons your original code wasn't working was due to your code in plotOptions.

Problem with existing solutions:

1. minPointLength cannot be different for multiple bars in a series. So that won't work as I want 0 bar value to be unchanged.
   
2. I cannot change the data from 0 to null because I have a tooltip which shows data on hover so I cannot show null as data.
   

Solution:
We add extra bar height in series data and remove(subtract) that from tooltip data.

1. Create a property say extraBarHeight and push it to each data point in highchart data (ie, the one you receive in the tooltip: formatter(data){} ).
   
2. Now add this extraBarHeight in the data that you're going to set in
   buildGraph(){ series:"" }
   
3. In tooltip check your data of formatter(data){, you'll find extraBarHeight for each bar. Subtract that amount from the tooltip data (that you probably will be fetching from points property which is automatically updated according to series data)
   

Now calculating extraBarHeight is tricky.

1. Iterate through all dataPoints in series data and find the highest one, maxUnit
   

2. extraBarHeight = 10% of maxUnit (You can change percentage)
   

3. Compare each data point in series. We are doing this to avoid small units to bee larger than big units and leave the zero bars as it is.

   if(dataPoint< extraBarHeight && dataPoint !== 0) dataPoint = dataPoint + extraBarHeight;

It is a long and plicated solution but this is the only possible way at least for now.

You cannot use code inside object.
Try to do this:

var minPointLength;  

    if(this.y > 0)  
                  minPointLength = 3,  
             else  
                  minPointLength = 0,  
        };

    series: {
                minPointLength : minPointLength
        }