ApexCharts card - A highly customizable graph card

Just looking at the code and image that you posted.

Definitely an issue with your post.

No need to alterate the generator, just change graph span:

card:
  type: custom:apexcharts-card
  graph_span: 24h
  span:
    start: day
    offset: +0H

Best, JR

Correct, but the reason I would need to change the generator is that I need extrema on a per-day basis. Do achieve this, I would split the data-generator in 2 series

series:
  - entity: sensor.epex_spot_be_price
    show:
      extremas: true
    data_generator: >
      return only today
  - entity: sensor.epex_spot_be_price
    show:
      extremas: true
    data_generator: >
      return only tomorrow 

That is why I have 2 cards, for tomorrow it is conditional card showing only when tomorrow prices are available :slight_smile: And using Nordpool integration I have anyway different tags (today/tomorrow) in attributes…
Best, JR

Done:

type: custom:apexcharts-card
header:
  show: false
graph_span: 48h
span:
  start: day
now:
  show: true
  label: Now
color_list:
  - var(--primary-color)
series:
  - entity: sensor.epex_spot_be_price
    yaxis_id: uurprijs
    float_precision: 2
    type: line
    curve: stepline
    extend_to: false
    show:
      extremas: true
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), ((0.2040 + 0.1 *
      entry.price_eur_per_mwh) * 1.06 / 100 ) + (2.241 + 4.98204 + 0.20417 +
      4.513) / 100]; }).slice(0,24); 
    color_threshold:
      - value: 0
        color: '#186ddc'
      - value: 0.155
        color: '#04822e'
      - value: 0.2
        color: '#12A141'
      - value: 0.25
        color: '#79B92C'
      - value: 0.3
        color: '#C4D81D'
      - value: 0.35
        color: '#F3DC0C'
      - value: 0.4
        color: red
      - value: 0.5
        color: magenta
  - entity: sensor.epex_spot_be_price
    yaxis_id: uurprijs
    float_precision: 2
    type: line
    curve: stepline
    extend_to: end
    show:
      extremas: true
    data_generator: >
      return entity.attributes.data.map((entry, index) => { return [new
      Date(entry.start_time).getTime(), ((0.2040 + 0.1 *
      entry.price_eur_per_mwh) * 1.06 / 100 ) + (2.241 + 4.98204 + 0.20417 +
      4.513) / 100]; }).slice(23,47); 
    color_threshold:
      - value: 0
        color: '#186ddc'
      - value: 0.155
        color: '#04822e'
      - value: 0.2
        color: '#12A141'
      - value: 0.25
        color: '#79B92C'
      - value: 0.3
        color: '#C4D81D'
      - value: 0.35
        color: '#F3DC0C'
      - value: 0.4
        color: red
      - value: 0.5
        color: magenta
experimental:
  color_threshold: true
yaxis:
  - id: uurprijs
    min: 0.1
    max: 0.5
    decimals: 2
    apex_config:
      title:
        text: €/kWh
      tickAmount: 4
apex_config:
  legend:
    show: false
  tooltip:
    x:
      show: true
      format: HH:00 - HH:59

image

Haha point taken.

I am trying to make a stacked barchart where the left side images stack on tope of each other. But if you look when I enable both they seem to be in front/behind each other instead. Below is my image an code. I’m curious if anyone else has seen this behavior or if something in my config is causing it?

- type: "custom:apexcharts-card"
                    yaxis:
                      - id: a
                      - id: b
                        opposite: true
                    stacked: true
                    header:
                      title: Downstairs HVAC
                      show: true
                      show_states: false
                    series:
                      - entity: sensor.yearly_downstairs_ac
                        yaxis_id: a
                        color: LightSkyBlue
                        data_generator: |
                          let res = [];
                          for (const [key, value] of Object.entries(entity.attributes)) {
                              let d = new Date(key).getTime();
                              if (d > 0)
                                  res.push([d, value]);
                          }
                          return res.sort((a, b) => { return a[0] - b[0] });
                        type: column
                      - entity: sensor.yearly_downstairs_heat
                        yaxis_id: a
                        color: LightCoral
                        data_generator: |
                          let res = [];
                          for (const [key, value] of Object.entries(entity.attributes)) {
                              let d = new Date(key).getTime();
                              if (d > 0)
                                  res.push([d, value]);
                          }
                          return res.sort((a, b) => { return a[0] - b[0] });
                        type: column
                      - entity: sensor.yearly_temps
                        yaxis_id: b
                        color: LightGray
                        data_generator: |
                          let res = [];
                          for (const [key, value] of Object.entries(entity.attributes)) {
                              let d = new Date(key).getTime();
                              if (d > 0)
                                  res.push([d, value]);
                          }
                          return res.sort((a, b) => { return a[0] - b[0] });
                        type: line
                    graph_span: 30days
                    apex_config:
                      bar:
                        columnwidth: 100%
                    all_series_config:
                      stroke_width: 2

Hi,
this might be a bit silly of a question,
but is it possible to make a chart that just shows a horizontal percentage bar?

a bit like the custom bar chart addon (but that hasn’t been updated for 3 years)

PS: thou even if the bar-card is not “maintained” it still works well, and there is an active Topic for the card.

There is an issue raised.
Stacked not working as expected with multiple axis #166
I suggest you read the issue in full and experiment.

Thanks, that is unfortunate, sounds like it can’t really be fixed. I may try the plotly card, but I think this one looks a bit more visually polished from the get go.

Never give up until you have exhausted all avenues.

47 years as a programmer, tester and trouble shooter, I eventually resolve a problem.

2_yaxis_stacked_example

Here are some code snippets of a test I created using stacked with 2 yaxis.

  yaxis:
    - id: dummy
      min: 0
      max: 50
      show: true
      apex_config:
        forceNiceScale: 'yes'
        labels:
          show: true
    - id: dummy1
      opposite: true
      min: 0
      max: 30
      show: true
      apex_config:
        forceNiceScale: 'yes'
        labels:
          show: true

  series:
    - entity: sensor.meter_plus_6469_temperature
      type: column
      yaxis_id: dummy
    - entity: sensor.meter_plus_2e7b_temperature
      type: column
      yaxis_id: dummy
    - entity: sensor.meter_plus_2e7b_temperature
      type: line
      yaxis_id: dummy1

Ensure you have referenced the yaxis id’s correctly for all your series.
Ensure that your 2 column series have the same unit of measurement within HA.

If it still does not work after this, the only difference is that you are using the data generator option.

2 Likes

Hello, is there a way to make only one of the series solid and the other stroke?
Also, I need to make the outer radial bar’s track gradiently transparent.

Here is what I want to achieve:
1111

This is what it looks like right now:
2222

Yaml:

  - type: vertical-stack
    view_layout:
      grid-area: col3
    cards:
      - type: custom:apexcharts-card
        style: |
          ha-card {
            padding-top: 4em;
            background: transparent;
          }
        chart_type: radialBar
        series:
        - entity: sensor.solaredge_current_power
          name: Production
          color: '#FF9500'
        - entity: sensor.solaredge_current_power
          name: Consumption
          color: '#FF9500'
        header:
          show: false
          show_states: false
          floating: true
          title: Power
          colorize_states: true
        apex_config:
          chart:
            height: 450px
            width: 400px
          legend:
            onItemHover:
              highlightDataSeries: false
            show: false
          plotOptions:
            radialBar:
              startAngle: -180 #-20
              endAngle: 180 #-30
              dataLabels:
                name:
                  show: true
                  offsetY: 55
                value:
                  show: true
                  offsetY: 5
                  fontSize: 50px
                  fontWeight: 200
                  color: '#FFFFFF'
                total:
                  show: true
                  fontSize: 21px
                  fontWeight: 500
                  label: Solar
                  color: '#545454'
                  formatter: |
                    EVAL:(w) => {
                      return w.globals.seriesTotals + ' kWh';
                    }
              hollow:
                size: 65%
                image: undefined
                imageOffsetX: 0
                imageOffsetY: 0
                position: front
                dropShadow:
                  enabled: true
                  blur: 10
                  opacity: 0.24
              track:
                show: true
                background: rgba(60, 60, 60, 0.8)
                strokeWidth: 150%
                dropShadow:
                  enabled: true
                  blur: 10
                  opacity: 0.35
        # fill:
            type: gradient
            gradient:
              shade: dark
              type: horizontal
              shadeIntensity: 0.5
              gradientToColors: '#ABE5A1'
              inverseColors: false
              opacityFrom: 1
              opacityTo: 1
              stops:
                - 0
                - 100
          stroke:
            dashArray: 4
            lineCap: flat

dashArray: Number || Array of Numbers

Try this.

dashArray:
  -  number
  -  number

1st number = 1st series, etc.

For the outer radial bar’s track gradiently transparent question.

Again, an Array applies.

fill: {
  type: ['solid', 'gradient']
}

Recheck the APC documentation again :slightly_smiling_face:

1 Like
fill: {
  type: ['solid', 'gradient']
}

This worked but differentiating two dashArray didn’t (gave me an error) so I just manipulated the path’s CSS like this:

      - type: custom:apexcharts-card
        style: |
          #SvgjsPath1134 {
            stroke-dasharray: 4 !important;
          }

Result:
lol

1 Like

Stills truggeling on how to get a a marker on hte very last datapoint. Need to find the last dataPointIndex to replace the “62” in my code below. No one that has run into the same problem before?

  apex_config:
    markers:
      size: 0
      colors: '#0000ff'
      discrete:
        - seriesIndex: 0
          dataPointIndex: 62
          fillColor: orange
          strokeColor: '#ffffff'
          size: 5

1 Like

Have you tried doing a browser search ?

Try this including the double quotes.

"apexcharts display marker only on the very last datapoint"

You will find the answer that you are NOT looking for, if you catch my drift.

Then you can move on to your next project !! :slightly_smiling_face:

Not sure what you are trying to say? I have googled like crazy and haven’t found a native way but adding the dataPointIndexes in an array and picking the highest one should be doable, that’s why i asked if anyone had a tried something clever.

But I’ll look into something other impossible to focus on, I have quite a list of cool (and impossible) things to spend time on :slight_smile:

Hi

is it possible to control the order of drawing of the series?

I have an area and column chart on one plot with two axes and would like the columns to be behind. Whatever order I define the series, the columns are always on top.

I believe the same goes for “line” series, they are also on top of “area” … for very obvious reasons

EDIT: fixed… I feel dumb

              startAngle: -20
              endAngle: 310

Uh… why are startAngle and endAngle affecting the max value of the series?

I want the radialBar to show 0% (0 kWh) to start at startAngle: -20 and 100% (50 kWh) at endAngle: -50
(1% is 1kWh in radialBar for some reason)

But instead, it’s interpreting the endAngle as 310%, thus, making 49.3 kWh that small instead of making an almost-full circle.

Can you make startAngle and endAngle only asthetic so that they don’t affect the min and max of the series?

...
        chart_type: radialBar
        series:
        - entity: sensor.solaredge_energy_today
          min: 0
          max: 50
          unit: kWh
          name: " "
          color: '#FFE296'
        - entity: sensor.solaredge_energy_today
          min: 0
          max: 50
          unit: kWh
          name: Today
          color: '#FFC326'
...
          plotOptions:
            radialBar:
              startAngle: -20
              endAngle: -50
              dataLabels:
                name:
                  show: true
                  offsetY: 55
...