Hi Team,
I would like to plot the stack area chart with one series in transparent colour, so that the plotband should be visible with actual colour.
$("#chart").kendoChart({
title: {
text: "Browser Usage Trends"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
stack: true
},
series: [{
name: "Chrome",
data: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6]
},{
name: "Firefox",
data: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7]
},{
name: "Internet Explorer",
color:"#ffffff",
data: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2]
},{
name: "Mozilla",
data: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0]
}],
valueAxis: {
labels: {
format: "{0}%"
},
line: {
visible: false
},
axisCrossingValue: -10,
max: 100
},
categoryAxis: {
plotBands: [{
from: 2,
to: 4,
color: "#00ffff",
opacity: 0.3
}],
categories: [2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #%"
}
});
}
1 Answer, 1 is accepted
I replied to the same question in your other thread, I am my answer here too, so the other users who are following this thread can read it:
If I understand correctly you would like to display #00ffff color for "Internet Explorer" in the legend? If this is the case you could set series.color #00ffff and opacity: 0 to the "Internet Explorer" series (dojo example). If I am missing something please elaborate a bit more - this way I would be able to advise you further and provide concrete recommendations.
Regards,
Iliana Nikolova
Telerik