Hi!
Is it possible to align columns against X axis so the left column side is the value? Now the column is centered. Here I have a graph over energy prices.
So in above example the first column should be between 09:00 and 10:00. I don’t like the area graph, as it has it’s issues and is not so easily read as columns.
Configuration
type: custom:config-template-card
variables:
now: new Date().getTime()
tapWater: new Date(states['sensor.time_until_tap_water_heating'].state).getTime()
entities:
- sensor.sunrise
- sensor.sunset
- sensor.electricity_price_50_percentile
card:
type: custom:apexcharts-card
graph_span: 48h
span:
start: day
header:
title: Electricity Buy Price
show: true
stacked: true
all_series_config:
show:
legend_value: false
datalabels: false
extremas: true
in_brush: true
float_precision: 2
type: column
now:
show: false
label: Now
color: red
series:
- entity: sensor.nordpool_buy
name: Today
extend_to: false
opacity: 0.7
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
- entity: sensor.nordpool_buy
name: Tomorrow
opacity: 0.7
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
- entity: sensor.electricity_buy_prices_with_margin_transfer_vat_and_taxes
name: All the stuff
extend_to: false
opacity: 0.3
data_generator: |
return entity.attributes.rawData.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.rawData[index]["value"]];
});
apex_config:
chart:
height: 400px
animations:
enabled: true
easing: easeinout
speed: 800
animateGradually:
enabled: true
delay: 150
zoom:
enabled: true
type: x
autoScaleYaxis: true
zoomedArea:
fill:
color: '#90CAF9'
opacity: 0.4
stroke:
color: '#0D47A1'
opacity: 0.4
width: 1
legend:
show: false
floating: true
offsetY: 25
yaxis:
opposite: false
reversed: false
logarithmic: false
decimalsInFloat: 2
forceNiceScale: true
labels:
show: true
tooltip:
enabled: true
crosshairs:
show: true
xaxis:
labels:
show: true
rotate: -45
rotateAlways: true
logarithmic: true
stroke:
show: true
curve: stepline
lineCap: butt
colors: undefined
plotOptions:
bar:
columnWidth: 95%
candlestick:
colors:
upward: '#00B746'
downward: '#EF403C'
wick:
useFillColor: true
markers:
size: 0.5
grid:
show: true
strokeDashArray: 1
position: front
xaxis:
lines:
show: true
annotations:
position: front
xaxis:
- x: ${now}
label:
text: Now
style:
background: red
- x: ${tapWater}
label:
text: Tap Water Heating
borderWidth: 0
style:
background: red
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
label:
text: Sunrise ☉
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.solar_noon'].state).getTime()}
label:
text: Noon ☼
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset'].state).getTime()}
label:
text: Sunset ☾
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunrise'].attributes.tomorrow).getTime()}
label:
text: Sunrise ☉
borderWidth: 0
style:
background: '#0000'
- x: >-
${new
Date(states['sensor.solar_noon'].attributes.tomorrow).getTime()}
label:
text: Noon ☼
borderWidth: 0
style:
background: '#0000'
- x: ${new Date(states['sensor.sunset'].attributes.tomorrow).getTime()}
label:
text: Sunset ☾
borderWidth: 0
style:
background: '#0000'
yaxis:
- 'y': ${states['sensor.electricity_price_50_percentile'].state}
strokeDashArray: 2
borderColor: '#FFFF00'
borderWidth: 0.5
label:
borderColor: '#ADFF2F'
borderWidth: 0
borderRadius: 0
text: 50% percentile
textAnchor: center
position: left
offsetX: 0
offsetY: 2
style:
background: transparent
color: '#FFFF00'
fontSize: 10px
fontWeight: 10
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label