Pie chart is a type of graph in which a circle is divided into sectors that each represent a proportion of the whole. Pie charts are very widely used in the business world and the mass media.
Pie charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. They are excellent at showing the relational proportions between data.
Here i am using chartjs library for creating pie chart.
The final code & demo is here
Demo
Pie charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. They are excellent at showing the relational proportions between data.
Here i am using chartjs library for creating pie chart.
Example Usage
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
})
;
Dataset Properties
The pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a the dataset's arc are generally set this way.| Name | Type | Description |
|---|---|---|
| label | String | The label for the dataset which appears in the legend and tooltips. |
| backgroundColor | Color[] | The fill color of the arcs in the dataset. |
| borderColor | Color[] | The border color of the arcs in the dataset. |
| borderWidth | Number[] | The border width of the arcs in the dataset. |
| hoverBackgroundColor | Color[] | The fill colour of the arcs when hovered. |
| hoverBorderColor | Color[] | The stroke colour of the arcs when hovered. |
| hoverBorderWidth | Number[] | The stroke width of the arcs when hovered. |
Config Options
These are the customisation options specific to Pie charts. These options are merged with the global chart configuration options, and form the options of the chart.| Name | Type | Default | Description |
|---|---|---|---|
| cutoutPercentage | Number | 0 - for pie | The percentage of the chart that is cut out of the middle. |
| rotation | Number | -0.5 * Math.PI | Starting angle to draw arcs from. |
| circumference | Number | 2 * Math.PI | Sweep to allow arcs to cover |
| animation.animateRotate | Boolean | true | If true, the chart will animate in with a rotation animation. This property is in the options.animation object. |
| animation.animateScale | Boolean | false | If true, will animate scaling the chart from the center outwards. |
Data Structure
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. You also need to specify an array of labels so that tooltips appear correctlydata = {You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
The final code & demo is here
Demo
No comments:
Post a Comment