JavaScript Pie Chart

The Pie chart is a very popular chart used for visualization of data values by graphically representing their contribution to the whole. As part of Shield UI HTML5 JavaScript charting library this classical chart type offers users convenience, reliability and ease of use. The following image shows a common layout of the pie chart:

One of the convenience features is the legend interactivity. If added to it, the pie’s slices may be shown or hidden simply by clicking on the corresponding legend item- and this without any code from the user. For even more flexibility, the addToLegend property can be set to false, in order to add no items to the legend:

addToLegend: true,

As shown on the next image some of the pie’s slices have been hidden:

As to any of the Shield UI Charts users can easily apply additional formatting and styling to the Pie Chart type. We may place the legend on the top of the data area and round its corners by using the following simple code:

    chartLegend: {
      align: "center",
      borderRadius: 2,
      borderWidth: 2,
      verticalAlign: "top"
    }, 

And on the image below is the visual result of this code:

 An addition to the chart’s interactivity is the possibility for the selected pie’s slice to move away from the center. This behavior is being set by the enablePointSelection and the slicedOffset properties. The enablePointSelection property allows users to select each of the pie’s slices. And the slicedOffset property determines how far away the selected slice will move from the center. The code sample below shows a way of setting the two properties:

        enablePointSelection: true,
        slicedOffset: 50,

On the image below we can see the result:

One of the ways the pie charts differs from the other Shield UI charts, is that there is no possibility to zoom in. And among its typical features are the local and remote data binding, exporting and printing options. It is important to mention, that exporting allows the most recent state of the chart to be saved as a graphical file. This adds a lot of dynamics, since we can export not a static chart, but for instance a preselected slice.We may also hide some of the less important slices and that state of the chart that suits us best.

An editable live example for the Shield UI Pie Chart is available here: Live Example

More information and code samples for the Pie chart type can be found here: Documentation and examples