CODEWITHSUNDEEP
c#winformschartstransparencypie-chart
user3647832
user3647832

Reputation: 13

Pie Chart transparency, multiple Pies

I would like to stack two pie charts ontop each other. The idea here is then to make one of them smaller so you only can see a outer ring of the pie chart behind. I tried using:

chartCalProgres.BackColor = Color.Transparent;
chartCalProgres.ChartAreas[0].BackColor = Color.Transparent;

But as you can see in the link below, it did not work. Anyone have an idea to how this effect could be achieved?

Pie Charts

Should look like this

Upvotes: 1

Views: 2615

Answers (1)

TaW
TaW

Reputation: 54453

This is not possible with Pie charts, but you can get it done rather nicely with the ChartType.Doughnut:

two-ringed doughnut

Here are the steps:

1 We need to have two Series and two ChartAreas

2 We need to control the Position, the Size and the InnerPlotPosition of the CAs. They must overlay and have the right sizes..

3 We also need to control the DoughnutRadius of the two Series we use. This is the inner radius.

4 Finally we need to set the Backcolor of the inner Series to Transparent.

Here is the code that set up my example:

    using System.Windows.Forms.DataVisualization.Charting;
    //..

    Random R = new Random(); //Added to allow code to work
    chart1.Series.Clear();
    Series S1 = chart1.Series.Add("Pie1");
    Series S2 = chart1.Series.Add("Pie2");

    chart1.ChartAreas.Clear();

    ChartArea CA1 = chart1.ChartAreas.Add("Outer");
    ChartArea CA2 = chart1.ChartAreas.Add("Inner");

    CA1.Position = new ElementPosition(0, 0, 100, 100);
    CA2.Position = new ElementPosition(0, 0, 100, 100);

    float innerSize = 60;
    float outerSize = 100;
    float baseDoughnutWidth = 25;

    CA1.InnerPlotPosition = new ElementPosition((100 - outerSize) / 2,
            (100 - outerSize) / 2 + 10, outerSize, outerSize - 10);

    CA2.InnerPlotPosition = new ElementPosition((100 - innerSize) / 2,
            (100 - innerSize) / 2 + 10, innerSize, innerSize - 10);

    S1["DoughnutRadius"] = 
     Math.Min(baseDoughnutWidth * (100 / outerSize), 99).ToString().Replace(",", ".");
    S2["DoughnutRadius"] = 
     Math.Min(baseDoughnutWidth * (100 / innerSize), 99).ToString().Replace(",", ".");
    

    S1.ChartArea = CA1.Name;
    S2.ChartArea = CA2.Name;

    S1.ChartType = SeriesChartType.Doughnut;
    S2.ChartType = SeriesChartType.Doughnut;

    CA2.BackColor = Color.Transparent;
    S1["DoughnutRadius"] = "41"; // leave just a little space!
    S2["DoughnutRadius"] = "99"; // 99 is the limit. a tiny spot remains open

    // test data, optional, R is a Random instance
    for (int i = 0; i < 7; i++)
    {
        S1.Points.AddXY(i, 42 - R.Next(44));
        S2.Points.AddXY(i, 77 - R.Next(88));
    }
}

Note the strange way to set the DoughnutRadius; also note that many numbers inside a chart are percentages of the chart controls sizes..!

I found the code here, all kudos to fireblade123, Escener Technologies!!

Upvotes: 4

Related Questions