diff --git a/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor b/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor index 11b75d61..f0d9d43c 100644 --- a/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor +++ b/docs/BlazorApexCharts.Docs/Components/ChartTypes/PieCharts/LabelFormatter.razor @@ -1,6 +1,6 @@  + Title="Order Gross Value" Options=options> + Title="Order Value" OnXAxisLabelClick=XAxisLabelClick> + ShowDataLabels + OrderByDescending="e=>e.Y" /> + OrderByDescending="e=>e.Y" /> @code { private List orders { get; set; } = SampleData.GetOrders(); - - - - } \ No newline at end of file + private void XAxisLabelClick(XAxisLabelClicked data) + { + var gg = data.LabelIndex; + } +} \ No newline at end of file diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor index e84b82fd..8374078b 100644 --- a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor +++ b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/LegendClick.razor @@ -12,6 +12,12 @@ + + + + + + diff --git a/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/NoAxisChart.razor b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/NoAxisChart.razor new file mode 100644 index 00000000..26073aa1 --- /dev/null +++ b/docs/BlazorApexCharts.Docs/Components/Events/LegendClick/NoAxisChart.razor @@ -0,0 +1,39 @@ + + + + + + + @if(currentLegend != null) + { + +

You clicked @currentLegend.DataPoint.X

+ +
+ } + +
+ +@code { + private List Orders { get; set; } = SampleData.GetOrders(); + + + private LegendClicked currentLegend = null; + protected override void OnInitialized() + { + + } + + private void LegendClicked(LegendClicked data) + { + currentLegend = data; + } +} \ No newline at end of file diff --git a/src/Blazor-ApexCharts/Internal/JSHandler.cs b/src/Blazor-ApexCharts/Internal/JSHandler.cs index f085bebf..bd6901a4 100644 --- a/src/Blazor-ApexCharts/Internal/JSHandler.cs +++ b/src/Blazor-ApexCharts/Internal/JSHandler.cs @@ -146,11 +146,23 @@ public void JSSelected(JSSelection jsSelection) [JSInvokable] public void JSLegendClicked(JSLegendClicked jsLegendClicked) { - var series = ChartReference.Options.Series.ElementAt(jsLegendClicked.SeriesIndex); + Series series = null; + IDataPoint point = null; + if (ChartReference.IsNoAxisChart) + { + series = ChartReference.Options.Series.First(); + point = series.Data.ElementAt(jsLegendClicked.SeriesIndex); + } + else + { + series = ChartReference.Options.Series.ElementAt(jsLegendClicked.SeriesIndex); + } + var legendClicked = new LegendClicked { Series = series, - Collapsed = jsLegendClicked.Collapsed + Collapsed = jsLegendClicked.Collapsed, + DataPoint = point, }; //Invert if Toggle series is set to flase (default == true) diff --git a/src/Blazor-ApexCharts/Series/LegendClicked.cs b/src/Blazor-ApexCharts/Series/LegendClicked.cs index 2c2f2146..2d94528c 100644 --- a/src/Blazor-ApexCharts/Series/LegendClicked.cs +++ b/src/Blazor-ApexCharts/Series/LegendClicked.cs @@ -14,6 +14,12 @@ public class LegendClicked where TItem : class /// /// Specifies whether the series associated with the legend item is collapsed /// - public bool Collapsed { get; set; } + public bool Collapsed { get; set; } + + /// + /// The clicked datapoint, Only valid for no axis charts + /// + public IDataPoint DataPoint { get; set; } + } }