type: custom:apexcharts-card
apex_config:
chart:
height: 150
type: bar
xaxis:
type: category
labels:
rotate: -45
formatter: EVAL:function(value) { return value.split(':')[0] + 'h'; }
yaxis:
- min: 0
max: ~12
labels:
formatter: EVAL:function(val, opts) { return val.toFixed(0); }
dataLabels:
enabled: true
plotOptions:
bar:
columnWidth: 50%
header:
show: true
show_states: false
series:
- entity: sensor.uv_forecast_data
name: UV Index
type: column
data_generator: |
try {
const data = JSON.parse(entity.state);
return data.map(item => {
let color = '#558B2F';
let yValue = item.y;
if (yValue <= 0) {
yValue = 0.5;
} else {
if (yValue <= 2) color = '#558B2F';
else if (yValue <= 5) color = '#F9A825';
else if (yValue <= 7) color = '#EF6C00';
else if (yValue <= 10) color = '#B71C1C';
else color = '#6A1B9A';
}
return {
x: item.x,
y: yValue,
fillColor: color
};
});
} catch (e) {
return [];
}