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],
        "background-image":"PATTERN_BACKWARD_DIAGONAL"
    },
    {
        "values":[4,2,3,5,8,6],
        "background-image":"PATTERN_HORIZONTAL_BRICK"
    },
    {
        "values":[3,8,4,5,6,2],
        "background-image":"PATTERN_OUTLINED_DIAMOND"
    }
]
        

Patterns List

BACKWARD_DIAGONALBACKWARD_DIAGONAL
DARK_DOWNWARD_DIAGONALDARK_DOWNWARD_DIAGONAL
DARK_HORIZONTALDARK_HORIZONTAL
DARK_UPWARD_DIAGONALDARK_UPWARD_DIAGONAL
DARK_VERTICALDARK_VERTICAL
DASHED_DOWNWARD_DIAGONALDASHED_DOWNWARD_DIAGONAL
DASHED_HORIZONTALDASHED_HORIZONTAL
DASHED_UPWARD_DIAGONALDASHED_UPWARD_DIAGONAL
DASHED_VERTICALDASHED_VERTICAL
DIAGONAL_BRICKDIAGONAL_BRICK
DIAGONAL_CROSSDIAGONAL_CROSS
DIVOTDIVOT
DOTTED_DIAMONDDOTTED_DIAMOND
DOTTED_GRIDDOTTED_GRID
FORWARD_DIAGONALFORWARD_DIAGONAL
HORIZONTALHORIZONTAL
HORIZONTAL_BRICKHORIZONTAL_BRICK
LARGE_CHECKER_BOARDLARGE_CHECKER_BOARD
LARGE_GRIDLARGE_GRID
LIGHT_DOWNWARD_DIAGONALLIGHT_DOWNWARD_DIAGONAL
LIGHT_HORIZONTALLIGHT_HORIZONTAL
LIGHT_UPWARD_DIAGONALLIGHT_UPWARD_DIAGONAL
LIGHT_VERTICALLIGHT_VERTICAL
NARROW_HORIZONTALNARROW_HORIZONTAL
NARROW_VERTICALNARROW_VERTICAL
OUTLINED_DIAMONDOUTLINED_DIAMOND
PLAIDPLAID
SHADE_25SHADE_25
SHADE_50SHADE_50
SHADE_75SHADE_75
SHINGLESHINGLE
SMALL_CHECKER_BOARDSMALL_CHECKER_BOARD
SMALL_GRIDSMALL_GRID
SOLID_DIAMONDSOLID_DIAMOND
SPHERESPHERE
TRELLISTRELLIS
VERTICALVERTICAL
WAVEWAVE
WEAVEWEAVE
WIDE_DOWNWARD_DIAGONALWIDE_DOWNWARD_DIAGONAL
WIDE_UPWARD_DIAGONALWIDE_UPWARD_DIAGONAL
ZIGZAGZIGZAG

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.