Skip to content

April 16, 2012


Added Donut Chart support for HighChart ExtJs 4 extension

by Joe Kuan

Donut Chart support is added to the latest HighChart ExtJs 4 extension. The code and an example are included in my latest github. You can also try the demo in The example uses the same dataset as demonstrated in original Highchart example.

Donut chart basically contains two pie chart series that one is the subcategory of the other one, both series shares a single column of data. Based on the dataset from the Highchart example, the data model for the ExtJs Store would be:

fields: [ 'vendor', 'version', 'share' ]

So the returned Json data should look like this:

0: {version:MSIE 6.0, vendor:MSIE, share:10.85}
1: {version:MSIE 7.0, vendor:MSIE, share:7.35}
2: {version:MSIE 8.0, vendor:MSIE, share:33.06}
3: {version:MSIE 9.0, vendor:MSIE, share:2.81}

Vendor is the main category field (outer ring), whereas version (inner ring) is the drill down of each main category and share is the category data.

The following is the configuration setup for plotting a donut chart:

xtype: 'highchart',
series: [{
  type: 'pie',
  categorieField: 'vendor',
  dataField: 'share',
  name: 'Browsers',
  size: '60%',
  totalDataField: true,
  dataLabels: {
    formatter: function() {
      return this.y > 5 ? : null;
    color: 'white',
    distance: -30
  }, {
  type : 'pie',
  categorieField : 'version',
  dataField: 'share',
  name: 'Versions',
  innerSize: '60%',
    dataLabels: {
      formatter: function() {
        return this.y > 1 ? '<strong>'+ +':</strong> '+ this.y +'%'  : null;
chartConfig: {

Most of the configuration settings are derived from the original Highchart example, except the dataField, categorieField and totalDataField. The usages of dataField and categorieField are the same as how you normally use to plot a pie chart in the extension. Because the y-data of the main category, vendor, is the total of it’s own subcategory, an extra field, totalDataField, is required to tell the Highchart extension to compute it’s data differently.

However, if your server dataset already includes the main category total data, then you don’t need to specify totalDataField. All you need to do is to include an extra total field in your store’s model and redirect dataField to that extra field in your series config.

13 Comments Post a comment
  1. andres
    Apr 18 2012

    Excellent work, thanks a lot.

    It would be sent as part of parameter the color, as does the demo of the pie (
    In the api documentation is in # series – data

    data: [{
    name: ‘Point 1’,
    color: ‘#00FF00’,
    y: 0
    }, {
    name: ‘Point 2’,
    color: ‘#FF00FF’,
    y: 5

  2. andres
    Apr 18 2012

    I have a problem, In you demo when I resize the page the chart disapear .

    Thanks Andres

    • Joe Kuan
      Apr 18 2012

      Which browser are you using? I can’t get it to disappear when I resize the browser.

      • andres
        Apr 20 2012


      • Joe Kuan
        Apr 21 2012

        I have tested with Chrome (18.0.1025.162 m) on my Windows 7 Ultimate box and it all works fine. I resize the browser and the chart redraws fine.

      • andres
        Apr 23 2012
      • Joe Kuan
        Apr 23 2012

        Please can you email me your code instead?

      • andres
        Apr 23 2012

        I only dounload the code from in zip format and run

      • Joe Kuan
        Apr 23 2012

        Are you running it with Apache? And what version is your chrome?

      • andres
        Apr 24 2012

        I have LAMP and Chrome 18.0.1025.162

  3. Gerd
    Aug 15 2012

    Thats really a great work. I hope you will also add the new Highcharts 2.3beta to this extension. The areareange is a very useful chart and it would be great if we can create it with ExtJS4.
    Here you can find few more examples:

  4. How could use it in an MVC project?
    Thank you.

    • Joe Kuan
      Nov 18 2014

      Sorry for the late reply. As far as I know, it shouldn’t have any problem in MVC project. However, I still haven’t come around to fix with the SenchaCmd yet.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: