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

Pattern Name
BACKWARD_DIAGONAL PATTERN_BACKWARD_DIAGONAL
DARK_DOWNWARD_DIAGONAL PATTERN_DARK_DOWNWARD_DIAGONAL
DARK_HORIZONTAL PATTERN_DARK_HORIZONTAL
DARK_UPWARD_DIAGONAL PATTERN_DARK_UPWARD_DIAGONAL
DARK_VERTICAL PATTERN_DARK_VERTICAL
DASHED_DOWNWARD_DIAGONAL PATTERN_DASHED_DOWNWARD_DIAGONAL
DASHED_HORIZONTAL PATTERN_DASHED_HORIZONTAL
DASHED_UPWARD_DIAGONAL PATTERN_DASHED_UPWARD_DIAGONAL
DASHED_VERTICAL PATTERN_DASHED_VERTICAL
DIAGONAL_BRICK PATTERN_DIAGONAL_BRICK
DIAGONAL_CROSS PATTERN_DIAGONAL_CROSS
DIVOT PATTERN_DIVOT
DOTTED_DIAMOND PATTERN_DOTTED_DIAMOND
DOTTED_GRID PATTERN_DOTTED_GRID
FORWARD_DIAGONAL PATTERN_FORWARD_DIAGONAL
HORIZONTAL PATTERN_HORIZONTAL
HORIZONTAL_BRICK PATTERN_HORIZONTAL_BRICK
LARGE_CHECKER_BOARD PATTERN_LARGE_CHECKER_BOARD
LARGE_GRID PATTERN_LARGE_GRID
LIGHT_DOWNWARD_DIAGONAL PATTERN_LIGHT_DOWNWARD_DIAGONAL
LIGHT_HORIZONTAL PATTERN_LIGHT_HORIZONTAL
LIGHT_UPWARD_DIAGONAL PATTERN_LIGHT_UPWARD_DIAGONAL
LIGHT_VERTICAL PATTERN_LIGHT_VERTICAL
NARROW_HORIZONTAL PATTERN_NARROW_HORIZONTAL
NARROW_VERTICAL PATTERN_NARROW_VERTICAL
OUTLINED_DIAMOND PATTERN_OUTLINED_DIAMOND
PLAID PATTERN_PLAID
SHADE_25 PATTERN_SHADE_25
SHADE_50 PATTERN_SHADE_50
SHADE_75 PATTERN_SHADE_75
SHINGLE PATTERN_SHINGLE
SMALL_CHECKER_BOARD PATTERN_SMALL_CHECKER_BOARD
SMALL_GRID PATTERN_SMALL_GRID
SOLID_DIAMOND PATTERN_SOLID_DIAMOND
SPHERE PATTERN_SPHERE
TRELLIS PATTERN_TRELLIS
VERTICAL PATTERN_VERTICAL
WAVE PATTERN_WAVE
WEAVE PATTERN_WEAVE
WIDE_DOWNWARD_DIAGONAL PATTERN_WIDE_DOWNWARD_DIAGONAL
WIDE_UPWARD_DIAGONAL PATTERN_WIDE_UPWARD_DIAGONAL
ZIGZAG 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.