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.
See the Pen amCharts 4: Pre-pulled slice (1) by amCharts (@amcharts) on CodePen.24419
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:
See the Pen amCharts 4: Pre-pulled slice (2) by amCharts (@amcharts) on CodePen.24419
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:
See the Pen amCharts 4: Pre-pulled slice (3) by amCharts (@amcharts) on CodePen.24419
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
.