Applying style to the..., c#

The attached code creates a column chart (4 columns).

How can I apply css (.class or #ID) such that the first and last bars will have different backgound colors and gradient? If applying css is not possible then how can I change the colors for first column red, last column orange and the rest blue.

Thank you
    protected void createChart1()

        double[] yValues = { 15, 60, 12, 13 };   //for column chart
        //double[] yValues2 = { 30, 32, 30, 35 };   //for line
        string[] xValues = { "September", "October", "November", "December" };

        Chart chart = new Chart();

        Series series = new Series("Default");
        series.ChartType = SeriesChartType.Column;
        series["PieLabelStyle"] = "Disabled";

        ChartArea chartArea = new ChartArea();
        Axis yAxis = new Axis(chartArea, AxisName.Y);
        Axis xAxis = new Axis(chartArea, AxisName.X);

        chart.Series["Default"].Points.DataBindXY(xValues, yValues);

        chart.Width = new Unit(300, UnitType.Pixel);
        chart.Height = new Unit(200, UnitType.Pixel);
        string filename = "C:\\image\\Chart.png";
        chart.SaveImage(filename, ChartImageFormat.Png);

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
I don't think this component has any possibilities for CSS classes. In this example you're specifically saving as png image so the page you use this on could not influence the individual components with CSS any more.

But even if you would have another handler I don't think it would send html mark-up instead of an image, although I'm not 100% sure. So what you would need for that is a Chart component which renders as html.

As it is, I think the below code is what you would have to use (in between your existing lines 19 and 20):
            chart.Series["Default"].Color = System.Drawing.Color.Blue; // change default if you want to
            chart.Series["Default"].Points[0].Color = System.Drawing.Color.Red;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].Color = System.Drawing.Color.Orange;

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Robert,

I will try your code for changing the color, this might be sufficient for now. Have in mind that the idea here was to use css before making the image so that the image will have better colors and gradient. I understand that those css settings will not have any effect after the image is constructed?

Question: Is there any way to apply css setting before the image construction?

Thank you,

Robert SchuttSoftware EngineerCommented:
I'm not exactly sure what you're looking for. Be aware that setting an object property BorderColor in this context is something completely different from using css properties on your page. If you have a skin or theme it might be possible to use colors and such defined in there for your chart but "reading back" the css defined in your page is a different matter. I searched around a bit but didn't find an obvious way for that. If it would be about 1 color (like the blue or black in the current image) there is a neat little trick but I'm not sure it would even work here: use Transparent for that color and use css to set the background color behind the chart picture. But other than that, as far as I can think about it, there is no way to use css to influence the colors in the picture.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
The most import parts in this post are handled by you. The chart images produced here via this c# are static and out of reach of any css we may have. This I understand. My focus was on how to create image to have colors with gradient just before the code creates the image. Meaning that the image will look much better after it is created.

Not knowing much, I am talking about css instead of skins or themes. As you are mentioning it, we may have to use skin or themes that I don't know much about it at this point. If you have a link for this subject, I will appreciate have it so I could learn more about it.


Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
Robert SchuttSoftware EngineerCommented:
Sorry Mike, I read past your mention of gradient twice! I just saw it in your last comment when you mentioned it for the third time...

For gradients there are other properties on the chart object and the chartarea and points respectively.

Just some random code and the result:
            chart.Series["Default"].Color = System.Drawing.Color.Blue;
            chart.Series["Default"].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].BackSecondaryColor = System.Drawing.Color.DarkBlue;
            chart.Series["Default"].Points[0].Color = System.Drawing.Color.Red;
            chart.Series["Default"].Points[0].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].Points[0].BackSecondaryColor = System.Drawing.Color.DarkRed;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].Color = System.Drawing.Color.Orange;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].BackSecondaryColor = System.Drawing.Color.Yellow;

            chartArea.BackGradientStyle = GradientStyle.HorizontalCenter;
            chartArea.BackColor = System.Drawing.Color.SlateGray;
            chartArea.BackSecondaryColor = System.Drawing.Color.White;

Open in new window

chart with gradients
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Perfect. Thanks.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.