Doughnut Chart

info

For all component features for this component, click Doughnut Chart page.
For plugin usage of this component, click Chart Data Labels page.

Example DoughnutChart

To set the width in the middle, use the cutoutPercentage prop.

Tooltip Label

tooltipLabel(context) event added to Charts component. Returns text to render for an individual item in the tooltip. The label can change the text that displays for a given data point.

For more detail Charts tooltip-callbacks

quick.return(context.formattedValue + " - " + context.label);

Samples Qjson

DoughnutChart
Charts_Custom_Legend_Sample
Charts_tooltipLabel_sample

Note

When the cutoutPercentage property is set to 0 in the DoughnutChart component, it appears as PieChart component.

Pie Chart

info

For all component features for this component, click Pie Chart page.
For plugin usage of this component, click Chart Data Labels page.

All of the component features(except options) can be use in this component.

All of the ChartDataLabels plugin features can be use in this component.

Example: PieChart

Tooltip Label

tooltipLabel(context) event added to Charts component. Returns text to render for an individual item in the tooltip. The label can change the text that displays for a given data point.

For more detail Charts tooltip-callbacks

quick.return(context.formattedValue + " - " + context.label);

Samples Qjson

Charts_Custom_Legend_Sample.qjson
Charts_tooltipLabel_sample.qjson