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.
Unfortunately, activation email could not send to your email. Please try again.

Different colours for chart columns

Thread ID:

Created:

Updated:

Platform:

Replies:

129424 Mar 16,2017 11:31 AM Mar 21,2017 01:44 AM ASP.NET Core 3
loading
Tags: Chart
Gary Whiteside
Asked On March 16, 2017 11:31 AM

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-chart-series>
                <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-series>
            </e-chart-series>

            <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>
        </ej-chart>

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 17, 2017 01:57 AM

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: 

//Controller 
            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; 
 
//View 
<ej-chart id="chart3 "> 
     <e-chart-series> 
         <e-series datasource="ViewBag.dataSource" x-name="Department" y-name="Sales" point-color-mapping-name="Color"> 
         </e-series> 
     </e-chart-series> 
</ej-chart> 


Screenshot: 
 
Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 


Gary Whiteside
Replied On March 20, 2017 06:43 AM

Perfect, I was trying fill="Color"

Thanks!

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

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

Dharani. 


CONFIRMATION

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.

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.

;