Skip to content

Commit

Permalink
Merge pull request #829 from beto-rodriguez/dev
Browse files Browse the repository at this point in the history 
beta 700
  • Loading branch information
@beto-rodriguez
beto-rodriguez authored Dec 19, 2022
2 parents bd04814 + a10aa33 commit 362ec81
Show file tree
Hide file tree
Showing 184 changed files with 5,105 additions and 3,152 deletions.
165 changes: 34 additions & 131 deletions docs/cartesianChart/legends.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
163 changes: 37 additions & 126 deletions docs/cartesianChart/tooltips.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,153 +189,64 @@ new ColumnSeries&lt;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)
Loading

0 comments on commit 362ec81

Please sign in to comment.