Chart - Styling

The Chart component supports color palettes, axis configuration, and legend customization — the same styling options available in ASP.NET Web Forms.

Color Palettes

Use the Palette property to set a color scheme. Available palettes: BrightPastel, Berry, Chocolate, EarthTones, Excel, Fire, Grayscale, Light, Pastel, SeaGreen, SemiTransparent.

BrightPastel (Default)

Berry

Fire

SeaGreen


Axis Configuration

Configure axis titles, minimum/maximum values, and intervals using the Axis class.

<ChartArea Name="TempArea"
    AxisX="@(new Axis { Title = "Time of Day" })"
    AxisY="@(new Axis { Title = "Temperature (°F)", Minimum = 50, Maximum = 100, Interval = 10 })" />

More Palette Examples

Chocolate

Excel

Grayscale

Pastel


Custom Series Colors

Override the palette for individual series using the Color property with a WebColor.

<ChartSeries Name="Actual"
    ChartType="SeriesChartType.Column"
    Color="WebColor.DodgerBlue"
    Points="@actualData" />
<ChartSeries Name="Target"
    ChartType="SeriesChartType.Line"
    Color="WebColor.OrangeRed"
    Points="@targetData" />

Background Gradient Styles

Use BackGradientStyle with BackSecondaryColor to apply CSS gradients to the chart container. The gradient blends the chart's BackColor with BackSecondaryColor.

TopBottom

LeftRight

Center (Radial)

DiagonalLeft

<Chart BackColor="WebColor.Navy"
       BackSecondaryColor="WebColor.LightSkyBlue"
       BackGradientStyle="GradientStyle.TopBottom">
    ...
</Chart>

Border Dash Styles

Use BorderlineDashStyle to set the CSS border style on the chart container.

Solid

Dash

Dot

DashDot

<Chart BorderlineDashStyle="ChartDashStyle.Solid"
       BorderColor="WebColor.Black" BorderWidth="2">
    ...
</Chart>

AntiAliasing (Migration Compatibility)

The AntiAliasing property is marked [Obsolete] because canvas rendering always applies anti-aliasing. It compiles without errors for migration compatibility.

#pragma warning disable CS0618
#pragma warning restore CS0618
@* Suppress obsolete warning for migration compatibility *@
#pragma warning disable CS0618
<Chart AntiAliasing="AntiAliasingStyles.All">
    ...
</Chart>
#pragma warning restore CS0618