Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
rsimm
1905
Setting Column Color in Series individually
posted

I would like to be able to set the Column color within the series individually, preferably with a brushMemberPath option type of thing where I can specify in the data set what color the column should display as.

How can I do this?

I am using igniteUI 2014.1

Parents
  • 17590
    Offline posted

    Hello rsimm,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is looping trough the colors from your data source and push them in an array. Afterwards this array could be set to the brushes option of the igDataChart. This property defines the palette from which automatically assigned series brushes are selected. The value provided should be an array of css color strings.

    I made a small sample illustrating my suggestion and I am attaching it for your reference.

    In my sample project there is a Color property in the underlying data source that defines what is the color going to be. Afterwards, I am looping trough all colors and I push them into an array which later is used as the value for the brushes property. For example:

    

     var data = [
    

     { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394, "Color": "pink" },
    

     { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396, "Color": "red" },
    

     { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351, "Color": "yellow" },
    

     { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277, "Color": "green" },
    

     { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218, "Color": "purple" }
    

    ];
    

     var arrayColors = [];
    

     var jsonLength = data.length;
    

     for (var i = 0; i < jsonLength; i++) {
    

    arrayColors.push(data[i].Color);
    

    }
    

     $("#chart").igDataChart({
    

     width: "100%",
    

     height: "400px",
    

     title: "Population per Country",
    

     subtitle: "Five largest projected populations for 2015",
    

    dataSource: data,
    

    brushes: arrayColors,
    

    .
    

    .
    

    .
    

    .

    I hope you find this information helpful.

    Please let me know if you need any further assistance with this matter.

    igDataChartSeriesColors.zip
Reply Children