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

Bar or column chart , color of bars or column

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

3 Replies

MC Mohan Chandran Syncfusion Team 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.  

MJ Miranda Johnson 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. 

MC Mohan Chandran Syncfusion Team 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. 

Live Chat Icon For mobile
Up arrow icon