search

phibr0 / obsidian-charts

Charts - Obsidian Plugin | Create editable, interactive and animated Charts in Obsidian via Chart.js
https://charts.phib.ro/
GNU Affero General Public License v3.0
592 stars 27 forks source link

Only fill differences in stacked line charts #53

Closed elinorbgr closed 2 years ago

elinorbgr commented 2 years ago

Describe the feature

Not sure if this should be considered a bug report or a feature request.

When making a line chart that is both stacked and filled, each line is color-filled down to 0, resulting on colors of the lower areas being a mix of all the colors of the upper areas. Instead, the color filling should only be done between two consecutive lines, so that each intermediate area is of the correct color.

Does this fix a problem? If so, specify.

This is mostly for readability: stacked line charts tend to be more readable when color-filled, but the current behavior kind of defeats the purpose as all colors appear very similar (given they are all blending with each other).

Did you consider other alternatives?

No response

Screenshots and recordings

No response

phibr0 commented 2 years ago

image Do you want something like this?

The problem is, depending on how the different parts are sorted, some might be completely invisible: image

There is also the stacked Modifier (not sure if it is properly documented), try adding stacked: true

elinorbgr commented 2 years ago

Actually I am already using stacked: true, which is why I was expecting something like your first screenshot.

phibr0 commented 2 years ago

https://charts.phibr0.de/modifiers/#transparency-modifier

elinorbgr commented 2 years ago

Thanks!

elinorbgr commented 2 years ago

Actually, looking deeper into this, changing the transparency is a (good enough) workaround to the real underlying issue.

Looks like this is something that was discussed on chart.js and they introduced some time ago a way to achieve the "fill-between" behavior that can be expected of "filled+stacked" charts: https://github.com/chartjs/Chart.js/issues/2380#issuecomment-287535063

So, if I understand correctly, a "correct" solution would be, for example, to generate the chart metadata with those special fill: '-1' values when a chart has both fill: true and stacked: true. Would that be ok from, your point of view?

I'm not familiar with TypeScript, but I can try to make a PR for this if you don't have time for it. If I guess correctly it could be done by replacing fill: yaml.fill ?? false, with something like this:

fill: yaml.fill ? yaml.stacked ? i == 0 ? 'origin' : '-1' : true : false
phibr0 commented 2 years ago

That's even better! I implemented it in 3.6.1