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. [iframe src="http://codepen.io/pdillon/embed/pjGdNG/?height=425&theme-id=0&default-tab=result'" width="100%" height="450"] You have a pretty good idea of who's who, right? But if we add additional slices to the pie... [iframe src="http://codepen.io/pdillon/embed/pjGEEg/?height=425&theme-id=0&default-tab=result'" width="100%" height="450"] 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. [iframe src="http://codepen.io/pdillon/embed/EVrgZv?height=425&theme-id=0&default-tab=result'" width="100%" height="450" scrolling="no"] 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.
<svg width="0" height="0">   <defs>     <pattern          id="patternUndecided"          width="8"          height="4"          patternUnits="userSpaceOnUse">            <line                x1="0"                y1="0"                x2="8"                y2="0"               style="stroke:#999;stroke-width:1.5"             />     </pattern>   </defs> </svg>
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:
// Highcharts pie series configuration  series: [{   data: [     {       y: 42,       color: 'red' //Republican     },      {       y: 42,       color: 'blue' //Democrat     },     {        y: 8,        color: 'yellow' //Independent     },      {        y: 6,        color: 'url(#patternUndecided)' //Undecided     }  ]     }]
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. [iframe src="http://codepen.io/pdillon/embed/qOgarx?height=425&theme-id=0&default-tab=result" width="100%" height="450"] Or how about multiple colors to represent mixed results? [iframe src="http://codepen.io/pdillon/embed/YyBQJE?height=425&theme-id=0&default-tab=result" width="100%" height="450"] And there is no reason patterns should be exclusive to opaque data. Why not state the obvious? [iframe src="http://codepen.io/pdillon/embed/OyrjWL?height=450&theme-id=0&default-tab=result" width="100%" height="480"]