Line chart and legend color change

5 posts, 0 answers
  1. Jerson
    Jerson avatar
    7 posts
    Member since:
    May 2017

    Posted 04 Jul Link to this post

    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

  2. Jerson
    Jerson avatar
    7 posts
    Member since:
    May 2017

    Posted 04 Jul Link to this post

    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

  3. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 06 Jul Link to this post

    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 visualization (charts) and form elements.
  4. Jerson
    Jerson avatar
    7 posts
    Member since:
    May 2017

    Posted 06 Jul in reply to Stefan Link to this post

    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

     

  5. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 10 Jul Link to this post

    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.
Back to Top