Enhancing Charts With SVG Patterns


Patrick Dillon

The number of options for data visualization is pretty diverse. If you want to go deep, charts such as heat maps, scatter plots, and spider webs can offer unique angles for customers. But for the majority of performance analytics, column, area and pie charts still dominate. Quantities over time (site traffic, revenue) or A/B comparisons expressed with variations in height, percentage of space, and a couple of colors are easy to grasp with little supporting text.

Take this pie chart, for example.

You have a pretty good idea of who’s who, right?

But if we add additional slices to the pie…

Are Independents represented as green or yellow? Without the labels, there is no obvious distinction between the two.

But when one of the slices is filled with something more than color, it’s easier to figure out.

Filling a pie slice with a pattern is not a common charting library feature (yet), but if your library of choice is SVG-based, you are free to implement SVG patterns. The implementation may not be intuitive at first, but with a little code, it is relatively easy to get it working.

To generate a line pattern for a slice, you need to define an SVG pattern in your page DOM before configuring the chart.

Here, we configure the pattern’s bounding box width and height along with the “patternUnits” attribute. There are two options for patternUnits: “objectBoundingBox” (default) and “userSpaceOnUse.” For textured patterns in charts, stick with “userSpaceOnUse,” which will preserve the specified dimensions and not scale the pattern to the size of the slice being filled.

To use it, you can specify the color of your slice by the pattern ID:

You can include a variety of tags within the <pattern> tag. Line patterns are effective, but if you wanted to capture “Undecided” with even more certainty, there’s nothing stopping you from including custom svg paths.

Or how about multiple colors to represent mixed results?

And there is no reason patterns should be exclusive to opaque data. Why not state the obvious?


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">