Different colours for chart columns

[Gary Whiteside]

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]

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. 

http://www.syncfusion.com/downloads/support/forum/129424/ze/WebApplication1_(2)2102519978  

 

Thanks, 

Dharani. 

[Gary Whiteside]

Perfect, I was trying fill="Color"

Thanks!

[Dharanidharan Dharmasivam]

Hi Gary, 

 

Thanks for your update. 

 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.