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
Adamantidis theodoros
110
igCategoryChart with columns style set different colours
posted

Hello,

I have a column chart which is going to have multiple column and I want to be able to set a different colour for each individual.

Any idea what is going wrong?

I already define the brushes but as you can see it does not work.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Bar and Column Series</title>
        rel="stylesheet" />
        rel="stylesheet" />
    <script src="">ajax.aspnetcdn.com/.../modernizr-2.8.3.js"></script>
    <script src="">code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="">code.jquery.com/.../jquery-ui.min.js"></script>
    <script src="">www.igniteui.com/.../adventureworks.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        var Data = [[{ "Label": "test1", "Value": 77.78 }, { "Label": "test2", "Value": 83.33 }]];
        var columnColors = ["red", "green"];
        $(function loaded() {
            $("#columnChart").igCategoryChart(
                {
                    brushes: columnColors,
                    width: "98%",
                    height: "350px",
                    dataSource: Data,
                    chartType: "column"
                }
            );
        }
        );
    </script>
    <div>
        <div id="columnChart" style="display: table-cell; width: auto; padding-right: 50px;"></div>
        <div id="columnLegend" style="width: 100px; display: table-cell;"></div>
    </div>
</body>
</html>
Parents
No Data
Reply
  • 34430
    Verified Answer
    Offline posted

    Hello Adamantidis,

    I have been investigating into the behavior you are seeing, and the reason this is happening is because while you have multiple columns in this case, you only have a single series for the “Value” path in your data and the brushes will be applied per series and not per column by default.

    If you wish to apply brushes per column, I would recommend using the igDataChart instead of the igCategoryChart as the igDataChart is more customizable. You can use the assigningCategoryStyle event to apply a fill and outline for each column, but please note that you will need to set the isCustomCategoryStyleAllowed property on your series to true.

    I am attaching a sample to demonstrate usage of the igDataChart with a single series having different colors.

    Please let me know if you have any other questions or concerns on this matter.

    0412.ChartTest.zip

Children
No Data