Style even more of your charts
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.
Editing progress (work in progress): a new menu beside a selected value brings together options to pin a value, add a comment or sticker, highlight data and show a difference.
Point and edit (work in progress): choose Narrow, Regular or Wide bar thickness from the bar menu, while the side panel keeps its slider.
Apps building their own editing menus can now reuse Graphy’s menus and their colour options alongside their own actions.
Make value labels easier to read over textures and patterns with
style.dataLabel({ textOutlineColor: 'auto', textOutlineWidth: 2 }), which matches the outline to the surface behind each label.Set a maximum thickness for horizontal and vertical bars in pixels with
style.geom.bar({ maxWidth })to keep bars from becoming too wide when there are only a few categories.Use
cornerRadiusto round box plots, candlesticks, funnel stages, Mekko cells, Sankey nodes and waterfall bars, with the shared type now namedGeomCornerRadiusinstead ofBarCornerRadius.Box plots now use solid, bordered boxes with a clear middle-value line and solid dots for outliers.
Editor panels automatically use the graph’s language and light or dark appearance unless your app sets its own.
Import editing commands and helpers directly from
@graphysdk/react/editable.Custom themes can read the graph’s drawing area with
useGeomPanelSizeand convert positions to pixels withreadPositionPixelsandreadRectPixels.Custom themes can use
createLineFillAreaGeneratorto draw a fill beneath a line andgetBuiltInEditOutlineShapesto outline selected shapes.The Styling API’s
overlayproperty is now calledoverpaint.Conditional
overpaintrules usingwherenow apply only on hover, with rules for the normal appearance reported as invalid.Custom live renderers now resize with the graph and appear in exports, using
options.liveandinput.livein place ofoptions.overlayandinput.overlay, withreadPanelPointfor pointer positions.Visibility options now use shorter names such as
visibleandshowTitlein place ofisVisibleandisTitleVisible, with the sameshownaming for subtitles, captions and sources.Editor controls now use names such as
checked,disabledandopeninstead ofisChecked,isDisabledandisOpen.Renderer and plugin options rename
shouldAnimateTransitionstoanimateTransitions,inferredColortoinferColorScaleandzeroBaselinetoincludeZero, with behaviour and defaults unchanged.
Changing graph type and back preserves number or date axes and your chosen bar thickness.
Graphs with mapped horizontal or vertical values now draw even when you leave out the corresponding scale definition.
Missing values in stacked areas no longer make an area drop through the ones beneath it.
“Show percentages” now works for stacked area labels.
Botanical and Chalkboard lines follow your smoothing and missing-value settings, and missing values no longer produce invalid positions in themed lines.
“Fill under line” reflects the theme’s fill and turns it off correctly, while Watercolor now draws the fill beneath its lines.
Outlined value labels choose a readable text colour against their outline, including labels over Chalkboard shading.
Highlighted bars keep their shadows, and highlighting a series also dims the points belonging to other series.
Highlighting a point on a line no longer draws its dot and label twice.
Totals above pie and donut graphs stay centred over the pie when the legend sits beside it.
Selection outlines in Comic and Watercolor follow the shapes you see.
Comic points and pie slices animate correctly, notes keep words together and crowded axes retain their labels.
Comic’s background dots no longer overlap the heading in right-to-left layouts.
Watercolor textures appear from the first frame, and Blueprint, Botanical and Chalkboard textures no longer change size after loading.
Rounded shapes stay valid when the graph’s drawing area shrinks to zero width or height.
Editing menus and tooltips no longer move the page or flicker when they open in apps using flex or grid page layouts.
Published builds now send the anonymous graph counts announced last week; set
telemetry={false}onGraphProviderto turn this off.