ApexCharts card - A highly customizable graph card

[Faecon (Jo)]

I have a sensor that only can be 0 or 1.

1. how do I make y axis just 0 or 1?
2. the chart himself… how do I make it 0 or 1 and no inbetweens ?
3. Where the 0 is in the left corner, can I display state of another entity ?

      - type: custom:apexcharts-card
        graph_span: 24h
        experimental:
          color_threshold: true
          brush: true
        header:
          show: true
          show_states: true
          colorize_states: true
        apex_config:
          legend:
            show: false
          grid:
            strokeDashArray: 0
            borderColor: rgb(52,52,52)
          xaxis:
            axisBorder:
              show: false
              color: rgb(52,52,52)
            tickAmount: 1
            axisTicks:
              show: false
            labels:
              style:
                colors: rgb(128,128,128)
          yaxis:
            decimalsInFloat: 0
            labels:
              style:
                colors: rgb(128,128,128)
        all_series_config:
          type: area
          curve: straight
          stroke_width: 1
          group_by:
            func: avg
            duration: 10min
        series:
          - entity: sensor.keuken_vloerverwarming_status
            name: Vaatwas
            color: rgb(174, 236, 239) 
            float_precision: 0
            extend_to: now

[quellekatalog]

Figured out these days that setting an offset for series does not work if it exceeds a specific value:
if offset is set to -11month (or -345d), values are shown in the chart as desired (fig on the left hand side), if offset is set to -12month (or -350d or -1year), values are not shown anymore (figure on the right hand side):

                      - type: 'custom:apexcharts-card'
                        card_mod:
                          style: |
                            ha-card {
                              box-shadow: none;
                              border: none;
                            }
                        graph_span: 12month
                        update_interval: 1hour
                        header:
                          title: Pellets Monthly
                          show: true
                          show_states: true
                          colorize_states: true
                        all_series_config:
                          stroke_width: 2
                          show:
                            legend_value: false
                          float_precision: 0
                          type: column
                          unit: kg
                          opacity: 0.7
                          transform: return x * 1000;
                        yaxis:
                          - align_to: 0.1
                            decimals: 0
                            apex_config:
                              legend:
                                show: false
                              foreceNiceScale: true
                        apex_config:
                          xaxis:
                            labels:
                              format: MMM
                              hideOverlappingLabels: true
                              showDuplicates: true
                              show: true
                        stacked: true
                        span:
                          end: month
                        series:
                          - entity: sensor.pellets_daily
                            group_by:
                              func: diff
                              duration: 1month
                              start_with_last: true
                          - entity: sensor.pellets_daily
                            group_by:
                              func: diff
                              duration: 1month
                              start_with_last: true
                            invert: true
                            offset: -1year
                            show:
                              offset_in_name: false

Any ideas? Many thanks!

[ausfas]

I’m trying to display the sum or total area value

type: custom:apexcharts-card
graph_span: 24h
span:
  start: day
header:
  show: true
  show_states: true
  colorize_states: true
apex_config:
  yaxis:
    min: 0
    forceNiceScale: true
    decimalsInFloat: 0
    tickAmount: 5
series:
  - entity: sensor.solax_x1ab_solar
    type: area
    name: Solax 1 and 2 ac
    stroke_width: 2
    opacity: 0.5
    group_by:
      func: avg
      duration: 1h
  - entity: sensor.solax_x1h_solar
    type: area
    name: Solax X1h ac
    stroke_width: 2
    opacity: 0.5
    group_by:
      func: avg
      duration: 1h

Sum won’t work… I thought it would be simple thing but searched everywhere and still couldn’t find a solution. Basically running total value

[Geruser (Robert)]

Hi.
How do I ignore locale and always force

24h display and

the temperature in degrees Celsius and not in degrees Fahrenheit?

[Mrsash (Sash B)]

Hi everyone.

I had installed ApexCharts card about six months ago and never had an issue until I installed Latest Firefox. As soon as navigated to the page with the chart, the memory usage goes through the roof crashing that tab. If I access the same page in Edge it doesn’t have this problem.

I removed all but one chart which did not help in Firefox. Then I visited hacs to check if I am missing something. To my amazement ApexCharts card is no longer installed. So I go through and install it again which does not fix the issue.

Is anyone else encountered any issues with latest Firefox?

[Connor (Philip)]

Dear,

I am using an ApexChart to show our energy consumption. It is a simple timeline chart with the total power in W we use over the time, currently based on a 2 week graph_span.
To understand our energy usage better, I would like to „highlight“ the weekends in a different colour to simply see if there are some insights.
Is there any possibility to achieve this (like having the background during the weekends „paler“ or changing the colour of the line chart during days that represent weekends or whatever )?

Thank you for supporting me.
Best regards

Philip

[Connor (Philip)]

And another question - I have been able to enable the toolbar including the zoom function.
When enabling the zoom function, the idea was to see the data from the previous time. However, when using the zoom switches, the graph just zooms into or out of the middle.

So, how can I use zoom (or whatever) to see the historic data?

Thank you,
regards

Philip

[minskmail (viachaslau)]

Hi. Probably someone knows how to disable entity name here? I need just temp value. Thanks.

[jakeycrx (Jake)]

Set your view type to sidebar under the dashboard settings

[Stu1]

Im hoping someone can guide me in how to add a point (XY) annotation to the latest/ current data point on a line chart. I’ve found the reference (A guide to annotating the charts – ApexCharts.js) but unable to code the x & y to dynamically identify latest/ current series value. Here is my code & picture of what I’m trying to achieve. Thx.

type: custom:apexcharts-card
header:
  show: true
  title: Glucose - Last 24hrs
  show_states: true
  colorize_states: true
show:
  last_updated: true
apex_config:
  yaxis:
    min: 0
    max: 18
    tickAmount: 9
  annotations:
    position: back
    yaxis:
      - 'y': 4
        y2: 8
        borderColor: red
        strokeDashArray: 5
        fillColor: '#B3F7CA'
        label:
          position: left
          offsetX: 40
          offsetY: 45
          borderColor: '#333'
          style:
            fontSize: 10px
            color: '#333'
            background: '#FEB019'
          text: Range
series:
  - entity: sensor.stuart_glucose_measurement
    color: black

[BettySwallocks (Bob)]

I’ve got a time series based vertical bar chart where the final (rightmost) column in each data set is narrower than all others. I’ve tried messing with plotOptions.bar.columnWidth and chart.width but no joy. Only thing that helps is adding a stroke_width but that does skew the bar sizes and can produce overlaps. I’ve been through the Apex Charts docs and searched forums for advice, but what I can find is confusing or useless. This feels like a bug…

[Faecon (Jo)]

I want this axis only 0 or 1. how can I change that ?

[Faecon (Jo)]

Can I have a fixed y-axis ? I only want 0 or 1…

maybe to use with " stepsize" ?

[mr_aleks]

How to remove the black borders of the gray graph that represents night? And what is highlighted in red in the screenshot

type: custom:apexcharts-card
graph_span: 60h
experimental:
  brush: true
brush:
  selection_span: 2d
header:
  show: true
  title: Улица температруа
  show_states: true
  colorize_states: true
series:
  - entity: sensor.esp_temperature
    type: area
    curve: smooth
  - entity: sensor.esp_bmp280_temp
    type: area
    curve: smooth
    show:
      in_brush: true
  - entity: sun.sun
    transform: 'return x === ''below_horizon'' ? 1 : 0;'
    color: grey
    type: area
    curve: stepline
    opacity: 0.2
    stroke_width: 0
    yaxis_id: timeofday
    show:
      datalabels: false
      in_header: false
      extremas: false
apex_config:
  stroke:
    width: 1
all_series_config:
  group_by:
    func: avg
    duration: 5m
yaxis:
  - id: timeofday
    max: 0.1
    apex_config:
      labels:
        show: false
      axisBorder:
        show: false
      axisTicks:
        show: false
      tooltip:
        enabled: false

[Stu1]

To control the legend, add this code after ‘header’ section, before ‘series’:

apex_config:
  legend:
    show: false

[Routout]

ApexCharts card - A highly customizable graph card

Hello everyone, following @RomRider’s advice (see #802), I have created vertical lines for sunrise and sunset using the config-template-card. Since the chart continuously shows the last 25 hours, I have not only integrated the sunrise / sunset lines of the current day (today), but also those of the previous day (yesterday). However, the chart also includes events that lie just outside the chart span. For example, sunsets on the right-hand side that are about one hour in the future (and theref…

Nice config. How to get times in 24h display, not ampm type?

[alexbeatle]

Hello.
Please advise how to hide the values on the inside of the pie- chart?

[McG-pl (McGregorPL)]

Just for anybody still strugling with that:

1. Install card-mod supercharged module
2. use this inside the card definition:

      card_mod:
        style: | 
          div#state__value {
            font-size: 25px;
          }

[JanvdW (Jan)]

I made a graph with the Zonneplan current and next gas tariffs. As expected this results in a graph where all next gas tariffs are identical to the current gas prices, but just shown a day earlier.
I would like to show current gas prices and only the future Zonneplan gas price for tomorrow (if available). So I think that I need to

• use data_generator to add 1 day to the data for the next gas tariff.
• filter on next gas price for tomorrow and
  This should result in a column graph with the historical gas tariff (including the current price) in one color (green in my example) and the gas price for tomorrow (if available) in orange.

I tried to transform the data like this, but didn’t succeed. Anyone who knows how to realize this?

type: custom:apexcharts-card
graph_span: 4w
span:
  start: day
  offset: '-27d'
series:
  - entity: sensor.zonneplan_current_gas_tariff
    unit: €/m3
    type: column
    color: '#00a964'
    float_precision: 3
    group_by:
      func: max
      duration: 1d
  - entity: sensor.zonneplan_next_gas_tariff
    unit: €/m3
    type: line
    color: orange
    stroke_width: 2
    float_precision: 3
    group_by:
      func: last
      duration: 1d

[andypnz (Andrew Palmer)]

I am trying to create a bar graph showing a 24hr history of a binary_sensor state. That bit is working. I am also trying to display in the header the time at which the binary sensor last changed state. To do this I have created a template sensor to give the time - that works - but it only displays the hours on the chart - not hours:minutes. Any idea how to solve this?

My template sensor to give the time:

template:
  - sensor:
      - name: "Drive Alarm Last Triggered"
        state: >-
          {{ states['binary_sensor.esp_8266_drive_alarm'].last_changed | as_timestamp | timestamp_custom('%H:%M')}}

And that correctly gives the time last changed:

But only the hours are displayed in the graph header:

type: custom:apexcharts-card
header:
  show: true
  title: Driveway Sensor
  show_states: true
  colorize_states: true
graph_span: 24hr
apex_config:
  xaxis:
    labels:
      hideOverlappingLabels: false
      rotate: -90
      rotateAlways: true
      showDuplicates: true
      datetimeFormatter:
        year: ddd
        month: ddd
        day: ddd
        hour: HH:mm
series:
  - entity: binary_sensor.esp_8266_drive_alarm
    type: column
    show:
      in_chart: true
      in_header: false
      legend_value: false
      datalabels: false
    transform: 'return x === ''on'' ? 1 : 0;'
    stroke_width: 1
  - entity: sensor.drive_alarm_last_triggered
    name: Last triggered
    show:
      in_chart: false
      in_header: true
      legend_value: false