chartshighchartsreact-highcharts

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


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

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



Solution

  • 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