how to dynamically set the minPointLength except 0

2k Views Asked by At

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]
        }]
    });
});
5

There are 5 best solutions below

0
On

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.

3
On

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

var minPointLength;  

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

    series: {
                minPointLength : minPointLength
        }
0
On

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.net/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.

0
On

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:

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).

1
On

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 become 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 complicated solution but this is the only possible way at least for now.