I was using a line and a column - how can I change the width of the bars? I followed vdrainers post for the line width but the bars are too wide particularly on a mobile device…
You could try with:
apex_config:
plotOptions:
bar:
columnWidth: '70%' # 70% is the default value
3 Likes
Thanks. I did look in the apex docs but they are not that easy to navigate.
No they are not, but it still provides great insights. You’ll learn where to look while using it more 
1 Like
I got it working and even zooming works! That is what I always found lacking in Home Assistant lovelace graphs. The only thing I don’t know is how to zoom out. I think the ‘toolBar’ option (https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/) is not working yet?
toolbar works, it’s here:
apex_config:
chart:
toolbar:
show: true
1 Like
Ok, really great, going to test now!
- type: custom:apexcharts-card
graph_span: 24h
header:
show: true
title: Media Management
apex_config:
stroke:
width: 3
curve: smooth
chart:
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
series:
Doesn’t show any tools… did I miss something?
This works for me:
type: 'custom:apexcharts-card'
apex_config:
chart:
height: 450
zoom:
type: x
enabled: true
autoScaleYaxis: false
toolbar:
show: true
autoSelected: zoom
xaxis.type: datetime
1 Like
Really nice card! I’m about to replace some of my mini-graph-card’s but because of a lot of datapoints, it’s a bit slow. Is there an equivalent of points_per_hour (mini-graph-card) on this card? Thanks!
Yes, you can use group_by in each series to reduce the nb of datapoints. It will aggregate the data the same way mini-graph-card does.
Check the doc on github, it explains how it works
1 Like
Can you tell me what I did wrong with the chart zoom/pan options above?
You are missing the zoom part:
apex_config:
stroke:
width: 3
curve: smooth
chart:
zoom:
enabled: true
toolbar:
show: true
tools:
zoom: true
zoomin: true
zoomout: true
pan: true
reset: true
1 Like
New Release
1.2.0 (2021-01-28)
Features
- Define your own float precision for legend, tooltip and Y axis (7b0f30f)
- cache: Invalidate cache on every new card version (#12) (b1799d9)
- data_generator: Build your own data based on the last state and attributes of your entity (#14) (18284b5), closes #6
- invert: Negates/Inverts the data for a serie (#13) (ab793c5)
-
span: Add
endas an option to end the graph at the end of the day, minute, etc… (#11) (1d0aca8) - span: Display the graph from the start of the hour, day, month,… with an offset or not (#10) (bb6e88c)
Bug Fixes
-
xasis: Better handling of graph end time if everything is
columnandgroup_byis enabled (b5b85a6) - yaxis: apex_config.yaxis was not taken into account properly (ce04230)
- Sometimes the graph was empty when changing tabs (9232044)
- legend: undefined was displayed for a hidden serie (352c016)
- Get rid of the initial load delay (69f151b)
- colorize_states: Parameter was not applied (28bb2e2)
- datalabels: Truncate floats to 1 digit after the decimal point (f5f744f)
3 Likes
Thanks again for the data_generator. I just played with it a bit, but am having a bit of trouble getting to the data I’d like to map. The data state attributes of my weather.openweathermap entity):
temperature: 5.8
humidity: 98
pressure: 1016
wind_bearing: 254
wind_speed: 1.62
attribution: Data provided by OpenWeatherMap
forecast:
- datetime: '2021-01-28T11:00:00+00:00'
precipitation: 21
wind_speed: 7.75
wind_bearing: 207
condition: rainy
temperature: 7.4
templow: 3.6
- datetime: '2021-01-29T11:00:00+00:00'
precipitation: 28
wind_speed: 6.53
wind_bearing: 221
condition: rainy
temperature: 7.4
templow: 4.7
- datetime: '2021-01-30T11:00:00+00:00'
precipitation: 28
wind_speed: 3.18
wind_bearing: 227
condition: rainy
temperature: 5.2
templow: 2.6
- datetime: '2021-01-31T11:00:00+00:00'
precipitation: 3
wind_speed: 1.5
wind_bearing: 245
condition: rainy
temperature: 5.4
templow: 2.4
- datetime: '2021-02-01T11:00:00+00:00'
precipitation: 29
wind_speed: 6.2
wind_bearing: 213
condition: rainy
temperature: 5.8
templow: 3.7
- datetime: '2021-02-02T11:00:00+00:00'
precipitation: 4
wind_speed: 3.71
wind_bearing: 211
condition: rainy
temperature: 8.4
templow: 5.3
- datetime: '2021-02-03T11:00:00+00:00'
precipitation: null
wind_speed: 6.01
wind_bearing: 231
condition: cloudy
temperature: 10.9
templow: 6.4
- datetime: '2021-02-04T11:00:00+00:00'
precipitation: 7
wind_speed: 1.74
wind_bearing: 229
condition: rainy
temperature: 8.1
templow: 4.2
friendly_name: OpenWeatherMap
My card config:
- type: 'custom:apexcharts-card'
graph_span: 8d
span:
start: hour
series:
- entity: weather.openweathermap
data_generator: |
return.entity.attributes.datetime.map((time, index) => {
return [new Date(time), entity.attributes.precipitation[index]];
});
This however, returns no data (showing loading on the graph). I suppose it has to do with the fact that datetime and precipitation are not attributes of the weather entity, but are contained in the forecast attribute. Haven’t found a way to get past this yet.
On another note: I tried to use a style attribute on the card (make it wider on my picture-elements card) but get an error value.style is extraneous. The config I tried:
- type: 'custom:apexcharts-card'
graph_span: 8d
span:
start: hour
series:
- entity: weather.openweathermap
data_generator: |
return.entity.attributes.datetime.map((time, index) => {
return [new Date(time), entity.attributes.precipitation[index]];
});
style:
left: 50%
top: 65%
width: 90%
Thy with this:
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
I’ll fix that, good catch 
Would you mind opening an issue on github please?
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
This didn’t work, I’m afraid.
Going on Github now for the issue with style.
With this exact code:
- type: custom:apexcharts-card
graph_span: 8d
span:
start: hour
apex_config:
dataLabels:
enabled: true
header:
show: true
title: Precipitation Forecast
series:
- entity: weather.home
type: column
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.precipitation];
});
I get the result you expect:
Edit: Also make sure you are running the last version (and that it is not cached by your browser). Check the console. If you don’t see 1.2.0, clear your cache
4 Likes
Ugh! I didn’t see that in the docs. Thanks.
Latest version and cache have been ruled out, however, still not seeing the bars on my graph. I did find the following error in the console, though:
apexcharts-card.js:1 Error: <svg> attribute height: Expected length, "NaN".
I’m guessing that he doesn’t recognize the precipitation value as a number?