BarChart for ASP.NET WebForms
Styling the Series
Task-Based Help > Styling the Series

The BarChartSeries can be styled using the SeriesStyle property.

To style the series in design time:

  1. Add a reference to the C1.Web.Wijmo.Controls.Design.3.dll to your project.
  2. Add the C1BarChart from the toolbox to your page. For more information on adding the C1BarChart icon to your Toolbox, see Getting Started with ASP.NET Web Forms Edition.
  3. In the C1BarChart properties window click on the ellipsis button next to the SeriesStyles property.
    The ChartStyle Collection Editor appears.
  4. Click Add to add a new ChartStyle member.
    Each ChartStyle will represent a particular BarChartSeries. For example, the first ChartStyle member will represent the series for the first BarChartSeries.
  5. In the ChartStyle Collection Editor expand the Fill node and click on the ellipsis button next to ColorBegin and enter the following value in the Value textbox: Hex={FF,66,CC}.
  6. Click OK to save and close the More Colors dialog box.
  7. In the ChartStyle Collection Editor expand the Fill node and click on the ellipsis button next to ColorBegin and enter the following value in the Value textbox: Hex={FF,66,CC}.
  8. Click OK to save and close the More Colors dialog box.
  9. Set the Type to LinearGradient and Opacity to 0.8.
  10. Click on the ellipsis button next to Stroke and enter the following value in the Value textbox: Hex={FF,00,66}.
  11. Click OK to save and close the More Colors dialog box.

To style the series in source view:

  1. Add a reference to the C1.Web.Wijmo.Controls.Design.3.dll to your project.
  2. Add the C1BarChart from the toolbox to your page. For more information on adding the C1BarChart icon to your Toolbox, see Getting Started with ASP.NET Web Forms.
  3. Click the Source tab and add the following code within the <SeriesStyle> tag:

    To write code in Source View

    <cc1:ChartStyle Opacity="0.8" Stroke="#FF0066" StrokeWidth="1.5">
    <Fill Type="LinearGradient" ColorBegin="#FF66CC" ColorEnd="#FF66CC"></Fill>
    <:/cc1:ChartStyle>

This topic illustrates the following:

The first BarChartSeries style is modified:

See Also