ZoomCharts Documentation

Display style

This page describes how to specify the visual look for pie chart.

When a pie or slice is added or updated, style calculation takes place.

Pie style

Pie object has the following style attributes:

• brightness = 1 - brightness applied to pie line and fill color. In range [0..2], where 0 = black, 1 = unchanged, and 2 = white
• fillColor = null - pie background fill color, useful while pie slices are loading
• sliceColors - array of colors to use for coloring slices.
• colorDistribution = "list" - slice color distribution mode:
• "list" - apply each slice a color from the sliceColors array, start from beginning when exhausted.
• "gradient" - use the colors array to create a gradient. Distribute slices evenly on it.
• "gradientProportional" - use the colors array to create a gradient. Distribute slices based on their size.

The pie style is computed in following steps:

• initial style is applied from settings.pie.style.
• noDataStyle, backgroundStyle, backgroundHoveredStyle are applied as needed.
• settings.pie.styleFunction is called.

Pie style function

Style function is called with the following parameters: styleFunction(pie). See Object Structure section for info on pie read-only fields you can use in style function.

Slice style

Slice object have the following style attributes.

• fillColor = null - fill color of the slice.
• lineColor = null - color of slice outline.
• lineWidth = 1 - width of the slice outline.
• label = null - label text outside of pie.
• insideLabel = null - label text inside the slice.
• url = null - url to open on click.
• icon = null - icon to display on slice.
• brightness = 1 - brightness applied to slice line and fill color. In range [0..2], where 0 = black, 1 = unchanged, and 2 = transparent.
• expandable = true - if true, the default click behavior is to expand the slice.
• cutoutDistance = 0 - distance in pixels how far the slice is moved away from pie.
• labelStyle = null - custom style for slice outside labels. See labels section for details.
• insideLabelStyle = null - custom style for slice inside labels. See labels section for details.

The slice style calculation uses multiple steps to compute the final style.

• slice colors are computed from the pie style.
• initial style is applied from settings.slice.style.
• othersStyle, previousStyle, selectedStyle, hoverStyle are applied as needed.
• slice data style attribute is applied if present.
• backgroundStyle, backgroundActiveStyle are applied as needed.
• settings.slice.styleFunction is called.

Slice style function

Style function is called with the following parameters: styleFunction(slice, slice.data). See Object Structure section for info on pie read-only fields you can use in style function.

The default slice style function is:

    slice.label = slice.percent.toFixed(1) + "%";
    if (slice.data.name) {
       slice.label = slice.data.name + " " + slice.label;
    }