Changelog
New features, improvements, and fixes to the Graphy SDK.
Choose from 16 new theme packages, now in beta. Try Watercolor for a hand-painted look, Blueprint for drafting lines or Financial for a newspaper feel. Each theme sets the colours, fonts, spacing and backgrounds, and some also change how bars, lines and points are drawn.
Apply a theme to your existing graphs, then use the Styling API to adjust the details.
Explore the themes here, or check out the documentation.
New visualizations: Box plots, waterfalls and funnels
Three new graph types are available as beta plugins for graphs you build in code. Box plots show how values are spread across categories, including the middle value and outliers. Waterfall graphs show how additions and subtractions lead to a total. Funnel graphs show how many people or items make it through each stage of a process.
Graphy can calculate box plot summaries from your raw values and conversion rates between funnel stages.
Read the docs for box plots, waterfall graphs and funnel graphs.
Compare categories with a new lollipop graph, which uses a dot and a line back to zero for each value. It gives rankings and comparisons a lighter look than bars, with horizontal or vertical layouts and separate styling for the dots and lines.
Our new candlestick graphs show opening, closing, highest and lowest prices for each trading session, with colours that distinguish rising and falling prices. Hover over a candle to see all four values. Both graph types are available as beta plugins for graphs you build in code.
Learn more about lollipop graphs and candlestick graphs.
Animate when a reader gets to the chart
Graphs further down a page can now wait to play their entrance animation until you scroll to them. It’s useful for reports and stories where readers reach each graph at their own pace.
Set animation.intro.trigger to 'inView' to enable it. The title, axes and legend appear immediately, and the animation plays once when the graph comes into view.
Point and edit (work in progress)
On our new point and edit experience (still under development), the selection menu now lets you move between one value, its category and its series where those selections differ.
It's now possible to style the point-and-edit menu separately from your graph, including different looks for light and dark mode, while keeping the editor’s own font. Point and edit also no longer opens an empty menu for custom graph types without an editor registered for them.
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.
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.
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 graph type picker gains rose, stacked rose, radar, filled radar and radial bar. A radial bar draws one track per category, each curving round a central hole.
Turning a graph round now keeps its category axis unless the result is a pie or donut. Before, a polar graph with the value on the angle lost that axis, which collapsed a radial bar into a single stacked block of colour.
New default palettes
Graphs whose bars, lines or points stand apart from each other now start with an eight-colour multicolor palette. Where the pieces touch, as in stacked bars, stacked areas, pies and heatmaps, the new brick mono palette takes over instead. Both apply automatically. If you set your own colour scale, that still takes precedence.
Pin a number, leave a comment, drop a sticker, add a text box or draw a free arrow on a point of a pie, donut, rose or radar graph and it now lands on that point. Round graphs drawn with lines, areas or points used to drop anything anchored to a point without a word. Shapes, images and the other annotations that attach to a selection find their selection on round graphs too, and a sticker placed on the canvas stays where you put it.
Selections reach further on every graph as well. Area, point and heatmap layers now respond to them where they were previously skipped.
Data labels that stay legible
Labels inside a bar or a pie, donut or radial slice now pick black or white to contrast with the fill, so pale colours no longer swallow white text. Set textColor yourself and your choice still applies. A pie or donut label with position: 'auto' moves inside its wedge instead of disappearing when the pie fills the panel.
Bars handle tight fits better too. On a horizontal graph with bars side by side, a label taller than its bar steps outside rather than vanishing and only goes when there is no room outside either. Inside labels that overflow a thin bar keep their inside styling instead of switching to an outside pill, while a label that cannot fit its segment along the value axis is dropped rather than spilling onto its neighbour. Labels also no longer shrink the bars to make room for themselves.
@graphysdk/react is now the only package you need. It includes the spec builders alongside the renderer, so your first graph is one install and one import. If you’d rather skip the bundler entirely, the package ships ready-made browser bundles that jsDelivr serves directly. Drop a script tag on a page, point an import map at React and you have a graph with no build step.
Read-only graphs got lighter too. Rendering a graph without the editor no longer pulls the editor into your bundle and the rich-text dependencies behind it are now optional. Install them only when you use the editable entry.
Edit annotations in place
Select a text box, arrow or shape on the graph and a toolbar appears beside it. Text boxes get background colour, text colour, font, size and alignment. Arrows add thickness, line style, arrowheads and the sticker effect to the colour picker, while shapes keep it to colour, opacity and border thickness.
Every annotation now has handles too. Drag a side to resize a text box or shape, or drag an end to redraw an arrow. Pick up a handle and the arrow keys nudge it, and Escape puts it back.
Combo graphs in the editor
Combo joins the graph type picker. Choose it and every series but the last draws as bars, with the last drawn as a line on its own y axis. A new Combo chart appearance section switches the bars between grouped and stacked, or drops them for lines only, and the y-axis section lets you choose between a single and a double axis.