Pie chart with pre-pulled slice(s)

If you would like your Pie chart to start off with one or more of its slices pulled out, there are a few ways to do so. This tutorial will show how.

Base chart

We’re going use a very basic Pie chart as our test subject.

Open in CodePen

Next we’re going to examine two ways to make one of its slices pre-pulled.

Using property fields

Property fields (as defined in propertyFields) is a way to bind element’s specific property to a key in related data.

More info

For more info on property fields, make sure you take a look at “Property fields” section in our “Data” article.

In this case we’ll be using propertyFields of our Pie series slice template:

pieSeries.slices.template.propertyFields.isActive = "pulled";

pieSeries.slices.template.propertyFields.isActive = "pulled";

{
  // ...
  "series": [{
    // ...
    "slices": {
      "propertyFields": {
        "isActive": "pulled"
      }
    }
  }]
}

What the above means, that slice whose data item contains pulled key will have its isActive property (which indicates whether a slice is pulled or not) set to that value. So, if, say, second, data item contains pulled: true, the second slice will be pre-pulled when chart initializes.

Here’s an example of such data:

[{
  "country": "Lithuania",
  "litres": 420
}, {
  "country": "Czech Republic",
  "litres": 280,
  "pulled": true
}, {
  "country": "Ireland",
  "litres": 201
}, {
  "country": "Germany",
  "litres": 165
}, {
  "country": "Australia",
  "litres": 139
}, {
  "country": "Austria",
  "litres": 128
}]

And here’s a life version:

Open in CodePen

Using config field

The above method does the job. However, there’s another - more powerful method: config field.

More info

The “Config field” section in “Data” tutorial holds more details. We’re just going to touch it briefly here.

A config field allows pointing element to an object in data that holds not one, but whole bunch of property values, including ones that can be applied to element’s sub-elements.

pieSeries.slices.template.configField = "config";

pieSeries.slices.template.configField = "config";

{
  // ...
  "series": [{
    // ...
    "configField": "config"
  }]
}

It’s much more powerful than the property fields approach, but, slower. When element (a slice template in our case) encounters an object in data (using configField setting), it will try to set each of the key/values to element’s properties, and will also dig in deeper to modify or create its children.

Here’s how data might look like for the same chart:

[{
  "country": "Lithuania",
  "litres": 420
}, {
  "country": "Czech Republic",
  "litres": 280,
  "config": {
    "isActive": true
  }
}, {
  "country": "Ireland",
  "litres": 201
}, {
  "country": "Germany",
  "litres": 165
}, {
  "country": "Australia",
  "litres": 139
}, {
  "country": "Austria",
  "litres": 128
}]

Let’s see if this will worked:

Open in CodePen

Conclusion

Both methods are legit and usable. In choosing the method follow these rules of thumb:

• If you are overriding a single or just a few properties, use propertyFields.
• If you are overriding a lot of properties and/or need to also set/create stuff on element’s children, use configField.