Transparent colour.

2 posts, 0 answers
  1. Biju
    Biju avatar
    2 posts
    Member since:
    Mar 2015

    Posted 11 Aug 2015 Link to this post

    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 #%"
                    }
                });
            }​

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 12 Aug 2015 Link to this post

    Hi Biju,

    I replied to the same question in your other thread, however I am pasting 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top