Bar or column chart , color of bars or column

[Miranda Johnson]

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";

    }

}

</script>

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]

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. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/132128/SAMPLE~1-54147322.ZIP  

 

Please let us know if you have any queries.  

  

Regards,  

Mohan Chandran.  

[Miranda Johnson]

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]

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. 

 

Code Link : https://www.syncfusion.com/downloads/support/forum/132128/ze/ClientReportsController-402508402  

 

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; 

                    else 

                        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. 

 

Regards, 

Mohan Chandran.