Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Border radius option in stacked bar chart does not work #854

Open
bladecell opened this issue Jan 17, 2025 · 0 comments
Open

Border radius option in stacked bar chart does not work #854

bladecell opened this issue Jan 17, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@bladecell
Copy link

Checklist

  • [✓ ] I updated the card to the latest version available
  • [✓ ] I cleared the cache of my browser
  • [✓ ] I verified that I'm really running the lastest version in my browser console
  • [✓ ] I checked if there is another issue opened with the same problem

Describe the bug
I have tried to recreate this chart, but cannot get the border radius get to work in stacked column chart in the apex config.

borderRadius: 10,
borderRadiusApplication: 'end', // 'around', 'end'
borderRadiusWhenStacked: 'last', // 'all', 'last'

Version of the card
Version: 2.1.2

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
update_interval: 10min
graph_span: 7d
stacked: true
header:
  show: true
  show_states: true
  colorize_states: true
span:
  start: day
  offset: "-7d"
cache: true
all_series_config:
  group_by:
    func: diff
    duration: 1day
  type: column
  show:
    legend_value: false
    datalabels: true
series:
  - entity: sensor.esph_wmbusmeter_bedroom_heat
    name: Bedroom Heat
    color: var(--red-color)
  - entity: sensor.esph_wmbusmeter_study_room_heat
    name: Study Room Heat
    color: var(--green-color)
  - entity: sensor.esph_wmbusmeter_living_room_heat
    name: Living Room Heat
    color: var(--light-blue-color)
  - entity: sensor.esph_wmbusmeter_kitchen_heat
    name: Kitchen Heat
    color: var(--amber-color)
apex_config:
  plotOptions:
    bar:
      borderRadius: 10
      borderRadiusApplication: end
      borderRadiusWhenStacked: last
  legend:
    show: false
  states:
    hover:
      filter:
        type: none
  dataLabels:
    enabled: true
    textAnchor: middle 
    offsetY: 1
    style:
      fontSize: 12px
      fontFamily: Nunito, sans-serif
      colors:
        - var(--contrast11)
    background:
      enabled: false
  grid:
    show: false
    strokeDashArray: 0
  xaxis:
    labels:
      offsetY: -5
      datetimeFormatter:
        day: ddd
      style:
        fontFamily: Nunito, sans-serif
    axisBorder:
      show: false
    tooltip:
      enabled: false
    axisTicks:
      show: false
    crosshairs:
      stroke:
        color: var(--light-grey-tint)
        dashArray: 0
  yaxis:
    stepSize: 5
    labels:
      show: false
    axisBorder:
      show: false
    tooltip:
      enabled: false
    axisTicks:
      show: false

Expected behavior
Rounded borders in the stacked bar chart

Desktop (please complete the following information):

  • ZenBrowser
  • 1.6b (Firefox 134.0)
@bladecell bladecell added the bug Something isn't working label Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant