Changelog
New features, improvements, and fixes to the Graphy SDK.
Your theme now carries through to more graph types, including Sankey, waterfall, candlestick, funnel, Mekko and box plots. See Bauhaus' bold primary colours, Financial’s newspaper styling and Phosphor’s terminal glow across more of your graphs, with smaller details such as whiskers, connecting lines and labels kept clear.
Colours for rises, falls and totals now follow your theme too, so candlesticks, waterfalls and headline trends fit the rest of the graph.
Introducing the Graphy SDK cookbook
Explore practical ways to bring Graphy into your app with our new cookbook - a quick and easy way to test out the core elements of Graphy’s SDK. Start with your first graph, add an editing panel or make the controls match your app’s design. Each recipe includes a live example, a prompt you can use with your AI tool and code to show how it works.
We’ve added several new chart recipes to our documentation. Follow energy, money or people through a Sankey diagram, with wider connections for larger amounts. Mekko graphs show size and share together: wider columns represent larger markets, while the segments show each company’s share within them.
Add error bars to bars or points to show uncertainty around an estimate, such as a confidence interval. All three are available as plugins, currently in beta.
Browse documentation for Sankey diagrams, Mekko graphs and error bars.
Point and edit (work in progress)
We’re adding more ways to change a graph directly from its menus. This week’s work includes switching between supported graph types and side-by-side, stacked or 100% layouts.
We’ve also been working on controls for:
Line thickness, solid, dashed or dotted lines, fill beneath a line and the visibility and size of its points.
Smoothing lines, handling missing values and applying line styles and point sizes across the graph.
Bar thickness and grid-line style and thickness.
A second vertical axis, with its own visibility, labels, scale and limits.
Choosing between the theme’s colours and presets supplied by the app through
palettePresets.
Selection menus use your data’s names, such as “Region: North”, and dashed selection outlines use the theme’s text and background colours to stay visible. Apps can replace menus through editMenus on EditableGraphRenderer, or remove a menu with null.
Telemetry
Production browser builds of @graphysdk/react now send a count the first time a graph appears, including its type and basic feature-use flags. Telemetry is on by default; set telemetry={false} on GraphProvider to turn it off.
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.