Skip to main content

Class: PieChart

Hierarchy

Properties

svg

Protected Optional svg: Svg

Inherited from

BaseChart.svg

Defined in

charts/BaseChart.ts:11


container

Protected Readonly container: Element

Inherited from

BaseChart.container

Defined in

charts/BaseChart.ts:12


eventEmitter

Protected Readonly eventEmitter: EventEmitter

Inherited from

BaseChart.eventEmitter

Defined in

charts/BaseChart.ts:13


data

Protected data: PieChartData

Inherited from

BaseChart.data

Defined in

charts/PieChart/PieChart.ts:179

Methods

update

update(data?, options?, override?): PieChart

Updates the chart which currently does a full reconstruction of the SVG DOM

Parameters

NameTypeDefault valueDescription
data?Data<AllSeriesTypes>undefinedOptional data you'd like to set for the chart before it will update. If not specified the update method will use the data that is already configured with the chart.
options?Options<AxisOptions, AxisOptions>undefinedOptional options you'd like to add to the previous options for the chart before it will update. If not specified the update method will use the options that have been already configured with the chart.
overridebooleanfalseIf set to true, the passed options will be used to extend the options that have been configured already. Otherwise the chart default options will be used as the base

Returns

PieChart

Inherited from

BaseChart.update

Defined in

charts/BaseChart.ts:67


detach

detach(): PieChart

This method can be called on the API object of each chart and will un-register all event listeners that were added to other components. This currently includes a window.resize listener as well as media query listeners if any responsive options have been provided. Use this function if you need to destroy and recreate Chartist charts dynamically.

Returns

PieChart

Inherited from

BaseChart.detach

Defined in

charts/BaseChart.ts:110


on

on<T>(event, listener): PieChart

Use this function to register event handlers. The handler callbacks are synchronous and will run in the main thread rather than the event loop.

Type parameters

NameType
Textends keyof PieChartEventsTypes

Parameters

NameTypeDescription
eventTName of the event. Check the examples for supported events.
listenerEventListener<PieChartEventsTypes[T]>The handler function that will be called when an event with the given name was emitted. This function will receive a data argument which contains event data. See the example for more details.

Returns

PieChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:130

on(event, listener): PieChart

Parameters

NameType
event"*"
listenerAllEventsListener<any>

Returns

PieChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:134

on(event, listener): PieChart

Parameters

NameType
eventstring
listenerEventListener<any>

Returns

PieChart

Inherited from

BaseChart.on

Defined in

charts/BaseChart.ts:135


off

off<T>(event, listener?): PieChart

Use this function to un-register event handlers. If the handler function parameter is omitted all handlers for the given event will be un-registered.

Type parameters

NameType
Textends keyof PieChartEventsTypes

Parameters

NameTypeDescription
eventTName of the event for which a handler should be removed
listener?EventListener<PieChartEventsTypes[T]>The handler function that that was previously used to register a new event handler. This handler will be removed from the event handler list. If this parameter is omitted then all event handlers for the given event are removed from the list.

Returns

PieChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:147

off(event, listener?): PieChart

Parameters

NameType
event"*"
listener?AllEventsListener<any>

Returns

PieChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:151

off(event, listener?): PieChart

Parameters

NameType
eventstring
listener?EventListener<any>

Returns

PieChart

Inherited from

BaseChart.off

Defined in

charts/BaseChart.ts:152


initialize

initialize(): void

Returns

void

Inherited from

BaseChart.initialize

Defined in

charts/BaseChart.ts:159


createChart

createChart(options): void

Creates the pie chart

Parameters

NameType
optionsPieChartOptionsWithDefaults

Returns

void

Overrides

BaseChart.createChart

Defined in

charts/PieChart/PieChart.ts:197

Constructors

constructor

new PieChart(query, data, options?, responsiveOptions?)

This method creates a new pie chart and returns an object that can be used to redraw the chart.

Example

// Simple pie chart example with four series
new PieChart('.ct-chart', {
series: [10, 2, 4, 3]
});

Example

// Drawing a donut chart
new PieChart('.ct-chart', {
series: [10, 2, 4, 3]
}, {
donut: true
});

Example

// Using donut, startAngle and total to draw a gauge chart
new PieChart('.ct-chart', {
series: [20, 10, 30, 40]
}, {
donut: true,
donutWidth: 20,
startAngle: 270,
total: 200
});

Example

// Drawing a pie chart with padding and labels that are outside the pie
new PieChart('.ct-chart', {
series: [20, 10, 30, 40]
}, {
chartPadding: 30,
labelOffset: 50,
labelDirection: 'explode'
});

Example

// Overriding the class names for individual series as well as a name and meta data.
// The name will be written as ct:series-name attribute and the meta data will be serialized and written
// to a ct:meta attribute.
new PieChart('.ct-chart', {
series: [{
value: 20,
name: 'Series 1',
className: 'my-custom-class-one',
meta: 'Meta One'
}, {
value: 10,
name: 'Series 2',
className: 'my-custom-class-two',
meta: 'Meta Two'
}, {
value: 70,
name: 'Series 3',
className: 'my-custom-class-three',
meta: 'Meta Three'
}]
});

Parameters

NameTypeDescription
querynull | string | ElementA selector query string or directly a DOM element
dataPieChartDataThe data object in the pie chart needs to have a series property with a one dimensional data array. The values will be normalized against each other and don't necessarily need to be in percentage. The series property can also be an array of value objects that contain a value property and a className property to override the CSS class name for the series group.
options?PieChartOptionsThe options object with options that override the default options. Check the examples for a detailed list.
responsiveOptions?ResponsiveOptions<PieChartOptions>Specify an array of responsive option arrays which are a media query and options object pair => [[mediaQueryString, optionsObject],[more...]]

Overrides

BaseChart.constructor

Defined in

charts/PieChart/PieChart.ts:177