Book Image

Sencha Charts Essentials

By : Ajit Kumar
Book Image

Sencha Charts Essentials

By: Ajit Kumar

Overview of this book

Table of Contents (16 chapters)
Sencha Charts Essentials
About the Author
About the Reviewers

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...