search

ONSvisual / svelte-charts

Reusable chart templates for Svelte projects.
14 stars 6 forks source link

scaling/wrapping long tick labels (especially on smaller screen sizes) #9

Closed ananmaysharan closed 7 months ago

ananmaysharan commented 11 months ago

I'm not currently aware of a way to scale or wrap the tick labels on chart axes when their length is such that the labels start to overlap. I realize this is hard to do especially with svg elements, but was just wondering if this was planned in any way, or whether there was a current way to wrap or break the labels, or even reduce their font size.

I've attached a screenshot of an example of the overlapping labels:

image

cheers!

bothness commented 7 months ago

Hi @ananmaysharan - We've now implemented label wrapping by default for the y-axis labels on the BarChart (horizontal bars) component, and for inline labels on the LineChart and ScatterChart components. For your use-case I'd recommend either using BarChart, or using a ColumnChart with shortened labels (eg. Sun, Mon etc in this example).

FYI, you can also override the CSS on the charts (eg. font-size) by targeting the classes of the axes etc.