Blazor コントロール
外観およびスタイル設定
コントロール > FlexChart > 外観およびスタイル設定

FlexChart provides various options to customize the appearance of chart and chart elements individually, so that you can generate charts as per your requirement and look and feel of the application you are creating. This topic discusses all the appearance related options available with the FlexChart.

Chart Palettes

FlexChart provides 16 pre-defined color palettes, so that you can generate the charts with desired appearance with a single line of code. You can apply these palettes to FlexChart using the Palette property which accepts the values from Palette enumeration of C1.Chart namespace. By default, this property is set to Standard. You can also create a custom palette using the existing color palettes.

Cerulan

Cocoa

Coral

Cyborg

cerulan color

cocoa palette

coral palette

cyborg palette

Dark

Darkly

Flatly

HighContrast

dark color

darkly color

flatly palette

HighContrast palette

Light

Midnight

Modern

Organic

Light palette

Midnight palette

Modern Palette

Organic Palette

Slate

Standard

Superhero

Zen

Slate Palette

Standard Palette

Superhero Palette

Zen Palette

Customizing Series Style

To customize the series style opacity/fill-opacity, you can use Style property and opaque colors in fill and specify color as rgba() as shown in the below code.

Razor
コードのコピー
<Series Name="Revenue" Binding="Sales" Style="fill:red"/>
<Series Name="Expenses" Binding="Expenses"  Style="fill:rgba(255,0,0,0.25)"/>

You can also use custom Palette by specifying both CustomPalette and Palette properties as shown in the below code. A list of selected colors is available.

Razor
コードのコピー
<FlexChart Palette="Palette.Custom" CustomPalette="customPalette">
List<object> customPalette = new List<object>
{ System.Drawing.Color.DarkGray, System.Drawing.Color.LightGray };