ComponentOne CompositeChart for ASP.NET Web Forms
Task-Based Help / Modifying the Series Default Colors
In This Topic
    Modifying the Series Default Colors
    In This Topic

    In PieChartSeries when applying the series styles the first style is applied to the top middle slice and then moves in counter-clockwise position. The style is applied to the first series of the first Pie and then applies each series in counter-clockwise rotation. Once the series styles are applied to the first Pie then the series styles will be added to the next Pie. When applying styles to specific series you must add a style for every series. Each style represents a specific series, for example, in the picture below the series styles are labeled for each series in the PieChart. The labels show the series that represent the first Pie chart:

     

    Modifying the Series Default Colors in Design View

    To modify the PieChartSeries of the Composite chart in design view

    1. Click C1CompositeChart's smart tag to open the C1CompositeChart Tasks menu and select SeriesStyles. The ChartStyle Collection Editor appears.
    2. In the ChartStyle Colletion Editor click the Add button 14 times to add 14 styles to modify the inner pie’s default series styles to match the outer pie series styles.
    3. For each style member expand the Fill node and then enter the desired color next to the Color property.
    4. Click OK when finished.

    Modifying the Series Default Colors in Source View

    Use the following code to modify the default colors for the Pie chart in the C1Composite Chart:

    Source View
    Copy Code 
    <wijmo:C1CompositeChart ID="C1CompositeChart1" runat="server" Height="475px" Width="550px">
        <SeriesList>
            <wijmo:CompositeChartSeries Center="200, 250" LegendEntry="True" Type="Pie"
                Radius="100">
                <PieSeriesList>
                    <wijmo:PieChartSeries Data="38" HintContent="" Label="Chrome"
                        LegendEntry="True">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="36" HintContent="" Label="FireFox"
                        LegendEntry="True">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="13" HintContent="" Label="IE" LegendEntry="True">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="8" HintContent="" Label="Safari" LegendEntry="True">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="5" HintContent="" Label="Other" LegendEntry="True">
                    </wijmo:PieChartSeries>
                </PieSeriesList>
            </wijmo:CompositeChartSeries>
            <wijmo:CompositeChartSeries Center="200, 250" LegendEntry="True"
                Type="Pie">
                <PieSeriesList>
                    <wijmo:PieChartSeries Data="26" HintContent="" Label="15" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="8" HintContent="" Label="14" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="4" HintContent="" LegendEntry="False" Label="4">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="20" HintContent="" Label="7" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="10" HintContent="" Label="8" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="6" HintContent="" Label="6" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="6" HintContent="" Label="9" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="5" HintContent="" Label="8" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries HintContent="" Label="2" LegendEntry="False" Data="2">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="5" HintContent="" Label="5" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="3" HintContent="" Label="3" LegendEntry="False">
                    </wijmo:PieChartSeries>
                    <wijmo:PieChartSeries Data="5" HintContent="" LegendEntry="False" Label="5">
                    </wijmo:PieChartSeries>
                </PieSeriesList>
            </wijmo:CompositeChartSeries>
        </SeriesList>
        <SeriesStyles>
            <wijmo:ChartStyle>
                <Fill Color="#00CC00">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#FF9966">
                <Fill Color="#FF9966">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#CCCCFF">
                <Fill Color="#CCCCFF">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#0099CC">
                <Fill Color="#0099CC">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#9933FF">
                <Fill Color="#9933FF">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle FillOpacity="0.6">
                <Fill Color="#00CC00">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#00CC00">
                <Fill Color="#00CC00">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle FillOpacity="0.5" Stroke="#00CC00">
                <Fill Color="#00CC00">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle FillOpacity="0.5" Stroke="#FF9966">
                <Fill Color="#FF9966">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle FillOpacity="0.5" Stroke="#FF9966">
                <Fill Color="#FF9966">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#FF9966">
                <Fill Color="#FF9966">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#CCCCFF">
                <Fill Color="#CCCCFF">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle Stroke="#CCCCFF">
                <Fill Color="#CCCCFF">
                </Fill>
            </wijmo:ChartStyle>
            <wijmo:ChartStyle>
                <Fill Color="#CCCCFF">
                </Fill>
            </wijmo:ChartStyle>
        </SeriesStyles>
  <Header Compass="North"></Header>
  <Footer Compass="South" Visible="False"></Footer>

  <Axis>
   <X AutoMajor="False" AutoMin="False">
      <GridMajor Visible="True"></GridMajor>
      <GridMinor Visible="False"></GridMinor>
   </X>

   <Y Visible="False" Compass="West" AutoMajor="False" AutoMin="False">
      <Labels TextAlign="Center"></Labels>
      <GridMajor Visible="True"></GridMajor>
      <GridMinor Visible="False"></GridMinor>
   </Y>
  </Axis>
</wijmo:C1CompositeChart>