Class: PieChart
Hierarchy
BaseChart<PieChartEventsTypes>↳
PieChart
Properties
svg
• Protected Optional svg: Svg
Inherited from
Defined in
container
• Protected Readonly container: Element
Inherited from
Defined in
eventEmitter
• Protected Readonly eventEmitter: EventEmitter
Inherited from
Defined in
data
• Protected data: PieChartData
Inherited from
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
| Name | Type | Default value | Description |
|---|---|---|---|
data? | Data<AllSeriesTypes> | undefined | Optional 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> | undefined | Optional 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. |
override | boolean | false | If 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
Inherited from
Defined in
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
Inherited from
Defined in
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
| Name | Type |
|---|---|
T | extends keyof PieChartEventsTypes |
Parameters
| Name | Type | Description |
|---|---|---|
event | T | Name of the event. Check the examples for supported events. |
listener | EventListener<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
Inherited from
Defined in
▸ on(event, listener): PieChart
Parameters
| Name | Type |
|---|---|
event | "*" |
listener | AllEventsListener<any> |
Returns
Inherited from
Defined in
▸ on(event, listener): PieChart
Parameters
| Name | Type |
|---|---|
event | string |
listener | EventListener<any> |
Returns
Inherited from
Defined in
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
| Name | Type |
|---|---|
T | extends keyof PieChartEventsTypes |
Parameters
| Name | Type | Description |
|---|---|---|
event | T | Name 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
Inherited from
Defined in
▸ off(event, listener?): PieChart
Parameters
| Name | Type |
|---|---|
event | "*" |
listener? | AllEventsListener<any> |
Returns
Inherited from
Defined in
▸ off(event, listener?): PieChart
Parameters
| Name | Type |
|---|---|
event | string |
listener? | EventListener<any> |
Returns
Inherited from
Defined in
initialize
▸ initialize(): void
Returns
void
Inherited from
Defined in
createChart
▸ createChart(options): void
Creates the pie chart
Parameters
| Name | Type |
|---|---|
options | PieChartOptionsWithDefaults |
Returns
void
Overrides
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
| Name | Type | Description |
|---|---|---|
query | null | string | Element | A selector query string or directly a DOM element |
data | PieChartData | The 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? | PieChartOptions | The 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...]] |