I’m afraid that is not a feature of ApexCharts. 
You could try with https://apexcharts.com/docs/options/tooltip/ --> followCursor: true to see if it works better for you
2 Likes
I would like to create a graph from the octopusagile.rates entity created by https://github.com/markgdev/home-assistant_OctopusAgile#octopusagilerates as shown in the screen shot. The entity has a a series of attributes consisting of time stamp and values.
The data_generator option https://github.com/RomRider/apexcharts-card#data_generator-option requires a [timestamp, value][] return type, but I can’t figure out the JavaScript to convert these attributes into this return type.
That’s an awesome piece of work. I have couple of flex-horseshoe-card on my dashboard which was not updated in the last 3 months and I’d like to change them to apexcharts-card.
The problem is that my existing cards are showing the current power consumption in Watts (not %) and they have gradient colors (green-yellow-red).
Is it possible to achieve the same visual result with apexchart-card? I’ve tried several times but I’ve failed every time. Thank you.
I am trying to define some apexcharts_card_templates in ui-lovelace.yaml. However, this does not seem to be working and keeps giving me an error when I use a template. What am I doing wrong?
apexcharts_card_templates:
2d_stepline_chart:
apex_config:
chart:
height: 200px
all_series_config:
extend_to_end: false
stroke_width: 2
curve: stepline
show:
legend_value: false
graph_span: 2d
- type: custom:apexcharts-card
config_templates: 2d_stepline_chart
y_axis_precision: 0
series:
- entity: sensor.wind_speed_kilometre
- entity: sensor.gust_speed_kilometre
This is the error I keep getting.
/// apexcharts-card version 1.6.0 /// value.config_templates is not an array
type: 'custom:apexcharts-card'
config_templates: 2d_stepline_chart
y_axis_precision: 0
series:
- entity: sensor.wind_speed_kilometre
- entity: sensor.gust_speed_kilometre
Try something like:
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
res.push([new Date(key).getTime(), value]);
}
return res.sort((a, b) => { return a[0] - b[0] })
Not so far, see here
That’s a bug on my part. In the meantime to make it work you can transform it into an array:
# convert
config_templates: 2d_stepline_chart
#to
config_templates:
- 2d_stepline_chart
Do you mind opening a bug on github so that I don’t forget please?
2 Likes
Thankyou very much - that worked first time. I have now included two entities, one to show the current price sensor history, the other to show the upcoming rates as can be seen in the screen shots.
One question about the card header. The “Next Rate” value shows 10.4 which is the value of the last known value in the future ie. 16 Feb 2021 at 22:30. Ideally I’d like it to show 29.6 which is the value 15 Feb 2021 at 17:00. Not sure if this is a bug or I need to work around it.
Card configuration
type: 'custom:apexcharts-card'
header:
show: true
show_states: true
colorize_states: true
title: Octopus Agile rates
span:
start: day
graph_span: 48hours
all_series_config:
stroke_width: 2
type: area
extend_to_end: false
curve: stepline
experimental:
color_threshold: true
now:
show: true
label: now
color: orange
color_list:
- orange
- grey
y_axis_precision: 0
series:
- entity: sensor.octopus_agile_current_rate
name: Current rate
group_by:
func: max
duration: 30min
- entity: octopusagile.rates
name: Next Rate
unit: p/kWh
data_generator: |
let res = [];
for (const [key, value] of Object.entries(entity.attributes)) {
res.push([new Date(key).getTime(), value]);
}
return res.sort((a, b) => { return a[0] - b[0] });
apex_config:
legend:
show: false
grid:
borderColor: '#7B7B7B'
chart:
foreColor: '#7B7B7B'
zoom:
type: x
enabled: true
autoScaleYaxis: true
toolbar:
show: true
autoSelected: zoom
tools:
zoom: true
zoomin: false
zoomout: false
pan: false
reset: true
1 Like
The header always shows the last data from the chart and if I understand correctly, you’d want to display the first one for the data in the future. I guess I could offer that option 
.
Please open a feature request and I’ll look into it.
Love the idea of showing extremas that you are working on
Any plans to, similar to mini graph card, have a setting for “points per hour”?
Also, is there a way to control the width of each column?
Points per hour is the equivalent of group_by with a duration and a func (if you want the same as mini-graph-card, it’s avg) .
Column width is determined by the number of data you want to display. Use group_by and it will increase the colum width.
1 Like
@RomRider I am still LOVING this card!
Is there a way to combine multiple entities into one legend, but still have it display all entities separately on the graph?
i.e.: I have 5 thermometers. I’d like to have them all grouped into one legend marker for ease of hiding all at once in one click, but still see all 5 lines on the graph.
Been looking thru the git and apex docs but can’t for the life of me find a way to do it within the card.
That is not possible unfortunately. And there’s no such option in ApexCharts to make it happen.
Attempting to use the template feature, but I just can’t make it work. Likely missing something obvious…? (No issues with my button card templates which follow the same syntax.)
I also tried pasting the example config defining just colors, but got the same error.
Example with simplified card just to see if it take effect. No matter what I do I get the same error.
apexcharts_card_templates:
test:
header:
show: false
This is fixed in the upcoming version which is 2min away from being released 
New Release
1.7.0 (2021-02-16)
Highlights
-
Show extremas on your chart with (doesn’t work yet with multi-y axis):series: - entity: sensor.temperature show: extremas: true
-
Language support with automatic detection -
Deprecate hours_12in favor of automatic detection using HA’s configured language or what is set in thelocaleconfig option.
Features
- datalabels: Option to display total when chart is stacked (#75) (e1c5b01), closes #73
-
experimental: Header color can now follow
color_threshold(#88) (074bfc3), closes #78 -
locale: Inherit locale from Home-Assistant, deprecate
hours_12(#70) (af2d201), closes #68 - series.show: Display your serie’s extremas on the chart (#85) (f64169a)
- series.show: Option to show the raw data in the header (#76) (87b56f5), closes #69
-
transform: Provide the full state as
entityto the function (#77) (9919c10), closes #71
Bug Fixes
- config_templates: Was supposed to support a string (f36d9b1), closes #87
- color with alpha would render area opaque (100b6d4)
- Support for
rgbacolors (7ecfafd) - truncate floats in total datalabels (917a20a), closes #73
- Wrong labels in tooltip in some cases (8f0aca1)
Documentation
2 Likes
Curious if there is a way to use variables as the template code was copied from button card…? Example use case: I have a lot of almost identical min/max/average/current single entity charts with a fair amount of config per series. Would be nice to template it using a variable or some other means entering the entity_id only once. Perhaps there is a obvious solution I’m just not seeing…?
Well, there’s the all_series_config but I disabled entity from there, I could allow it and it would match your use case I think.
I won’t support variables, as I do not plan to support javascript like in button card.
Would it be possible to have a fill that goes to and from another entity like in the middle graph here?
apexcharts-card/color_threshold.png at master · RomRider/apexcharts-card (github.com)
The use case would be to display the set point of a thermostat with the actual temperature as fluctuations around the set point.
Is it possible to use a secondary y-axis at present? I think the release notes for 1.7.0 mentioned something about extrema not being compatible with a secondary y-axis but I have not found any examples of multiple axis…
Hmm… the latest version seems to screw something with column chart… partially. I’m trying to show weather forecast for my location with min/max temperature as area chart and snow/rain as bars. It was working quite well until today morning I updated chart. Here is how it supposed to look (almost, white area should be column, as cyanish one - to show my intention I had to change graph type from column to area):
When I cahnge both snow and and rain to column, graph does not complete drawing:
Here is the code I use:
type: 'custom:apexcharts-card'
show:
loading: false
apex_config:
chart:
height: 350
fill:
type: gradient
gradient:
type: vertical
fill: dark
shadeIntensity: 0
stops:
- 20
- 100
opacityFrom:
- 0.1
- 0.1
- 1
opacityTo:
- 0.6
- 0.6
- 0.3
plotOptions:
bar:
columnWidth: 50%
yaxis:
- show: true
title: Temp
min: -20
max: 30
- show: false
title: Temp
min: -20
max: 30
- show: true
title: Snow
min: 0
max: 40
opposite: true
- show: false
min: 0
max: 40
graph_span: 6d
span:
start: day
header:
show: true
title: Weather Forecast
series:
- entity: weather.weatherbit_zielonka
type: area
fill_raw: last
extend_to_end: false
color: var(--yellowish)
name: Max
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
- entity: weather.weatherbit_zielonka
type: area
fill_raw: last
extend_to_end: false
color: var(--cyanish)
name: Min
stroke_width: 2
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.templow];
});
- entity: weather.weatherbit_zielonka
type: column
fill_raw: last
extend_to_end: false
color: white
name: Snow
stroke_width: 0
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.snow];
});
- entity: weather.weatherbit_zielonka
type: column
fill_raw: last
extend_to_end: false
color: var(--cyanish)
name: Rain
stroke_width: 0
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.precipitation];
});
BTW. Is there any way to ‘group’ charts per axis and retain dynamic scaling? In my example I had to define same ranges for min/max temperatures to keep it proportional, but this removes scaling. Keeping it fully dynamic per serie causes that it could display lower temp as being higher that max one
3 Likes
Any error in the javascript console? Did you skip the 1.6.0 version?
I didn’t find any way to make this work so far 