wijpiechart Step 3 of 3: Running the Project

In this step you will run the application and observe the new data and char elements that include titles for the X and Y axis, Chart header, and chart labels.

Press F5 to run the application.

Observe the following:

Hover over any of the pie chart series and notice a tooltip appears stating the value of the label property, and the Y value of that series.

The tooltip appears when the following code is used:

hint: {
                    content: function () {
                        return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
                    }
                },

Notice the title for the chart header appears when we used the following code:

header: {
                    text: "Steam - Mac Hardware"
                },

The five data series appear with numerical data. The following code is used to achieve the result:

               seriesList: [{
                    label: "MacBook Pro",
                    legendEntry: true,
                    data: 46.78,
                    offset: 15
                }, {
                    label: "iMac",
                    legendEntry: true,
                    data: 23.18,
                    offset: 0
                }, {
                    label: "MacBook",
                    legendEntry: true,
                    data: 20.25,
                    offset: 0
                }, {
                    label: "Mac Pro",
                    legendEntry: true,
                    data: 5.41,
                    offset: 0
                }, {
                    label: "Mac mini",
                    legendEntry: true,
                    data: 3.44,
                    offset: 0
                }],