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