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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Different colours for chart columns

Thread ID:





129424 Mar 16,2017 03:31 PM UTC Mar 21,2017 05:44 AM UTC ASP.NET Core 3
Tags: Chart
Gary Whiteside
Asked On March 16, 2017 03:31 PM UTC

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>

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 

Gary Whiteside
Replied On March 20, 2017 10:43 AM UTC

Perfect, I was trying fill="Color"


Dharanidharan Dharmasivam [Syncfusion]
Replied On March 21, 2017 05:44 AM UTC

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



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon