ZoomCharts Documentation

Style

Each series configuration can have a style tag that determines the rendering of the series.

There are three types of series rendering: "columns", "line" and "candlestick". Each type has a slightly different options available.

Please see chartTypes section in the API reference / Settings for available fields and their default values.

Time chart currently has no support for dynamic style functions. It might be added in future versions.

Column colors

• fillColor - is used to set solid color for columns.

• fillGradient - Allows building a gradient fill, by default bound to values.

Bound to values example: [[-20, 'rgba(0,0,255,0.4)'],[30,'rgba(255,0,0,0.7)']]

If fillGradientMode is set to "vertical" or "horizontal" then gradient is bound to fraction instead of actual values, meaning that array value should be in interval from 0 to 1. Example with fraction: [[0,"black"],[0.5,"red"],[1, "orange"]]

• fillGradientMode - Fill gradient orientation (vertical, horizontal). In use with fillGradient property. "null" for default fillGradient mode.

• fillGradientType - Fill gradient type lets you have automated fillGradient steps based on different shapes. Currently we have one such shape: cylinder.

• fillPattern - Specifies the URL to the image that will be used as the repeated fill pattern for the series. When fillPattern is specified, fillGradient is ignored. If fillColor is specified together with fillPattern, it will be used as the background color for the pattern.

• gradient - for example if you have solid color, then decreasing this value will render bottom part of columns slightly darker than top part of the column.

Columns with custom gradient:

Columns with gradient and automatic cylinder shape in horizontal orientation:

Columns with gradient in vertical orientation:

Line and Area colors

• lineColor - solid line color.

• fillColor - the color that will fill all the area from zero line to actual values. Can be used to create area charts instead of just line charts.

• fillGradient - Allows building a gradient fill. Bound to values. Currently lines doesn't offer fillGradientMode and so gradient based on fraction (0-1) won't work.

An example of how to set series style:

    series : [
        {
            name:"Max temperature",
            id:"series1",
            type:"line",
            data:{
                index: 1,
            },
            style:{
                fillColor:"red",
                //fillGradient:[[-20,"rgba(0,0,255,0.4)"],[30,"rgba(255,0,0,0.7)"]]
            }
        }
    ]