Styling API released, adding millions of ways to make your graphs your own
You can now style every part of a graph through one API, with 38 properties covering fonts, spacing, fills, strokes, shapes and shadows. Apply a consistent look across a set of graphs or adjust individual details to make them your own.
Bars can use gradients, patterns or images, points come in seven shapes, and text controls include details such as letter spacing. Styles can also respond to the data, so individual values or states can look different when needed.
Compare values with Graphy’s new dumbbell graphs
The new dumbbell graph makes it easier to compare values within each category: before and after, one year against another, or several values at once. A line joins the smallest and largest values, making the gap easy to see.
Use a horizontal or vertical layout, style the dots and connector separately, and add value labels without filling the space between the dots. Dumbbell graphs are available as an early preview (alpha) through a plugin for graphs you build in code.
Blur bars, lines and points, change how their colours blend where they overlap, or adjust their brightness and contrast through the Styling API.
Choose how line ends and corners are drawn with
lineCapandlineJoin.Large live graphs spend less time formatting axis labels and stop animating updates above the limit set by
animation.maxAnimatedGeoms, which moves out ofanimation.intro.Bar and area axes now always include zero. For other axes, use
domainMin: 0in place of the oldzerooption.Custom graph plugins can style individual parts, place data labels, support highlights and use shared helpers for layout and animation.
createSpecBuilderandcreateGraphyKitnow include mappings, annotations, highlights and styles, so you can build a graph without separate helper imports.Spacing within headline numbers grows with the text size, and reference text such as “from May” follows your chosen text colour.
Styling properties now use
fill,stroke,strokeWidthandcornerRadiusin place of the earlier colour, background and border names.Use
dashArrayto set dash and gap lengths.alpha,fillAlphaandstrokeAlphacontrol the transparency of an element, its fill and its outline separately.The deprecated style readers and helpers have been removed. Use
createStyleResolver().readers(), and replaceuseStyleReadersimports withuseGeomStyleReader.
Closely spaced axis values keep distinct labels, such as
1k,1.05kand1.1k.Weekly date ranges keep the correct end date across daylight-saving changes, and date-time labels keep the comma between the day and year.
Percentage differences from negative starting values now have the correct sign. Negative durations keep their minus sign, while values that round to zero lose misleading signs.
Circular date and number axes no longer draw the last reading on top of the first.
Turning on data labels no longer removes points from line and area graphs, and hovering still works when many values share the same category.
Choosing one colour for your data now uses that colour instead of replacing it with one from the graph’s palette.
Undoing a change to a graph with two vertical axes restores the right-axis settings instead of copying the left axis.
Graphs still draw when a headline has no numeric value to total or a combo graph cannot show the requested trendline; the unavailable headline or trendline is left out.
Infinite values no longer collapse an axis. Totals or averages of text or dates, and invalid fixed dates, now report an error.
Invalid shadows produce a warning instead of preventing the graph from drawing, and warnings about missing annotations or invalid highlights remain visible after unrelated edits.