-
Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog2.0
- RTL version
-
Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- Dimple library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Data tables
- Data tables extensions
- Handsontable
- Responsive tables
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
A pie chartis a divided into sectors, illustrating numerical proportion. In a pie chart, the arc length of each sector (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.
By default, piecharts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngleoption. Here, we rotate the chart clockwise 180 degrees with an option of pieStartAngle: 180. So chosen because that particular angle happens to make the slices reflected.
A donut chartis functionally identical to a pie chart, with the exception of a blank center and the ability to support multiple statistics at once. donut charts provide a better data intensity ratio to standard pie charts since the blank center can be used to display additional related data.
By default, donutcharts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngleoption. Here, we rotate the chart clockwise 180 degrees with an option of pieStartAngle: 180. So chosen because that particular angle happens to make the slices reflected.
A 3D piechart is used to give the chart a 3D look. Often used for aesthetic reasons, the third dimension does not improve the reading of the data; on the contrary, these plots are difficult to interpret because of the distorted effect of perspective associated with the third dimension. The use of superfluous dimensions not used to display the data of interest is discouraged for charts in general, not only for pie charts.
Example of pie charts withexplodedslices. Pie slices can be separated from the rest of the chart with the offset property of the slices option. To separate a slice, create a slices object and assign the appropriate slice number an offset between 0 and 1. Below, we assign progressively larger offsets to slices 4 (Gujarati), 12 (Marathi), 14 (Oriya), and 15 (Punjabi). Examples below display both pie and donut chart versions.
Inner circle radius
Example of diffpie chart with radiusfactor - the relative size of the circles can be controlled with diff.innerCircle.radiusFactoroption.
Inner circle transparency
Example of diffpie chart with transparency- the transparency of each data can be controlled with diff.oldData.opacityand diff.newData.opacity.
Inner circle border
Example of diffpie chart with borderfactor - the border between the two datas can be controlled with diff.innerCircle.borderFactoroption.
Inverted difference
Example of diffpie chart with invertedbehaviour - the behavior can be inverted so that the oldest data surrounds the newest data with diff.oldData.inCenteroption.