I have my customized colors for lines and legend. What I need to know is how can I set the color arrangement for the series color in line chart. As I observed it has their own random arrangement for the colors.
My sample array of colors:
var myColors = ["lightblue", "pink", "yellow", "green", "orange", "red", "teal"];
whenever I load an dataSeries the color will randomly select an color.
I need to set my color per key, for example:
Test 1 = "lightblue", Test 2 = "pink", Test 3 = "yellow"....
In the series color defaults will generate colors randomly not based on my customized colors.
Question, is what I need to do to set my customized array of colors?
How can I accomplish this?
sample code:
$("#chart").kendoChart({
title: { text: "MyChart" },
theme: "Metro",
dataSource: dataSeries,
seriesColors: ["lightblue", "pink", "yellow", "green", "orange", "red", "teal"],
//seriesColors: myColor,
series: [{
type: "line",
field: "value()",
categoryField: "Date",
name: "#= group.value #",
color: "red",
markers: {
type: 'circle',
visible: true,
background: 'black',
size: 5
}
}],
Hope to hear from you. I need this to be done as my project is urgent.
Thanks!
Regards,
Jerson
4 Answers, 1 is accepted
Rank 1
Hi!,
To support my concern. Please see attached files:
Scenario 1: When I checked Test 1 checkbox, the color is lightblue, so it's fine that is the color.
Scenario 2: When I checked Test 2 checkbox, the color of Test 1 which is lightblue changed into the second color pink and Test 2 replaced the Test 1's color lightblue. so this is my concern.
Correct set up would be: items in the checkbox would hold only their respective array of colors. Test 1= lightblue and Test 2 = pink, it must not interchanged.
How can I configure this? as the seriesColor has their own arrangements of arrays in colors.
Thanks!
Regards,
Jerson
I was not able to reproduce the same issue on my end. When I used the seriesColors property, all series have their respective color based on the passed array:
http://dojo.telerik.com/AboyoV
Please advise if I missed something.
Also, the mentioned attachments were not available, I can assume that there was an issue during the process.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Nice to hear from you.
In my case I used dataSource to load dynamic data. From your example its actually okay with that, also its static data.
The problem that I've encountered is in my case is this:
var stats = [
{ Amount: 10, Date: new Date("2015/04/11"), Name: "Test 1" },
{ Amount: 10, Date: new Date("2015/04/12"), Name: "BTest" },
{ Amount: 30, Date: new Date("2015/04/13"), Name: "BTest" },
{ Amount: 50, Date: new Date("2015/04/14"), Name: "BTest" },
{ Amount: 20, Date: new Date("2015/04/15"), Name: "BTest" },
{ Amount: 90, Date: new Date("2015/04/16"), Name: "BTest" },
{ Amount: 40, Date: new Date("2015/04/17"), Name: "BTest" },
{ Amount: 80, Date: new Date("2015/04/18"), Name: "BTest" },
{ Amount: 5, Date: new Date("2015/04/11"), Name: "ATest" },
{ Amount: 5, Date: new Date("2015/04/12"), Name: "ATest" },
{ Amount: 50, Date: new Date("2015/04/13"), Name: "ATest" },
{ Amount: 40, Date: new Date("2015/04/14"), Name: "ATest" },
{ Amount: 10, Date: new Date("2015/04/15"), Name: "ATest" },
{ Amount: 70, Date: new Date("2015/04/16"), Name: "ATest" },
{ Amount: 50, Date: new Date("2015/04/17"), Name: "ATest" },
{ Amount: 50, Date: new Date("2015/04/18"), Name: "ATest" }
var dataSeries = new kendo.data.DataSource({
data: stats,
group: {
field: "Name"
},
sort: {
field: "Date",
dir: "asc"
},
schema: {
model: {
fields: {
Date: {
type: "date"
},
Amount: {
type: "number"
}
},
value: function () {
return this.Amount;
}
}
}
});
$("#chart").kendoChart({
title: { text: chartTitle },
theme: "Metro",
dataSource: dataSeries,
seriesColors: ["lightblue", "pink", "yellow", "green", "orange", "red", "teal"],
//seriesColors: myColor,
series: [{
type: "line",
field: "value()",
categoryField: "Date",
name: "#= group.value #",
color: "red",
markers: {
type: 'circle',
visible: true,
background: 'black',
size: 5
}
}],
legend: {
position: "right"
},
valueAxis: {
line: {
visible: false
}
},
categoryAxis: {
//min: new Date("6/3/2017"),
//max: new Date("7/4/2017"),
//type: "date",
baseUnit: "days",
majorGridLines: {
visible: true
},
labels: {
rotation: 40,
padding: { right: 10 },
dateFormats: {
days: "M/d/yy"
},
step: step
}
}
});
But, I found the cause. It will randomly generate the array of colors based on the Name in alphabetical order.
BTest should be in lightblue, and ATest in pink. But in case of array of color in series is BTest is = pink and ATest is = lightblue due to alphabetical order,not on the arrangement of actual array of data.
Is there any way to set the property of the seriesColor not in alphabetical order?
Thanks,
Jerson
In general, the seriesColors will set the colors based on the series order. The first series will receive the first color etc.
In this scenario, as the data is grouped and sorted, the first series which will be received from the Chart will receive the first color.
I can suggest checking the data order, and then programmatically building the myColor array and setting it to the Chart.
Regards,
Stefan
Progress Telerik