More control over text and spacing
This week, we’ve been extending the Styling API so titles, subtitles, captions and sources can be styled individually. That means a larger, bolder title, smaller source text or different colours for each.
We’re adding more control over spacing too: room below a heading, distance between the legend and graph, and space around axis labels. These choices will also work in presets, making it easier to give all your graphs the same treatment.
Faster styling for complex graphs
We’ve also been improving how the Styling API handles large sets of rules and shared presets. The latest work reduces how much needs to be recalculated when a graph has many rules or builds its appearance from several presets.
Rules that match long lists of values are getting faster too, whether you use them to style your data or highlight particular points.
Declare a column’s format with
valueFormatto keep counts such as2010as numbers, preserve text codes or display prices as currency.Automatic year detection now recognises whole-number years back to 1800.
Labels on vertical axes sit further from the graph, and a legend on the right keeps a gap when there is no right-hand axis.
Use
useStyleReaderTree()anduseResolvedStyle()to read styles in custom components; the older style readers and helpers remain available but are deprecated.Custom heatmap renderers can now import
getTileRectBoundsandHoverHitdirectly from@graphysdk/react.Use
curve: 'smooth'for smooth lines and areas in place ofinterpolate: 'catmull-rom'.Set spacing through the Styling API’s
marginoptions instead ofconfig.layout.gaps.Reference-line labels now use a nested style target in place of
ruleLabel.
Legend and headline symbols now show the correct series colour when the data is also split by another column, instead of all using the first row’s colour.
Bars no longer disappear when given a number or date x axis; the graph switches to category spacing and warns about the change.
Reference lines stay fully visible when you hover over or highlight other data.
Hovering or highlighting a slice in a rounded, stacked rose or radial bar graph now preserves its rounded corners.