Give your data points a new look
Use stars, diamonds or your own images to distinguish groups in a scatter graph or give a line series a recognisable marker. Open Point shape in the graph’s edit menu and choose from the shapes your theme supports.
If you’re building with the SDK, register reusable, custom symbols with defineGlyph to make them available in the picker. Watercolor now supports custom shapes and images too. See how the edit menu works.
A first look at Tint themes
Tint is a family of 21 themes that build a chart around a single colour. The background, text and marks use shades of that colour, with dotted grid lines and bars that are gently rounded at the tips. The collection ranges from muted Sage and warm Coral to dark Midnight. Browse the Tint themes.
Graphs without a theme have a refreshed default look, with a new palette, rounded bar tips, outlined points with translucent fills, larger labels and a more compact legend.
Round the base and tip of a bar separately in the editing panel or with the Styling API’s
cornerRadius: { base, tip }.Set category colours in waffle graphs and adjust heatmap gradients. On single-series waterfalls and candlesticks, set separate colours for increases and decreases, and for totals on waterfalls.
Format numbers, dates and currencies for locales such as Italian and Japanese with
formattingLocale. UseuseFormattingLocale()in your own components. Supply your own chart and editor wording withIntlProviderorEditorIntlProvider, including support for right-to-left menus.Use
mode="static"for print, thumbnails and export preparation. Annotations stay visible, and hover, popovers and animations are disabled.Give labels at the ends of lines and areas an outline that matches their series with
style.legend.directLabel({ textOutlineColor: 'auto', textOutlineWidth: 2 }).
Upgrading the SDK
Set
data.parsingLocalein place ofconfig.parsingLocaleor_metadata.parsingLocale. The default changes fromen-GBtoen-US. Setdata.parsingLocaletoen-GBif you rely on day-first dates.Replace
_metadata.hiddenwithcolumns[].visible, using the opposite boolean value.Use
config({ tooltip: { mode: 'none' } })to hide data tooltips in place of the removedGraphRenderer.showTooltipsprop. ImportEditorIntlProviderin place of the editor entry point’s oldIntlProviderexport.Use
style.legend.item,style.legend.directLabelandstyle.headline.itemin place ofstyle.legendItem,style.directLabelandstyle.headlineItem.In custom renderers, use
useGeomPanelSize()in place ofpanelRectin paint hooks. UseuseGeomViewportSize()to read the nearest drawing viewport.In custom plugins, use
getBaseandgetTipfor direction.minandmaxdescribe screen bounds, andbaseandtipreplace the oldfloorandceilingstack roles.The axis panel no longer offers Reverse. You can still reverse a scale in code.
Error bars stay centred as bars change thickness, and their caps resize with the bars.
Rounded ends, gaps, connectors and value labels stay in the correct position on negative, reversed and horizontal charts where applicable. Horizontal area labels stay visible.
Missing values in stacked areas below zero no longer jump back to the axis. Points and hover positions follow the running total, and 100% stacks show totals from the underlying values.
Highlighting a scatter point dims the other points. Point shapes fit their menu, and selection outlines follow the built-in shapes.
The grid panel shows controls for the directions a graph supports. The bubble graph editor no longer offers a point-size control that would override the data.
Waffle graphs hide value labels by default, and thin dotted lines are easier to see.
Labels choose light or dark text more reliably across several themes. Financial keeps waterfall and dumbbell connectors visible, and Blueprint labels fit more easily on thin bars.
Typewriter follows editing controls for points, line fills and line styles and now animates into view. Watercolor graphs draw in with a brush effect, palette changes reach single-series graphs, and hovered lines and areas stand out.
Graphs do less drawing work when resized, with further improvements for Phosphor, Gamma Night and larger Watercolor bar graphs.