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_DIAGONAL

DARK_DOWNWARD_DIAGONAL

DARK_HORIZONTAL

DARK_UPWARD_DIAGONAL

DARK_VERTICAL

DASHED_DOWNWARD_DIAGONAL

DASHED_HORIZONTAL

DASHED_UPWARD_DIAGONAL

DASHED_VERTICAL

DIAGONAL_BRICK

DIAGONAL_CROSS

DIVOT

DOTTED_DIAMOND

DOTTED_GRID

FORWARD_DIAGONAL

HORIZONTAL

HORIZONTAL_BRICK

LARGE_CHECKER_BOARD

LARGE_GRID

LIGHT_DOWNWARD_DIAGONAL

LIGHT_HORIZONTAL

LIGHT_UPWARD_DIAGONAL

LIGHT_VERTICAL

NARROW_HORIZONTAL

NARROW_VERTICAL

OUTLINED_DIAMOND

PLAID

SHADE_25

SHADE_50

SHADE_75

SHINGLE

SMALL_CHECKER_BOARD

SMALL_GRID

SOLID_DIAMOND

SPHERE

TRELLIS

VERTICAL

WAVE

WEAVE

WIDE_DOWNWARD_DIAGONAL

WIDE_UPWARD_DIAGONAL

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.