Patterns
Overview
ZingChart offers a patterns module containing 42 unique patterns. This module gives you the ability to add these patterns to objects within your chart.
Using Pattern Modules
In order to render a pattern, you must include the zingchart.loadModules() function within your page script. This loads the patterns module.
zingchart.loadModules('patterns')
Then, set the pattern within an object's "background-image" attribute using one of the pattern names with the "PATTERN_" prefix.
type: 'bar',
title: {
text: 'Patterns'
},
series: [
{
values: [3,5,8,4,2,6],
backgroundImage: 'PATTERN_BACKWARD_DIAGONAL'
},
{
values: [4,2,3,5,8,6],
backgroundImage: 'PATTERN_HORIZONTAL_BRICK'
},
{
values: [3,8,4,5,6,2],
backgroundImage: 'PATTERN_OUTLINED_DIAMOND'
}
]
Patterns List
| Pattern | Name |
|---|---|
 |
PATTERN_BACKWARD_DIAGONAL |
 |
PATTERN_DARK_DOWNWARD_DIAGONAL |
 |
PATTERN_DARK_HORIZONTAL |
 |
PATTERN_DARK_UPWARD_DIAGONAL |
 |
PATTERN_DARK_VERTICAL |
 |
PATTERN_DASHED_DOWNWARD_DIAGONAL |
 |
PATTERN_DASHED_HORIZONTAL |
 |
PATTERN_DASHED_UPWARD_DIAGONAL |
 |
PATTERN_DASHED_VERTICAL |
 |
PATTERN_DIAGONAL_BRICK |
 |
PATTERN_DIAGONAL_CROSS |
 |
PATTERN_DIVOT |
 |
PATTERN_DOTTED_DIAMOND |
 |
PATTERN_DOTTED_GRID |
 |
PATTERN_FORWARD_DIAGONAL |
 |
PATTERN_HORIZONTAL |
 |
PATTERN_HORIZONTAL_BRICK |
 |
PATTERN_LARGE_CHECKER_BOARD |
 |
PATTERN_LARGE_GRID |
 |
PATTERN_LIGHT_DOWNWARD_DIAGONAL |
 |
PATTERN_LIGHT_HORIZONTAL |
 |
PATTERN_LIGHT_UPWARD_DIAGONAL |
 |
PATTERN_LIGHT_VERTICAL |
 |
PATTERN_NARROW_HORIZONTAL |
 |
PATTERN_NARROW_VERTICAL |
 |
PATTERN_OUTLINED_DIAMOND |
 |
PATTERN_PLAID |
 |
PATTERN_SHADE_25 |
 |
PATTERN_SHADE_50 |
 |
PATTERN_SHADE_75 |
 |
PATTERN_SHINGLE |
 |
PATTERN_SMALL_CHECKER_BOARD |
 |
PATTERN_SMALL_GRID |
 |
PATTERN_SOLID_DIAMOND |
 |
PATTERN_SPHERE |
 |
PATTERN_TRELLIS |
 |
PATTERN_VERTICAL |
 |
PATTERN_WAVE |
 |
PATTERN_WEAVE |
 |
PATTERN_WIDE_DOWNWARD_DIAGONAL |
 |
PATTERN_WIDE_UPWARD_DIAGONAL |
 |
PATTERN_ZIGZAG |
Summary
Patterns are a great way to give your chart objects some style, and with 42 available patterns, you can make your chart really look the way you want it.
Don't forget, a comprehensive list of available attributes and objects can be found on our JSON Syntax page.