Pie Chart
This interactive Pie chart is rendered within the browser using SVG.
Methods
Main Methods
Name | Return | Description |
---|---|---|
.Chart (id, 'pie', series, options) | this | Creates, draws and returns the Chart object. |
attachTooltip (xmlString, width, height) | this | Attachs a user defined tooltip to the selected element. The user defined HTML5 tooltip is included in a SVG foreignObject element (requires IE12+). |
Event Methods
Name | Return | Description |
---|---|---|
.addEventListener (type, listener) | this | Registers the specified listener on the EventTarget it's called on. |
.addOneTimeEventListener (type, listener) | this | Registers the specified listener on the EventTarget it's called on for a one-time event. |
.removeEventListener (type, listener) | this | Removes the event listener previously registered with addEventListener (). |
.on (type, listener) | this | Alias on addEventListener (). |
.one (type, listener) | this | Alias on addOneTimeEventListener (). |
.off (type, listener) | this | Alias on removeEventListener (). |
Event Types
Attribute | Type | Object | Info |
---|---|---|---|
'over' | String | OverEvent | Fired when the mouse enters on a new element. |
'out' | String | - | Fired when the mouse leaves the selected element. |
Event Objects
OverEvent
Attribute | Type | Info |
---|---|---|
x | null | The x-axis value of the SVG element(s) that fired the event. It is null for a Pie Chart. |
series | Array | The attributes of the selected SVG element(s). The array contains one object per SVG element(s). |
series[n].label | String | The name of the serie. |
series[n].value | String | The y value of the SVG element. |
series[n].color | String | The color associated to this SVG element. |
Series Options
The series are specified in an array of objects. The serie object has the following attributes:
Attribute | Type | Default | Info |
---|---|---|---|
label | String | empty | The name of the data value. |
prefix | String | The prefix attribute. | |
suffix | String | The suffix attribute. | |
type | String | pie | Unused. |
Value | Number | Value of a Pie slice. | |
style | Object | null | The style to apply to the SVG elements that belong to the serie. By default, the css style is applied. |
style.fillColor | String | undefined | The fill color attribute. |
style.fillOpacity | Number | undefined | The color opacity attribute. |
style.stroke | String | undefined | The stroke color attribute. |
style.strokeOpacity | Number | undefined | The stroke color opacity attribute. |
style.strokeWidth | Number | undefined | The stroke width attribute. |
over | Object | null | The style to apply to the SVG elements that belong to the serie when the mouse is over the element. By default, the css style is applied. |
over.fillColor | String | undefined | The fill color attribute. |
over.fillOpacity | Number | undefined | The color opacity attribute. |
over.stroke | String | undefined | The stroke color attribute. |
over.strokeOpacity | Number | undefined | The stroke color opacity attribute. |
over.strokeWidth | Number | undefined | The stroke width attribute. |
Chart Options
Attribute | Type | Default | Info |
---|---|---|---|
chart | Object | The attributes of the chart. | |
chart.type | String | 'pie' | The type of Pie chart (currently, 'pie' option only). |
chart.hole | Number | 0 | The size of the pie hole from 0 to 1. |
chart.width | Number | 350 | The outer width of the chart. |
chart.height | Number | 250 | The outer height of the chart. |
chart.grid | Object | - | The position and the size of the chart inside the outer box. |
chart.grid.x | Number | - | The horizontal position of the pie center. |
chart.grid.y | Number | - | The vertical position of the pie center. |
chart.grid.width | Number | - | The width of the chart. |
chart.grid.height | Number | - | The height of the chart. |
chart.grid.margin | Object | The inner box margins. | |
chart.grid.margin.top | Number | 0 | The inner box top margin. |
chart.grid.margin.left | Number | 0 | The inner box left margin. |
chart.grid.margin.right | Number | 0 | The inner box right margin. |
chart.grid.margin.bottom | Number | 0 | The inner box bottom margin. |
title | Object | The title attributes. | |
title.label | String | The name of the title. | |
title.x | Number | - | The horizontal anchor position of the title. |
title.y | Number | - | The vertical anchor position of the title. |
subtitle | Object | The subtitle attributes. | |
subtitle.label | String | The text for the subtitle. | |
subtitle.x | Number | - | The horizontal anchor position of the subtitle. |
subtitle.y | Number | - | The vertical anchor position of the subtitle. |
legend | Object | The legend attributes. | |
legend.enabled | Boolean | true | Enables or disables the legend. |
legend.floating | Boolean | true | Enables or not the legend to float above the map. |
legend.layout | String | vertical | The legend could be horizontal or vertical. |
legend.align | Object | The legend position on the grid. | |
legend.align.horizontal | String | right | The legend position on x axis could be: left, right or middle |
legend.align.vertical | String | top | The legend position on y axis could be: top, bottom or middle |
legend.shift | Object | The shift position of the legend on the grid. | |
legend.shift.x | Number | 0 | Moves slightly the legend on the x direction. |
legend.shift.y | Number | 0 | Moves slightly the legend on the y direction. |
legend.icon | Object | The icon rectangle size. | |
legend.icon.width | Number | 10 | The icon rectangle width. |
legend.icon.height | Number | 10 | The icon rectangle height. |
tooltip | Object | The tooltip attributes. | |
tooltip.enabled | Boolean | true | Enables (true) or disables (false) the tooltip. |
tooltip.animated | Boolean | true | smoothly moves (true) or not (false) the tooltip from previous item to current. |
- means a computed value.