Creating a spacefilling chart

A spacefilling chart does not have a coordinate requirement. It occupies the available area with the chart. Treemap, heatmap, and gauge charts are some examples. Treemap and heatmap charts do not come with Sencha Charts. Gauges, however, does come along with it. Let's see how to use it in an application.

Create a project using Sencha Cmd with SCE as the application name. Edit the app/view/main/Main.js file and replace its contents with the following code:

Ext.define('SCE.view.main.Main', {
   extend: 'Ext.container.Container',

       xtype: 'app-main',
   
   layout: {
       type: 'fit'
   },

   items: {
       xtype: 'spacefilling',
       series: {
           type: 'gauge',
           minimum: 100,
           maximum: 800,
           value: 400,
           donut: 30,
           needle: true,
           colors: ['orange', 'blue']

       }
   }
});

The preceding code uses a spacefilling chart component to show a gauge with a needle.

The following output is produced...