seriesFmt for series labels in charts

evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in pure SQL and markdown

https://evidence.dev

MIT License

4.47k stars 215 forks source link

seriesFmt for series labels in charts #2816

Closed kwongz closed 23 hours ago

kwongz commented 2 days ago

Description

Adding existing evidence/excel formatting properties to series name displayed in chart legends

[x] Area Chart
[x] Bar Chart
[x] Bubble Chart
[x] Chart
~~[ ] Funnel Chart~~ does not use charts
~~[ ] Histogram~~ does not accept multiseries
[x] Line Chart
[x] Scatter Plot

Before: <BarChart {data} />

After:

<BarChart {data} seriesFmt="pct"/>

Checklist

[x] For UI or styling changes, I have added a screenshot or gif showing before & after
[x] I have added a changeset
[ ] I have added to the docs where applicable
[ ] I have added to the VS Code extension where applicable

kwongz commented 2 days ago

@archiewood I noticed the styling in the tooltip looked a bit off when using numbers as series names, I took the series name font size down a pixel to help differentiate. What do you think? Open to other ways to highlight series name vs value (underline/bold, different color shade/intensity.

seriesName & value font 12px

seriesName font 11px, value font 12px

side note: I also thought (visually) the space between the % values was larger, but there doesn't seem to be the same

kwongz commented 2 days ago

fixes #2800

archiewood commented 2 days ago

were we going to do seriesLabelFmt for this?

kwongz commented 1 day ago

@archiewood Ready for review

archiewood commented 1 day ago

Needs docs - just add to the options propListing, not examples i dont think