6 ways to make a chart more expressive

Six chart design ideas for product teams, from annotations and colour to shapes and interaction, with before-and-after examples built in the Graphy SDK.

10 min read

Featured image

A chart can do more than report numbers. It can have personality, draw someone into a story, or make them curious enough to explore a little further.

When you're building an analytics product, a reporting feature or a charting tool, it's easy to settle for familiar charts with default styling and call it a day. Often, that's the right call. Good chart design rewards restraint: people should be able to read the data without the design getting in the way, and “less is more” is sound advice.

But restraint and character can live in the same chart. At Graphy we call these expressive charts: charts that use visual style, emphasis, composition and interaction to communicate meaning, and give data a distinct identity. In our view, a few deliberate choices can make a chart more eye-catching, more engaging to explore and more useful, all at once.

Here are six ideas to try in your next charting project. Think of them as starting points rather than rules. Some take little more than a thoughtful label or a change of palette; others invite you to experiment with shapes and interaction. Each comes with a before-and-after example built with Graphy's Charting SDK, using illustrative data.

1. Annotate and highlight what matters

If you know a dataset inside out, you bring a lot to its story that never appears on screen. Someone opening the chart for the first time has none of that context. Annotations let you share some of it.

Even a title can help: For example, “Activation rate” names a metric, while “Activation reached 37%, up 13 percentage points from week 4” gives someone a reason to look closer. A note beside an inflection point, a highlighted observation or an arrow between two values can walk viewers through your thinking.

When thinking about what to highlight, start with the thing you want a reader to understand, then choose the title, labels and annotations that support it. Keep enough of the surrounding data visible for readers to judge the claim themselves. That’s data storytelling at its simplest: say what matters, then show the evidence.

In our activation example below, the basic chart shows weekly cohort rates. The more expressive version on the right calls out the jump from 24% in week 4 to 37% in week 8 and marks when a new onboarding flow was released. That timing is a valuable clue, but the chart alone can’t tell us whether the release caused the improvement.

Annotate and highlight what matters

BeforeCompetent baseline
AfterStory and emphasis
Illustrative data · fictional examples

Illustrative data. An explicit comparison and release note turn a metric into a more complete story.

If you’re building a reporting product, this is a chance to give people more authorship over their charts. Make room for their explanations and let them add their own annotations: a chart that travels into a presentation should carry the context its author would otherwise have to explain aloud.

The Graphy Charting SDK provides annotations and highlights out of the box, for adding emphasis to a chart. Learn more.

2. Use colour to carry meaning

Colour is a rewarding place to experiment in design, because small changes can completely transform the feel of a chart. It also does real work before anyone reads a label: the brightest series draws the eye, a darker cell suggests a larger value, and a familiar warning colour says something needs a closer look.

So choose colours that support the story you want to tell. Use distinct hues to separate categories, a light-to-dark scale to show higher and lower values, or a contrasting accent to flag a key point.

Our feature adoption example below starts with a different colour for each workflow. You can read every percentage, but beyond the row labels the palette tells you very little. Switch to a light-to-dark violet scale, and you can scan the whole grid for higher adoption. Every cell uses the same 0–100% scale, and the exact values are still visible if you want the detail.

Use colour to carry meaning

BeforeColour by workflow
AfterColour by magnitude
Illustrative data · fictional examples

Illustrative data. A light-to-dark colour scale makes the pattern visible; labelled percentages keep it precise.

Your brand palette is a good starting point, but the subject can suggest directions of its own. A music listening recap could borrow colours from album artwork; a planting report might use greens and earthy tones that connect it to the landscape. Choices like these let a chart feel playful, calm or editorial, depending on the experience you’re building.

You can also get creative with how little colour you use. In a mostly neutral chart, one bright accent makes a turning point or an unusual result stand out. Try giving the same chart three treatments: a full palette, shades of one colour, and grey with a single accent. Notice how each changes where your eye lands first.

Stuck for inspiration? Browse Graphy's chart examples to see more themes

As these choices become part of your product, keep their meanings consistent. If violet represents the Build workflow in one view, carry it through to related charts. And keep labels, shapes or line patterns alongside colour, so readers have more than one way to identify the data.

Graphy’s scales map values to colour. Its styling API lets you reuse named colour tokens and apply a consistent visual treatment across charts.

3. Build a recognisable chart style

Colour is only part of a chart’s personality. Think about the care that goes into typography, buttons and spacing elsewhere in your product. Bringing those same choices into your charts makes them feel like they belong there.

For some products, that means applying your existing brand guidelines: the same typefaces, colour palette and visual details people already recognise. For others, it means giving users control over those choices, so they can tailor a chart to their own brand, report or audience.

In the active teams example below, an ordinary column chart takes on a distinct editorial style: clear typography, blue bars with crisp edges, a salmon-paper background and fine grid lines. The values and zero baseline stay the same; the presentation gives the chart its identity.

Build a recognisable chart style

BeforeNeutral treatment
AfterEditorial house style
Illustrative data · fictional examples

Illustrative data. Typography, bar edges and a warm background give the column chart a distinct identity without changing the comparison.

Once you find a style you like, give it a place in your chart product’s design system. Repeating those choices across charts makes the whole experience recognisable. Then stress-test it on a dense chart, a small card and a narrow screen: a typeface that works beautifully in a headline may need a quieter companion for values and axis labels.

Graphy’s stylesheets and reusable presets give you a way to apply a house style across charts.

4. Choose shapes that connect to the subject matter

Once you look beyond default styling, the data points themselves become a fun place to play. Bars, lines and dots are familiar to everyone, but they can make very different subjects look much the same. A shape that's connected to the subject matter gives a chart an immediate sense of what it’s about.

For example, a planting report could use repeated leaf symbols to show how many trees were planted. A music chart could use artist photos as labels, and a wind graph could use arrows to indicate wind direction. Shapes and images that relate to the subject make a chart easier to recognise and give it more character.

Choose shapes that connect to the subject

BeforeDots
AfterCustom leaf geom
Illustrative data · fictional examples

Illustrative data. The leaf shapes connect the numbers to their subject.

As you experiment with shapes, keep the values easy to compare. It's easy to get carried away and use icons that warp the meaning of the chart because they're too big, or extend beyond the actual data point. Equal-sized symbols with a clear key explaining what each represents avoid that problem. And if readers really need to compare small differences between values, then a bar chart may be easier to read.

In Graphy, the shapes used to draw data are called geoms. You can write a custom geom renderer to change how a built-in geom is drawn, or pair a renderer with a new geom definition. The leaf example above is custom code built on that extension mechanism.

5. Add the context that makes a number meaningful

Another way to make a chart more expressive is to consider what else belongs alongside the main data. A number gets far more interesting when someone can compare it with a goal, a previous result or another group.

A falling latency curve, for example, looks encouraging. Add the team’s target to the same chart and people can now see whether the drop is enough. You could place individual observations beside an average, or use a series of small charts to explore how a pattern differs between groups. This is composition: choosing which pieces belong together so the reader can make the comparison that matters.

Our latency example below adds a 250ms target and a release marker to the same weekly measurements. The final value is 238ms, so readers can see both the improvement and how it compares with the target.

Add the context that makes a number meaningful

BeforeTrend alone
AfterTarget and release context
Illustrative data · fictional examples

Illustrative data. A reference line makes the operational meaning of the trend visible.

A good place to start is the conversations around your users' charts. If people keep asking how a result compares with a target or with last month, that comparison may deserve a place in the view. An average line gives a benchmark; a trend line shows the overall direction when individual values jump around.

Some context works well outside the plot, too. A headline number can bring the latest value or a total into focus, giving readers a quick way into the story before they explore the detail. This leaves more room for the chart itself, especially when another line or annotation would make it feel crowded.

Graphy lets you combine layers to add context alongside your data, from reference lines for targets to statistics for averages and fitted trendlines. You can also use headline numbers to display a total, average or latest value alongside the chart.

6. Use interactive charts to follow a question

So far, you’ve been deciding what to bring forward for the reader. Interaction hands some of those decisions over to them.

Someone may arrive with a question you didn’t anticipate, or want to follow up a detail they noticed in the overview. That’s an opportunity to design a journey through the data. With interaction baked in, a reader could inspect a point, focus on one series or move into a more detailed view, and each step should help them keep their bearings.

Our example below starts with total weekly active users. From there you can break it out into lines to compare workflow trends, a donut to inspect the latest week's mix, or stacked columns to see each workflow's contribution to the total.

Use interactive charts to follow a question

Start with the total, then choose a view to explore the workflows behind it.

Illustrative data · fictional examples

Illustrative data. Explore the same users as a total, workflow trends, a latest-week mix or weekly contributions.

Motion can play a part too, letting readers follow the same points from an overview into a more detailed view. It works best when the chart already makes sense before anyone interacts with it, and the controls offer a clear way to explore further. Readers should still be able to follow those changes with motion reduced or switched off, and reach the same information using a keyboard or touch screen.

Graphy’s Charting SDK includes animated entrances, transitions when data or settings change, hover highlighting and customisable tooltips for polished chart interactions.

Bring all of this into your product

We built the Graphy SDK so product and engineering teams can help their customers tell stories with data, through a distinctive visual style, context that brings patterns into focus, and interactions that invite people to explore. Our chart examples gallery has more ideas to borrow. When you're ready to try one in your own product, explore the SDK or get started with the React quickstart.

Image

WRITTEN BY

Nick Smith

Graphy team

Nick has 13+ years experience of wrestling with the challenge of how to make data clear and easy to understand. He writes about product, marketing, and all things product marketing.