Creating a Sales by Film Category chart

Ext JS provides a great set of visual charts we can implement, and users love things like this. For this reason, we will implement a chart using three different series (pie, column, and bar) where the user can see the Sales by Film Category.

The following is a screenshot of the final result we will have at the end of this topic. As we can see in the following screenshot, we have the chart. Above it, we have a toolbar with two buttons: Change Chart Type, where the user will be able to change the chart series from Pie to Column or Bar, and the Download Chart button, where the user will be able to download the chart in the following formats: Download as Image or Download as PDF. Here's the screenshot we are discussing:

Ext JS 5 charts and terminology

Before we start coding, let's understand a little bit about how Ext JS charts work. Ext JS 4 introduced great charting capabilities by leveraging the HTML5 canvas and SVG features. However, in Ext JS 5, the...