PDA

View Full Version : [CLOSED] Area series mixed with line series doesn't take right color with turned-on animation



Baidaly
15 Apr 2013, 3:40 PM
REQUIRED INFORMATION


Ext version tested:


Ext 4.2.0.663



Browser versions tested against:


Chrome 26.0.1410.64 m
FF19.0



Description:


Area series mixed with line series doesn't take right color from a custom theme with turned-on animation



Steps to reproduce the problem:


Create new chart theme
Create the Chart with line and area series
Set animate parameter to true and set chart theme



The result that was expected:


Area series takes the color from theme



The result that occurs instead:


Area series takes wrong color



Test Case:



Ext.onReady(function () {
Ext.define('Ext.chart.theme.MyTheme', {
extend: 'Ext.chart.theme.Base',
constructor: function (config) {
this.callParent([Ext.apply({
id: "MyChartTheme",
colors: ['#000000', '#99CC00', '#FFFF00', '#FF6600', '#FF0000']
}, config)]);
}
});

Ext.create("Ext.panel.Panel", {
id: "Panel1",
height: 500,
renderTo: Ext.getBody(),
width: 800,
items: [{
id: "Chart1",
style: "background:#fff;",
xtype: "chart",
flex: 1,
axes: [{
position: "bottom",
title: "Time",
fields: ["Date"],
type: "Time",
dateFormat: "Y, M d"
}, {
position: "left",
title: "Value",
fields: ["Data", "Low"],
type: "Numeric"
}
],
legend: true,
series: [{
showInLegend: false,
xField: "Date",
yField: "Data",
type: "line",
smooth: 3
}, {
xField: "Date",
yField: "Low",
type: "area",
style: {
"opacity": 0.93
}
}
],
theme: "MyTheme",
store: {
model: Ext.define("App.Model2", {
extend: "Ext.data.Model",
fields: [{
name: "Date",
type: "date",
dateFormat: "Y-m-d\\TH:i:s"
}, {
name: "Data",
type: "int"
}, {
name: "Low",
type: "int",
defaultValue: 2
}
],
idProperty: "ID"
}),
storeId: "Store1",
autoLoad: true,
proxy: {
data: [{
"Date": "2013-04-13T00:00:00",
"Data": 1
}, {
"Date": "2013-04-13T06:00:00",
"Data": 3
}
],
type: 'memory'
}
}
}, {
id: "Chart2",
style: "background:#fff;",
xtype: "chart",
flex: 1,
axes: [{
position: "bottom",
title: "Time",
fields: ["Date"],
type: "Time",
dateFormat: "Y, M d"
}, {
position: "left",
title: "Value",
fields: ["Data", "Low"],
type: "Numeric"
}
],
animate: true,
legend: true,
series: [{
showInLegend: false,
xField: "Date",
yField: "Data",
type: "line",
smooth: 3
}, {
xField: "Date",
yField: "Low",
type: "area",
style: {
"opacity": 0.93
}
}
],
theme: "MyTheme",
store: "Store1"
}
],
layout: {
type: "hbox",
align: "stretch"
}
});
});



HELPFUL INFORMATION

Screenshot or Video:
43155

Possible fix:


Disable animation



Additional CSS used:


only default ext-all.css



Operating System:


Win7 Pro

slemmon
16 Apr 2013, 6:39 AM
Thanks for the report! I have opened a bug in our bug tracker.