How to remove the rounded corners from chart bars?

[dlangamer]

Hello,

Is there a way to make the corners of the chart bars square instead of rounded? Perhaps using cardmod?

Thanks!

[yudin-s]

I do not see a clean built-in option for that on normal timeline bar charts right now.

The README lists card-level corner styling (card_border_radius) and a separate state_timeline_corner_radius option, but the normal bar-chart options I can find expose spacing and display behavior, not a bar corner radius. The CSS class reference also exposes the plot/SVG containers and state-timeline cells, but not a stable per-bar class intended for this.

So I would not try to solve this with card_mod unless you are okay with a fragile selector against internal SVG elements. It may work for one version/layout, but it can easily hit the wrong rect elements or break when the chart redraws.

The durable fix would be a small feature request / PR for something like:

graph_type: bar
bar_corner_radius: 0

or an equivalent per-entity option. Since the card already has radius controls for the card itself and state-timeline mode, adding a dedicated timeline-bar radius option would be clearer than overloading card_border_radius.

If this answers the current limitation, please mark it as answered so others do not spend time looking for a card-mod-only setting.

[dlangamer]

I do not see a clean built-in option for that on normal timeline bar charts right now.

The README lists card-level corner styling (card_border_radius) and a separate state_timeline_corner_radius option, but the normal bar-chart options I can find expose spacing and display behavior, not a bar corner radius. The CSS class reference also exposes the plot/SVG containers and state-timeline cells, but not a stable per-bar class intended for this.

So I would not try to solve this with card_mod unless you are okay with a fragile selector against internal SVG elements. It may work for one version/layout, but it can easily hit the wrong rect elements or break when the chart redraws.

The durable fix would be a small feature request / PR for something like:

graph_type: bar
bar_corner_radius: 0

or an equivalent per-entity option. Since the card already has radius controls for the card itself and state-timeline mode, adding a dedicated timeline-bar radius option would be clearer than overloading card_border_radius.

If this answers the current limitation, please mark it as answered so others do not spend time looking for a card-mod-only setting.

Thanks for the idea and for taking the time to explain it!

I’ll give it a try using a CSS selector. If I manage to get it working, I’ll come back here and share the details.

Thanks!

[gabrielg478]

I'm not using card-mod but UI Extension, which does about the same. I can modifiy the radius with these lines:

uix:
  style: |
    svg.sgc-svg rect.sgc-bar {
      rx: 8px !important;
      ry: 8px !important;
    }

So you may try with just replacing uix with card-mod:

card-mod:
  style: |
    svg.sgc-svg rect.sgc-bar {
      rx: 8px !important;
      ry: 8px !important;
    }

[dlangamer]

It worked perfectly through UIX... Unfortunately, it didn’t work through Cardmod. Maybe there’s an issue with my integration here. I’ll run some more tests. Thank you, my friend!

[cataseven]

Hi @dlangamer @yudin-s @gabrielg478

Please try the update v4.03