Styling API progress
We’re getting closer to completing the Styling API. You can now set your graph’s fonts, text size and outer spacing in one place, with a separate font for headings.
The latest additions give you control over more of the details: the guide that follows your pointer, the corners and colours of heatmap cells, the legend’s overflow menu and the text on reference-line labels.
Coming soon: a fully expressive Styling API with CSS-like flexibility, giving you control over every detail of your graph’s appearance.
Getting ready for stable
We’re working through the edge cases as we get closer to a stable release. This week, we’ve focused on how graphs load, handle arriving data and respond to your pointer.
Graphs no longer wait indefinitely for web fonts: after three seconds, they render with the fonts available and update if the others arrive. You can also start with an empty dataset without an error, and the scales adjust when the first rows arrive.
Hovering follows the line as it’s drawn between points, while filled areas respond across their fill. Where filled radar areas overlap, the one you see on top takes priority.
The coloured symbols beside labels now match the transparency of the bars, lines or points they represent, including rounded corners for bars.
Bubbles in size legends now match the points’ colour and transparency instead of appearing grey or using a fixed transparency.
For custom hover behaviour, use
HoverEngine.queryto choose how close the pointer must be to a point or line before it responds.useStyleResolver()lets your custom components read the same styles and colour scheme as the graph.Use
UnitBoxSvgin custom graph elements to draw circles that stay round, even when the graph is wider than it is tall.When automatically placed data labels don’t fit, the graph now warns how many were hidden and suggests
position: 'outside'.Set text size with
style.graph({ textScale })instead ofconfig.appearanceand outer spacing withstyle.graph({ padding })instead ofconfig.layout.padding.GraphProviderno longer acceptsthemeOverrides; usecolorSchemefor light or dark mode and the Styling API to customise your graph.Edit targets can now identify a point, a series or all points at an x value by their data values, keeping them consistent when the graph is rebuilt.
Update
observationtoobservationsinEditTargetchecks anddata-edit-kindselectors to use the new edit target.
Callout labels now use light text on dark backgrounds unless you choose a text colour yourself.
Difference-arrow labels keep their background when you make the graph background transparent.
Reference-line labels stay inside the graph and shorten with an ellipsis when they’re too long.
Rich-text font sizes now use numeric pixel values and scale with the rest of the graph’s text; string values are no longer read.
Filtering a year column now treats
2021as a year, so keeping rows up to 2021 no longer removes every row.