set minimum height to bars in highcharts react when the delta between the data is too much

Question

im using high charts react when the delta between the data is too much lets say data: [100000, 2000, 50000, 3] then the smallest bars are not visible so im, setting the min point length and i only want to give it to those bars that dont have 0 as a value, as the min height should NOT get applied to the bars that have 0 as their value

NOTE- >

• I want to even plot the 0 values on the graph, just that they should not get affected by the minimum height /min point length

• I dont want to modify the scale and set it to logarithmic, it has to be linear only

• the correct syntax for setting minpointLength is inside the plot options object but that gets set globally, hence affecting even bars with a 0 value, i tried setting it individually but that did not take effect

correct synatx of setting min point lenght as per their docs plotOptions: { column: { borderRadius: 6, minPointLength: 0, } }, but this thing affects the entire object and even applied it to bars with a value of 0

so i tried setting it individually but this didnt work const finalChartDataWithColor = dataArrayForChartExtreacted.slice(0, 50).map((value, index) => ({ y: value, color: decideColorBasedOnValue(value, index), minPointLength: value > 0 ? 60 : 0 // Apply minPointLength only for non-zero values }));

chart config code ->

  const colorsArrray = ['#968FC0', '#B4CDB4', '#F0E3B9', '#BBCEEB', '#F2B1AB', '#DED7CA', '#E8BD7C', '#99AA98', '#B99A97', '#B7D9D9']

        const decideColorBasedOnValue = (value, index) => value < 0 ? '#B22222' : colorsArrray[index % colorsArrray.length];

        const finalChartDataWithColor = dataArrayForChartExtreacted.slice(0, 50).map((value, index) => ({
            y: value,
            color: decideColorBasedOnValue(value, index),
            minPointLength: value > 0 ? 60 : 0 // Apply minPointLength only for non-zero values
        }));

        const options = {
            chart: {
                type: "column",
                height: 351
            },
            title: {
                text: "",
            },
            xAxis: {
                categories: labelsArrayForChartExtreacted,
                title: {
                    text: xAndYLabelForChartExtracted[0],
                    style: {
                        fontSize: '12px'
                    }
                },
                gridLineColor: '#696969',
            },
            yAxis: {
                title: {
                    text: xAndYLabelForChartExtracted[1],
                    style: {
                        fontSize: '12px'
                    }
                },
                gridLineColor: '#696969',
                gridLineWidth: "0.32"
            },
            legend: {
                enabled: false,
            },
            series: [{
                name: "",
                // color: '#3165b4',
                negativeColor: '#B22222',
                data: finalChartDataWithColor,
                // data: [100000, 2000, 50000, 3]
            }],
            plotOptions: {
                column: {
                    borderRadius: 6,
                    // minPointLength: 0, -> this thing affects the entire chart, gl;obally andf even applies it to bars with 0 values
                }
            },
        };

        setOptionsForChartState(options);

Answer 1

The minPointLength option is not applied to null points, so the simplest way is to convert zero values to nulls. For example:

const finalChartDataWithColor = dataArrayForChartExtreacted.map((value, index) => ({
  y: value || null,
  color: decideColorBasedOnValue(value, index)
}));

---

Live demo: https://jsfiddle.net/BlackLabel/23qye50j/

API Reference: https://api.highcharts.com/highcharts/series.column.data