View Full Version : Ext 4.0.7 Jumping Pie

11 Feb 2012, 1:17 PM
Apologies if this was answered elsewhere, I searched but couldn't find it. I am running into an issue where my pie chart jumps out of frame when I have zero values coming back for parts of my chart.

I can work around it by not sending those values back, but I have a secondary issue where I want to maintain the colors of each slice of pie, and if i don't send back all three of my values, the colors get wonky.

Below is an adaptation of the Pie Chart example code with my sample data so you can see the issue.



Ext.define('Ratings', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'data1', type: 'string'}
var testStore = Ext.create('Ext.data.Store', {
model: 'Ratings',
data : [{"name":"DataPart1","data1":"0"},{"name":"DataPart2","data1":"1"},{"name":"DataPart3","data1":"0"}]
var donut = false,
panel1 = Ext.create('widget.panel', {
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: testStore,
shadow: true,
legend: {
position: 'right'
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
highlight: {
segment: {
margin: 20
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'

12 Feb 2012, 8:00 AM
This was a bug and is mostly fixed in 4.1.0. The issue, that kind of is and isn't an Ext JS bug is that the labels for the zero values are on top of each other and hard to see. Not really a bug.

12 Feb 2012, 9:14 AM
Thanks, glad to hear its fixed in 4.1. I worked around it for now by not sending back 0 values and picking colors using a renderer.