# Concepts

## Content

FlexChart provides various options to customize the appearance of the chart and its elements — from color palettes and series-level styling to per-element control of headers, axes, legends, data labels and tooltips. This overview gives a quick snapshot of each topic and when to use it. 

***

## Appearance and Styling

| Topic | Use Case |
| ----- | -------- |
| [Appearance and Styling](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/appearance-and-styling) | Use for color and style choices that apply chart-wide or per-series. Set `Palette` (16 pre-defined palettes from the `C1.Chart.Palette` enumeration; default `Standard`) for a one-line color scheme. Create a custom palette by setting `Palette="Palette.Custom"` with a `CustomPalette` list of colors. Style individual series through the `Series.Style` property — for example `Style="fill:red"` or use `rgba()` for semi-transparent fills. |

## Chart Elements (under Elements)

| Topic | Use Case |
| ----- | -------- |
| [Axes](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/axes) | Use `AxisX` and `AxisY` to control position (`Position`), axis title (`Title` / `TitleStyle`), tick marks (`MajorTickMarks`, `MinorTickMarks`, `TickLength`), grid lines (`MajorGrid`, `MinorGrid`, `MajorGridStyle`, `MinorGridStyle`), labels (`Labels`, `LabelMax`, `LabelMin`, `LabelAlignment`), axis line visibility (`AxisLine`), and reversed display (`Reversed`). Configure axes inside an `<AxisCollection>`. |
| [Legend](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/legends) | Use `LegendPosition` (`Auto`, `Top`, `Bottom`, `Left`, `Right`) for placement, `LegendStyle` for styling, and `LegendToggle` to let users show/hide series by clicking legend items. When many series are present, set `LegendScrollbars` (from the `LegendScrollBars` enumeration) to add a scrollbar to the legend. |
| [Header and Footer](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/headerfooter) | Use `HeaderContent` and `FooterContent` to add a title and footer. Style each with `HeaderStyle` and `FooterStyle` (CSS-style strings such as `font-size:24px`). |
| [Multiple Plot Area](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/plot-area) | Use to split series into separate plot areas within a single chart for better readability when overlapped series are hard to compare. Add `<PlotArea>` elements to a `<PlotAreaCollection>` (with `Name`, `Width`, `Height`, `Row`, `Column`), then assign each axis and series to a plot area by name via `PlotAreaName` (on `Axis`) and `AxisX`/`AxisY` (on `Series`). Multiple plot areas are more readable than multiple overlapped series because each series gets its own plotting region while sharing the overall chart frame. |
| @cols=1:@rows=3:[Series Collection](/componentone/docs/blazor/online-blazor/controls/flexchartoverview/concepts/seriescollection) | @cols=1:@rows=3:Use to define the data series plotted on the chart. Each `<Series>` in a `<SeriesCollection>` sets its `Name`, `Binding` (Y-axis property), and optionally its own `ItemsSource`, `BindingX`, `ChartType`, `Style`, `AxisX`, and `AxisY` for per-series overrides. By default, FlexChart shows a column chart with dummy data at design time; at runtime, provide real data through `ItemsSource` and `BindingX`/`Binding` on the chart or per series. |
|
|