We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Different colours for chart columns

I have a simple single series column chart showing the number of sales for each department. Am I able to set the column colour for each department to a colour code saved in my sql tables and specificed in my data source? I was able to do this with the Kendo chart in a different application.

My chart code is.....

<ej-chart id="chart3" is-responsive="true">

                <e-series datasource="ViewBag.dataSource" x-name="Department" y-name="Sales" fill="#547bbd" type="Column" name="Departments">
                    <e-chart-tooltip visible="true"></e-chart-tooltip>

            <e-size height="600" width="100%"></e-size>
            <e-primary-x-axis label-rotation="45"></e-primary-x-axis>
            <e-primary-y-axis label-format="{value}"></e-primary-y-axis>

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team March 17, 2017 05:57 AM UTC

Hi Gary, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Your requirement can be achieved using pointColorMappingName property. Like xName and YName you need to map the field with color to pointColorMappingName property from the list, so that specified color will be applied to the column. We have prepared a sample with respect to your requirement, find the code snippet below to achieve your requirement. 

ASP.NET Core: 

            List<ChartData> data = new List<ChartData>(); 
            data.Add(new ChartData("x1", 28, "blue")); 
            data.Add(new ChartData("x2", 25, "lightgreen")); 
            data.Add(new ChartData("x3", 26, "gray")); 
            data.Add(new ChartData("x4", 27, "lightblue")); 
            data.Add(new ChartData("x5", 32, "pink")); 
            data.Add(new ChartData("x6", 38, "orange")); 
            ViewBag.dataSource = data; 
<ej-chart id="chart3 "> 
         <e-series datasource="ViewBag.dataSource" x-name="Department" y-name="Sales" point-color-mapping-name="Color"> 

Sample for reference can be find from below link. 

GW Gary Whiteside March 20, 2017 10:43 AM UTC

Perfect, I was trying fill="Color"


DD Dharanidharan Dharmasivam Syncfusion Team March 21, 2017 05:44 AM UTC

Hi Gary, 
Thanks for your update. 
Kindly revert us, if you need further assistance. 


Live Chat Icon For mobile
Up arrow icon