Docs Back to Docs

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

PatternName
BACKWARD_DIAGONALPATTERN_BACKWARD_DIAGONAL
DARK_DOWNWARD_DIAGONALPATTERN_DARK_DOWNWARD_DIAGONAL
DARK_HORIZONTALPATTERN_DARK_HORIZONTAL
DARK_UPWARD_DIAGONALPATTERN_DARK_UPWARD_DIAGONAL
DARK_VERTICALPATTERN_DARK_VERTICAL
DASHED_DOWNWARD_DIAGONALPATTERN_DASHED_DOWNWARD_DIAGONAL
DASHED_HORIZONTALPATTERN_DASHED_HORIZONTAL
DASHED_UPWARD_DIAGONALPATTERN_DASHED_UPWARD_DIAGONAL
DASHED_VERTICALPATTERN_DASHED_VERTICAL
DIAGONAL_BRICKPATTERN_DIAGONAL_BRICK
DIAGONAL_CROSSPATTERN_DIAGONAL_CROSS
DIVOTPATTERN_DIVOT
DOTTED_DIAMONDPATTERN_DOTTED_DIAMOND
DOTTED_GRIDPATTERN_DOTTED_GRID
FORWARD_DIAGONALPATTERN_FORWARD_DIAGONAL
HORIZONTALPATTERN_HORIZONTAL
HORIZONTAL_BRICKPATTERN_HORIZONTAL_BRICK
LARGE_CHECKER_BOARDPATTERN_LARGE_CHECKER_BOARD
LARGE_GRIDPATTERN_LARGE_GRID
LIGHT_DOWNWARD_DIAGONALPATTERN_LIGHT_DOWNWARD_DIAGONAL
LIGHT_HORIZONTALPATTERN_LIGHT_HORIZONTAL
LIGHT_UPWARD_DIAGONALPATTERN_LIGHT_UPWARD_DIAGONAL
LIGHT_VERTICALPATTERN_LIGHT_VERTICAL
NARROW_HORIZONTALPATTERN_NARROW_HORIZONTAL
NARROW_VERTICALPATTERN_NARROW_VERTICAL
OUTLINED_DIAMONDPATTERN_OUTLINED_DIAMOND
PLAIDPATTERN_PLAID
SHADE_25PATTERN_SHADE_25
SHADE_50PATTERN_SHADE_50
SHADE_75PATTERN_SHADE_75
SHINGLEPATTERN_SHINGLE
SMALL_CHECKER_BOARDPATTERN_SMALL_CHECKER_BOARD
SMALL_GRIDPATTERN_SMALL_GRID
SOLID_DIAMONDPATTERN_SOLID_DIAMOND
SPHEREPATTERN_SPHERE
TRELLISPATTERN_TRELLIS
VERTICALPATTERN_VERTICAL
WAVEPATTERN_WAVE
WEAVEPATTERN_WEAVE
WIDE_DOWNWARD_DIAGONALPATTERN_WIDE_DOWNWARD_DIAGONAL
WIDE_UPWARD_DIAGONALPATTERN_WIDE_UPWARD_DIAGONAL
ZIGZAGPATTERN_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.