I have an example using mapael where I set the fill color based on values from a table of state data. when the min/max are between 6 and 8 it works and when the values are between 400 and 500 it works but when they are between 5000 and 6000 all states are filled in black although The data does include values between those ranges.
$(".mapcontainer").mapael({
map: {
name: "usa_states",
defaultArea: {
attrs: {
stroke: "#fff",
"stroke-width": 1
}
}
},
legend: {
area: {
title: "Frequency by state",
slices: [
{
max: valA,
attrs: {
fill: "#97e766"
},
label: "LTE " + valA
},
{
min: valA,
max: valB,
attrs: {
fill: "#008080"
},
label: "Between " + valA + " and " + valB
},
{
min: valB,
attrs: {
fill: "#DC143C"
},
label: "GTE " + valB
}
]
}
},
areas: data
});
I can't figure out why the color doesn't change with the larger values. The label for the legend does show the correct value when hovering over the state.
I asked this question and I now see that I did not give enough info to answer it. It turns out that the data values over 999 contained a comma preventing the comparison to the min/max values to fail. After cleaning up the numbers it works fine. My apologies to those who spent time on this.