====== API: Chart Controls ======

API Reference for charts and visualizations.

===== TWvdSChart =====

Base chart control for all chart types.

==== Namespace ====

''WvdS.UI.Controls.Charts''

==== PXAML ====

<code xml>
<Chart Title="Sales Overview">
  <Chart.Series>
    <LineSeries Title="Revenue"
                ArgumentDataMember="Month"
                ValueDataMember="Revenue"
                DataSource="{Binding SalesData}" />
    <BarSeries Title="Orders"
               ArgumentDataMember="Month"
               ValueDataMember="OrderCount"
               DataSource="{Binding SalesData}" />
  </Chart.Series>
  <Chart.Legend Position="Right" />
</Chart>
</code>

==== Properties ====

| Property | Type | Default | Description |
^ Title | string | '' | Chart title |
^ Series | TWvdSSeriesCollection | nil | Data series |
^ Legend | TWvdSLegend | nil | Legend |
^ AxisX | TWvdSAxis | nil | X-axis |
^ AxisY | TWvdSAxis | nil | Y-axis |
^ Palette | TWvdSPalette | nil | Color palette |
^ EnableZoom | Boolean | False | Zoom enabled |
^ EnablePan | Boolean | False | Panning enabled |

==== Events ====

| Event | Signature | Description |
^ OnSeriesClick | TSeriesClickEvent | Click on data point |
^ OnLegendClick | TLegendClickEvent | Click on legend |

----

===== TWvdSSparkline =====

Compact inline charts.

==== Namespace ====

''WvdS.UI.Controls.Charts''

==== PXAML ====

<code xml>
<Sparkline Type="Line"
           Data="{Binding TrendData}"
           Width="100" Height="20" />
<Sparkline Type="Bar"
           Data="{Binding Values}"
           HighlightMin="True" HighlightMax="True" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ Type | TWvdSSparklineType | stLine | Line, Bar, WinLoss, Area |
^ Data | TDoubleArray | nil | Data points |
^ HighlightMin | Boolean | False | Highlight minimum |
^ HighlightMax | Boolean | False | Highlight maximum |
^ NegativeColor | TWvdSColor | clRed | Color for negative values |

----

===== Series Types =====

All series share common base properties:

| Property | Type | Description |
^ Title | string | Series title |
^ DataSource | IEnumerable | Data source |
^ ArgumentDataMember | string | X-value field |
^ ValueDataMember | string | Y-value field |
^ Color | TWvdSColor | Color |
^ Visible | Boolean | Visible |

----

===== TWvdSLineSeries =====

Line chart.

==== PXAML ====

<code xml>
<LineSeries Title="Temperature"
            ArgumentDataMember="Date"
            ValueDataMember="Temp"
            MarkerType="Circle"
            LineStyle="Solid" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ MarkerType | TWvdSMarkerType | mtNone | None, Circle, Square, Triangle |
^ MarkerSize | Integer | 8 | Marker size |
^ LineStyle | TWvdSLineStyle | lsSolid | Solid, Dash, Dot |
^ LineWidth | Integer | 2 | Line width |

----

===== TWvdSAreaSeries =====

Area chart.

==== PXAML ====

<code xml>
<AreaSeries Title="Revenue"
            ArgumentDataMember="Month"
            ValueDataMember="Amount"
            Opacity="0.7" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ Opacity | Double | 0.5 | Transparency (0-1) |
^ ShowLine | Boolean | True | Show top line |

----

===== TWvdSBarSeries =====

Bar chart.

==== PXAML ====

<code xml>
<BarSeries Title="Sales"
           ArgumentDataMember="Product"
           ValueDataMember="Quantity"
           BarWidth="0.8" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ BarWidth | Double | 0.6 | Bar width (0-1) |
^ CornerRadius | Integer | 0 | Corner radius |
^ ShowLabels | Boolean | False | Show values |

----

===== TWvdSPieSeries =====

Pie chart.

==== PXAML ====

<code xml>
<Chart>
  <PieSeries ArgumentDataMember="Category"
             ValueDataMember="Value"
             InnerRadius="0"
             StartAngle="0"
             ShowLabels="True" />
</Chart>
</code>

==== Properties ====

| Property | Type | Default | Description |
^ InnerRadius | Double | 0 | Donut hole (0=Pie) |
^ StartAngle | Double | 0 | Start angle |
^ ShowLabels | Boolean | True | Show labels |
^ ExplodeOffset | Double | 0 | Segment offset |

----

===== TWvdSFunnelSeries =====

Funnel chart for sales funnels.

==== PXAML ====

<code xml>
<Chart>
  <FunnelSeries ArgumentDataMember="Stage"
                ValueDataMember="Count"
                NeckHeight="0.3"
                NeckWidth="0.3" />
</Chart>
</code>

==== Properties ====

| Property | Type | Default | Description |
^ NeckHeight | Double | 0.3 | Neck height (0-1) |
^ NeckWidth | Double | 0.3 | Neck width (0-1) |
^ GapRatio | Double | 0 | Gap between segments |

----

===== TWvdSScatterSeries =====

Scatter chart.

==== PXAML ====

<code xml>
<ScatterSeries ArgumentDataMember="X"
               ValueDataMember="Y"
               MarkerType="Circle"
               MarkerSize="10" />
</code>

----

===== TWvdSBubbleSeries =====

Bubble chart.

==== PXAML ====

<code xml>
<BubbleSeries ArgumentDataMember="X"
              ValueDataMember="Y"
              SizeDataMember="Size"
              MinBubbleSize="10"
              MaxBubbleSize="50" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ SizeDataMember | string | '' | Bubble size field |
^ MinBubbleSize | Integer | 10 | Minimum bubble size |
^ MaxBubbleSize | Integer | 50 | Maximum bubble size |

----

===== TWvdSCandlestickSeries =====

Candlestick chart for stock data.

==== PXAML ====

<code xml>
<CandlestickSeries ArgumentDataMember="Date"
                   OpenDataMember="Open"
                   HighDataMember="High"
                   LowDataMember="Low"
                   CloseDataMember="Close" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ OpenDataMember | string | '' | Open price |
^ HighDataMember | string | '' | High price |
^ LowDataMember | string | '' | Low price |
^ CloseDataMember | string | '' | Close price |
^ UpColor | TWvdSColor | clGreen | Color on gain |
^ DownColor | TWvdSColor | clRed | Color on loss |

----

===== TWvdSRadarSeries =====

Radar/Spider chart.

==== PXAML ====

<code xml>
<Chart ChartType="Radar">
  <RadarSeries ArgumentDataMember="Skill"
               ValueDataMember="Score"
               Fill="True"
               FillOpacity="0.3" />
</Chart>
</code>

----

===== TWvdSTreeMapSeries =====

TreeMap visualization.

==== PXAML ====

<code xml>
<Chart ChartType="TreeMap">
  <TreeMapSeries LabelDataMember="Name"
                 ValueDataMember="Size"
                 GroupDataMember="Category" />
</Chart>
</code>

----

===== TWvdSSankeyDiagram =====

Sankey flow diagram.

==== PXAML ====

<code xml>
<SankeyDiagram DataSource="{Binding FlowData}"
               SourceDataMember="From"
               TargetDataMember="To"
               WeightDataMember="Value" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ SourceDataMember | string | '' | Source node |
^ TargetDataMember | string | '' | Target node |
^ WeightDataMember | string | '' | Flow weight |

----

===== TWvdSWaterfallSeries =====

Waterfall chart.

==== PXAML ====

<code xml>
<WaterfallSeries ArgumentDataMember="Category"
                 ValueDataMember="Change"
                 StartValue="1000"
                 ShowTotal="True" />
</code>

==== Properties ====

| Property | Type | Default | Description |
^ StartValue | Double | 0 | Start value |
^ ShowTotal | Boolean | True | Show total |
^ PositiveColor | TWvdSColor | clGreen | Positive color |
^ NegativeColor | TWvdSColor | clRed | Negative color |

----

===== See Also =====

  * [[.:control-bibliothek|Control Library]]
  * [[.:api-controls-gauges|Gauges API]]
  * [[.:api-controls-data|Data Controls API]]