Merge pull request #829 from beto-rodriguez/dev

beta 700

Author: beto-rodriguez

docs/cartesianChart/legends.md

@@ -63,158 +63,61 @@ disable legends in a chart, default value is `Hidden`.
 </code></pre>
 {{~ end ~}}
 
-## Styling legends
+# Customize default legends
 
-{{~ if xaml ~}}
-A chart exposes many properties to quickly style a legend:
+You can quickly change the position, the font, the text size or the background color:
 
-<pre><code>&lt;lvc:CartesianChart
-    Series="{Binding Series}"
-    LegendPosition="Left"
-    LegendFontFamily="Courier New"
-    LegendFontSize="25"
-    LegendTextBrush="#f2f4c3"
-    LegendBackground="#480032">
-&lt;/lvc:CartesianChart>
-</code></pre>
+{{~ if xaml ~}}
+{{~ render_params_file_as_code this "~/../samples/$PlatformSamplesFolder/Axes/Multiple/$PlatformViewFile" ~}}
 {{~ end ~}}
 
 {{~ if winforms ~}}
-A chart exposes many properties to quickly style a legend:
-
-<pre><code>cartesianChart1.LegendPosition = LiveChartsCore.Measure.LegendPosition.Left;
-cartesianChart1.LegendFont = new System.Drawing.Font("Courier New", 25);
-cartesianChart1.LegendTextColor = System.Drawing.Color.FromArgb(255, 50, 50, 50);
-cartesianChart1.LegendBackColor = System.Drawing.Color.FromArgb(255, 250, 250, 250);</code></pre>
-{{~ end ~}}
-
-{{~ if blazor ~}}
-You can use css to override the style of the tooltip.
-
-<pre><code>&lt;style>
-    /*
-        You can also use css to override the styles.
-    */
-
-    .lvc-legend {
-        background-color: #fafafa !important;
-    }
-
-    .lvc-legend-item {
-        font-family: SFMono-Regular,Menlo,Monaco,Consolas !important;
-        color: #808080 !important;
-    }
-&lt;/style></code></pre>
+{{~ render_params_file_as_code this "~/../samples/WinFormsSample/Axes/Multiple/View.cs" ~}}
 {{~ end ~}}
 
-The code above would result in the following legend:
-
-![custom]({{ assets_url }}/docs/_assets/legend-custom-style.png)
-
-## Custom template
-
-{{~ if xaml || blazor ~}}
-If you need to customize more, you can also use the create your own template:
-{{~ end ~}}
-
-{{~ if avalonia ~}}
-{{~ "~/../samples/AvaloniaSample/General/TemplatedLegends/View.axaml" | render_file_as_code ~}}
-
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultLegend.axaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultLegend.axaml.cs)).
-:::
-
+{{~ if eto ~}}
+{{~ render_params_file_as_code this "~/../samples/EtoFormsSample/Axes/Multiple/View.cs" ~}}
 {{~ end ~}}
 
 {{~ if blazor ~}}
-{{~ "~/../samples/BlazorSample/Pages/General/TemplatedLegends.razor" | render_file_as_code ~}}
-
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([view](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/DefaultLegend.razor), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/DefaultLegend.razor.cs)).
-:::
-
+{{~ render_params_file_as_code this "~/../samples/BlazorSample/Pages/Axes/Multiple.razor" ~}}
 {{~ end ~}}
 
-{{~ if maui ~}}
-{{~ "~/../samples/MauiSample/General/TemplatedLegends/View.xaml" | render_file_as_code ~}}
+## View model
 
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Maui/DefaultLegend.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Maui/DefaultLegend.xaml.cs)).
-:::
-
-{{~ end ~}}
-
-{{~ if uno || unowinui ~}}
-{{~ "~/../samples/UnoSample/UnoSample.Shared/LiveChartsSamples/General/TemplatedLegends/View.xaml" | render_file_as_code ~}}
-
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Uno.WinUI/DefaultLegend.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Uno.WinUI/DefaultLegend.xaml.cs)).
-:::
-
-{{~ end ~}}
-
-{{~ if winforms ~}}
-You can create your own legend control, the key is that your control must implement `IChartLegend<SkiaSharpDrawingContext>` and then
-you have to create a new instance of that control when your chart initializes.
-
-Add a new form to your app named `CustomLegend`, then change the code behind as follows:
-
-{{~ "~/../samples/WinFormsSample/General/TemplatedLegends/CustomLegend.cs" | render_file_as_code ~}}
-
-Your legend is ready to be used, now when you create a chart, we have to pass a new instance of the tooltip we just created.
-
-<pre><code>var cartesianChart = new CartesianChart(legend: new CustomLegend())
+```c#
+[ObservableObject]
+public partial class ViewModel
 {
-    Series = viewModel.Series
-};</code></pre>
-
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultLegend.axaml.cs), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultLegend.axaml.cs)).
-:::
-
-{{~ end ~}}
+    public ISeries[] Series { get; set; } = { ... };
+    public Axis[] YAxes { get; set; } = { ... };
 
-{{~ if winui ~}}
-{{~ "~/../samples/WinUISample/WinUISample/General/TemplatedLegends/View.xaml" | render_file_as_code ~}}
+    public SolidColorPaint LegendTextPaint { get; set; } = // mark
+        new SolidColorPaint // mark
+        { // mark
+            Color = new SKColor(50, 50, 50), // mark
+            SKTypeface = SKTypeface.FromFamilyName("Courier New") // mark
+        }; // mark
 
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpVew.WinUI/DefaultLegend.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpVew.WinUI/DefaultLegend.xaml.cs)).
-:::
+    public SolidColorPaint LedgendBackgroundPaint { get; set; } = // mark
+        new SolidColorPaint(new SKColor(240, 240, 240)); // mark
+}
+```
 
-{{~ end ~}}
+![custom]({{ assets_url }}/docs/_assets/legend-custom-style.png)
 
-{{~ if wpf ~}}
-{{~ "~/../samples/WPFSample/General/TemplatedLegends/View.xaml" | render_file_as_code ~}}
+## Tooltip control from scratch
 
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.WPF/DefaultLegend.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.WPF/DefaultLegend.xaml.cs)).
-:::
+You can also create your own legend, the recommended way is to use the LiveCharts API (example bellow) but you can
+use anything as tooltip as soon as it implements the `IChartLegend<T>` interface. At the following example we build
+a custom control to render legends in our charts using the LiveCharts API.
 
-{{~ end ~}}
+## CustomLegend.cs
 
-{{~ if xamarin ~}}
-{{~ "~/../samples/XamarinSample/XamarinSample/XamarinSample/General/TemplatedLegends/View.xaml" | render_file_as_code ~}}
+{{~ render_params_file_as_code this "~/../samples/ViewModelsSamples/General/TemplatedLegends/CustomLegend.cs" ~}}
 
-:::tip
-You can find another example at the source code of the `DefaultLegend` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Xamarin.Forms/DefaultLegend.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Xamarin.Forms/DefaultLegend.xaml.cs)).
-:::
+## View
 
-{{~ end ~}}
+{{~ render_params_file_as_code this "~/../samples/$PlatformSamplesFolder/General/TemplatedLegends/$PlatformViewFile" ~}}
 
-![custom tooltip]({{ assets_url }}/docs/_assets/legend-custom-template.png)
+![custom tooltip]({{ assets_url }}/docs/_assets/legend-custom-template.png)

docs/cartesianChart/tooltips.md

@@ -189,153 +189,64 @@ new ColumnSeries<ObservablePoint>
         (chartPoint) => $"Sales at this moment: {chartPoint.PrimaryValue:C2}"
 }</code></pre>
 
-## Styling tooltips
+# Customize default tooltips
 
-{{~ if xaml ~}}
-A chart exposes many properties to quickly style a tooltip:
-
-<pre><code>&lt;lvc:CartesianChart
-    Series="{Binding Series}"
-    TooltipPosition="Left"
-    TooltipFontFamily="Courier New"
-    TooltipFontSize="25"
-    TooltipTextBrush="#f2f4c3"
-    TooltipBackground="#480032">
-&lt;/lvc:CartesianChart></code></pre>
-{{~ end ~}}
+You can quickly change the position, the font, the text size or the background color:
 
-{{~ if winforms ~}}
-A chart exposes many properties to quickly style a tooltip:
-
-<pre><code>cartesianChart1.TooltipPosition = LiveChartsCore.Measure.TooltipPosition.Left;
-cartesianChart1.TooltipFont = new System.Drawing.Font("Courier New", 25);
-cartesianChart1.TooltipTextColor = System.Drawing.Color.FromArgb(255, 242, 244, 195);
-cartesianChart1.TooltipBackColor = System.Drawing.Color.FromArgb(255, 72, 0, 50);</code></pre>
-{{~ end ~}}
+## View
 
-{{~ if blazor ~}}
-You can use css to override the style of the tooltip.
-
-<pre><code>&lt;style>
-	.lvc-tooltip {
-		background-color: #480032 !important;
-	}
-
-	.lvc-tooltip-item {
-		font-family: SFMono-Regular, Menlo, Monaco, Consolas !important;
-		color: #F2F4C3 !important;
-	}
-&lt;/style></code></pre>
+{{~ if xaml ~}}
+{{~ render_params_file_as_code this "~/../samples/$PlatformSamplesFolder/Axes/NamedLabels/$PlatformViewFile" ~}}
 {{~ end ~}}
 
-The code above would result in the following tooltip:
-
-![zooming]({{ assets_url }}/docs/_assets/tooltip-custom-style.png)
-
-## Custom template
-
-{{~ if xaml || blazor ~}}
-If you need to customize more, you can also pass your own template:
+{{~ if winforms ~}}
+{{~ render_params_file_as_code this "~/../samples/WinFormsSample/Axes/NamedLabels/View.cs" ~}}
 {{~ end ~}}
 
-{{~ if avalonia ~}}
-{{~ "~/../samples/AvaloniaSample/General/TemplatedTooltips/View.axaml" | render_file_as_code ~}}
-
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultTooltip.axaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultTooltip.axaml.cs)).
-:::
-
+{{~ if eto ~}}
+{{~ render_params_file_as_code this "~/../samples/EtoFormsSample/Axes/NamedLabels/View.cs" ~}}
 {{~ end ~}}
 
 {{~ if blazor ~}}
-{{~ "~/../samples/BlazorSample/Pages/General/TemplatedTooltips.razor" | render_file_as_code ~}}
-
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([view](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/DefaultTooltip.razor), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/DefaultTooltip.razor.cs)).
-:::
-
+{{~ render_params_file_as_code this "~/../samples/BlazorSample/Pages/Axes/NamedLabels.razor" ~}}
 {{~ end ~}}
 
-{{~ if maui ~}}
-{{~ "~/../samples/MauiSample/General/TemplatedTooltips/View.xaml" | render_file_as_code ~}}
-
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Maui/DefaultTooltip.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Maui/DefaultTooltip.xaml.cs)).
-:::
+## View model
 
-{{~ end ~}}
-
-{{~ if uno || unowinui ~}}
-{{~ "~/../samples/UnoSample/UnoSample.Shared/LiveChartsSamples/General/TemplatedTooltips/View.xaml" | render_file_as_code ~}}
-
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Uno.WinUI/DefaultTooltip.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpView.Uno.WinUI/DefaultTooltip.xaml.cs)).
-:::
-
-{{~ end ~}}
-
-{{~ if winforms ~}}
-You can create your own tooltip control, the key is that your control must implement `IChartTooltip<SkiaSharpDrawingContext>` and then
-you have to create a new instance of that control when your chart initializes.
-
-Add a new form to your app named `CustomTooltip`, then change the code behind as follows:
-
-{{~ "~/../samples/WinFormsSample/General/TemplatedTooltips/CustomTooltip.cs" | render_file_as_code ~}}
-
-Your tooltip is ready to be used, now when you create a chart, we have to pass a new instance of the tooltip we just created.
-
-<pre><code>var cartesianChart = new CartesianChart(tooltip: new CustomTooltip())
+```c#
+[ObservableObject]
+public partial class ViewModel
 {
-    Series = viewModel.Series
-};</code></pre>
+    public ISeries[] Series { get; set; } = { ... };
+    public Axis[] XAxes { get; set; } = { ... };
+    public Axis[] YAxes { get; set; } = { ... };
 
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultTooltip.axaml.cs), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Avalonia/DefaultTooltip.axaml.cs)).
-:::
+    public SolidColorPaint TooltipTextPaint { get; set; } = // mark
+        new SolidColorPaint // mark
+        { // mark
+            Color = new SKColor(242, 244, 195), // mark
+            SKTypeface = SKTypeface.FromFamilyName("Courier New") // mark
+        }; // mark
 
-{{~ end ~}}
+    public SolidColorPaint TooltipBackgroundPaint { get; set; } = // mark
+        new SolidColorPaint(new SKColor(72, 0, 50)); // mark
+}
+```
 
-{{~ if winui ~}}
-{{~ "~/../samples/WinUISample/WinUISample/General/TemplatedTooltips/View.xaml" | render_file_as_code ~}}
+![image]({{ assets_url }}/docs/samples/general/customTooltips/styling-tooltips.png)
 
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpVew.WinUI/DefaultTooltip.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharpVew.WinUI/DefaultTooltip.xaml.cs)).
-:::
+## Custom tooltip control
 
-{{~ end ~}}
+You can also create your own tooltip, the recommended way is to use the LiveCharts API (example bellow) but you can
+use anything as tooltip as soon as it implements the `IChartTooltip<T>` interface. In the following example we build
+a custom control to render tooltips in out charts using the LiveCharts API.
 
-{{~ if wpf ~}}
-{{~ "~/../samples/WPFSample/General/TemplatedTooltips/View.xaml" | render_file_as_code ~}}
+## CustomTooltip.cs
 
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.WPF/DefaultTooltip.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.WPF/DefaultTooltip.xaml.cs)).
-:::
+{{~ render_params_file_as_code this "~/../samples/ViewModelsSamples/General/TemplatedTooltips/CustomTooltip.cs" ~}}
 
-{{~ end ~}}
-
-{{~ if xamarin ~}}
-{{~ "~/../samples/XamarinSample/XamarinSample/XamarinSample/General/TemplatedTooltips/View.xaml" | render_file_as_code ~}}
+## View
 
-:::tip
-You can find a another example at the source code of the `DefaultTooltip` class 
-([xaml](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Xamarin.Forms/DefaultTooltip.xaml), 
-[code](https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp.Xamarin.Forms/DefaultTooltip.xaml.cs)).
-:::
-
-{{~ end ~}}
+{{~ render_params_file_as_code this "~/../samples/$PlatformSamplesFolder/General/TemplatedTooltips/$PlatformViewFile" ~}}
 
-![custom tooltip]({{ assets_url }}/docs/_assets/tooltip-custom-template.png)
+![custom tooltip]({{ assets_url }}/docs/_assets/tooltip-custom-template.png)