I am using an Apex Chart heatmap.
My issue is the value range I am passing in for my series data is around 0.01 – 300.
This means that values of around 0.01 – 5 are practically invisible in the chart because they are so light and the only way I know they are there is if I hover over them and the tooltip tells me.
I am my chart options are –
var options = {
series: data,
chart: {
height: 650,
type: 'heatmap',
},
dataLabels: {
enabled: false
},
colors: ["#008FFB"],
title: {
text: 'HeatMap Chart (Single color)'
},
}
I got somewhere when I added –
plotOptions: {
heatmap: {
enableShades: true,
shadeIntensity: 1,
reverseNegativeShade: true,
colorScale: {
ranges: [
{
from: 0.001,
to: 5,
color: '#008FFB'
}
]
}
}
}
This at least meant that if a value was under 1, it showed up on the chart in a visible shade, however this offset the entire heat map because in some case values of 5 were darker than values of 6 because of the range difference.
How can I set the initial shade on load (for the one range of whatever my lowest and highest values are) to make sure that boxes are dark enough to see?