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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bar or column chart , color of bars or column

Thread ID:





132128 Aug 15,2017 07:45 PM UTC Aug 17,2017 10:34 AM UTC ASP.NET MVC 3
Tags: XlsIO
Miranda Johnson
Asked On August 15, 2017 07:45 PM UTC

Now for my bar and column charts  I need to be able to have the bars or columns in the chart have their color based on the value for that item.

 Similar to what this code does for charts on a web page

<script type="text/javascript">
function chartPreRender(sender) {
    var points = sender.model.series[0].points;
    for (var i = 0; i < points.length; i++) {
        var y = points[i].y;
        if (y < 1)
            points[i].fill = "red";
        else if (y >= 1 && y < 2)
            points[i].fill = "orange";
        else if (y >= 2 && y < 3)
            points[i].fill = "yellow";
        else if (y >= 3 && y < 4)
            points[i].fill = "#98FB98";
        else if (y >= 4 && y <= 5)
            points[i].fill = "#006400";

I have attached a copy of the controller code and the image of what I am trying to accomplish.

Attachment: ClientReportsController_73e1e2b7.zip

Mohan Chandran [Syncfusion]
Replied On August 16, 2017 02:07 PM UTC

Hi Miranda,  
We have prepared a sample to set the series colors based on their values by using IFill.ForeColor property and the sample can be downloaded from the following link. 
Please let us know if you have any queries.  
Mohan Chandran.  

Miranda Johnson
Replied On August 16, 2017 03:34 PM UTC

Your example will not work.     If it try to run from the example provided it throws all kinds of build errors.   

So  I tried copying your controller and your view but it still throws an error. 

Mohan Chandran [Syncfusion]
Replied On August 17, 2017 10:34 AM UTC

Hi Miranda, 
The shared sample works fine at our end and we are not facing any build errors. However, we have modified the ClientReportsController class file to achieve your requirement and the file can be downloaded from the following link. 
In that file, we have added the FillSeriesColor method and invoked it at the end of chart creation to set the chart series color based on values. 
Code Snippet: 
        private void FillSeriesColor(IChart chart) 
            foreach (IChartSerie serie in chart.Series) 
                int dataPointCount = (serie.EnteredDirectlyValues == null) ? serie.Values.Rows.Length : serie.EnteredDirectlyValues.Length; 
                for (int dataPointPos = 0; dataPointPos < dataPointCount; dataPointPos++) 
                    IChartDataPoint dataPoints = serie.DataPoints[dataPointPos]; 
                    double value; 
                    if (serie.EnteredDirectlyValues == null) 
                        value = serie.Values.Rows[dataPointPos].Number; 
                        value = (double)serie.EnteredDirectlyValues.GetValue(dataPointPos); 
                    if (value < 1) 
                        dataPoints.DataFormat.Fill.ForeColor = Color.Red; 
                    else if (value >= 1 && value < 2) 
                        dataPoints.DataFormat.Fill.ForeColor = Color.Orange; 
                    else if (value >= 2 && value < 3) 
                        dataPoints.DataFormat.Fill.ForeColor = Color.Yellow; 
                    else if (value >= 3 && value < 4) 
                        dataPoints.DataFormat.Fill.ForeColor = Color.FromArgb(153, 255, 204); 
                    else if (value >= 4 && value <= 5) 
                        dataPoints.DataFormat.Fill.ForeColor = Color.Green; 
Kindly refer this and let us know if this helps. 
Mohan Chandran. 


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

Live Chat Icon For mobile
Live Chat Icon