This is a migrated thread and some comments may be shown as answers.

Line chart and legend color change

4 Answers 217 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Jerson
Top achievements
Rank 1
Jerson asked on 05 Jul 2017, 12:45 AM

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

Sort by
0
Jerson
Top achievements
Rank 1
answered on 05 Jul 2017, 01:09 AM

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

0
Stefan
Telerik team
answered on 06 Jul 2017, 11:34 AM
Hello 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Jerson
Top achievements
Rank 1
answered on 07 Jul 2017, 01:54 AM

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

 

0
Stefan
Telerik team
answered on 10 Jul 2017, 12:26 PM
Hello 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Chart
Asked by
Jerson
Top achievements
Rank 1
Answers by
Jerson
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or