Tip:
Highlight text to annotate it
X
In this video we’ll look at how to add the dxPieChart widget from the ChartJS library
onto a web page. Let’s get started. I’ve already created a simple web page and added
a reference to the JavaScript file where I’m planning to set configuration options for
the dxPieChart widget. Now, I am going to reference the chartjs library. I will use
the NuGet way to download this library into my sample. For this purpose, right-click the
Solution in the Solution Explorer and then click “Manage NuGet Packages” in the invoked
menu. Type “ChartJS” in the search box and then click Install. As you can see, NuGet
retrieves the chartjs library from the specified package source and installs it to the project.
Since chartjs depends on the “globalize” and “jQuery” libraries, NuGet installs
them as well. As any widget from the ChartJS library, the dxPieChart widget can be created
using the JQuery or Knockout approach. Here I’m using the jQuery approach and creating
the pie chart using the dxPieChart plugin. First of all, we need to set a data source
for the PieChart. I’ve prepared an array of objects representing points to be displayed
on the PieChart. Let’s assign it to the chart’s ‘dataSource’ property. Now,
we need to define a series. I’ll set the ‘argument’ data source field as a field
that provides arguments for the series, and the ‘value’ field as a field that provides
values. That’s all. Let’s see how the PieChart looks with the specified data. As
you can see, the ‘pie’ series type is used by default. We can easily change the
series type to ‘doughnut’ by specifying the series ‘type’ property. Let’s see
the result. If required, you can change the default size of the doughnut’s hole by setting
a required fraction of the inner radius. The next step is to make labels of the doughnut
slices visible. I’ll make label connectors visible as well. As you can see, the labels
display a value displayed by a slice. Let’s apply the ‘large number’ format and customize
the displayed text. For this purpose, I’ll introduce a callback function and return the
required text. Let’s see the result. Okay. It would be appropriate to also show each
slice’s size in percentage. For this purpose, I’ll enable tooltips and introduce the ‘customizeText’
callback. Let’s see the result. The last thing I will change is the precision of the
value displayed in the tooltips. To use a specified precision, we need to return the
‘percentText’ property value. That’s all. See the result. In addition, when publishing
a project on the server, you may wish to use a link to the ChartJS library from the Content
Delivery Network (CDN). Let’s copy this link from our documentation to see how it
works. The ‘customizeText function, ‘format’ and ‘precision’ options are available
for all labels in all ChartJS widgets. For details, refer to the documentation located
on our site. Thanks for watching and thank you for choosing DevExpress.