Search results

Axis Hidden in Blazor Chart component

By using the OnLegendClick event, you can hide the axis line through legend.

To hide the axis line through legend click, follow the given steps:

Step 1:

Create a chart with multiple axes.

By using the OnLegendClickevent, you can get the Series Name. Using this event, based on which you can hide the axis line when clicking the legend.

<ChartEvents OnLegendClick="LegendClick"></ChartEvents>
 void LegendClick(LegendClickEventArgs args)
    {
        if (args.Series.Name == "England")
        {
            this.AxisVisible1 = this.SeriesVisible1 = !this.SeriesVisible1;
        }
        else if(args.Series.Name == "US")
        {
            this.AxisVisible2 = this.SeriesVisible2 = !this.SeriesVisible2;
        }
        else if(args.Series.Name == "West Indies")
        {
            this.AxisVisible3 = this.SeriesVisible3 = !this.SeriesVisible3;
        }
    }
axis-hide.razor
@using Syncfusion.Blazor.Charts

<SfChart @ref="ChartObj" ID="chart" Title="England vs West Indies">
    <ChartMargin Left="100" Right="100"></ChartMargin>
    <ChartTooltipSettings Enable="true" Format="${point.x}th Over : <b>${point.y} Runs</b>"></ChartTooltipSettings>
    <ChartEvents OnLegendClick="LegendClick"></ChartEvents>
    <ChartPrimaryYAxis Visible="AxisVisible1"></ChartPrimaryYAxis>
    <ChartAxes>
        <ChartAxis OpposedPosition="true" RowIndex="0" Name="yAxis" Visible="AxisVisible2">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartAxis>
        <ChartAxis OpposedPosition="true" RowIndex="0" Name="yAxis1" Visible="AxisVisible3">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartAxis>
    </ChartAxes>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" Width="2" Name="England" Fill="#1e90ff" Type="ChartSeriesType.Column">
        </ChartSeries>

        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue2" Width="2" Name="US" Fill="green" YAxisName="yAxis" Type="ChartSeriesType.Column">
        </ChartSeries>

        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue3" Width="2" Name="West Indies" Fill="#b22222" YAxisName="yAxis1" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>


@code{
    SfChart ChartObj;
    private bool AxisVisible1 { get; set; } = true;
    private bool AxisVisible2 { get; set; } = true;
    private bool AxisVisible3 { get; set; } = true;
    private bool SeriesVisible1 { get; set; } = true;
    private bool SeriesVisible2 { get; set; } = true;
    private bool SeriesVisible3 { get; set; } = true;
    public class ChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
        public double YValue2 { get; set; }
        public double YValue3{ get; set; }
    }
    void LegendClick(LegendClickEventArgs args)
    {
        if (args.Series.Name == "England")
        {
            this.AxisVisible1 = this.SeriesVisible1 = !this.SeriesVisible1;
        }
        else if(args.Series.Name == "US")
        {
            this.AxisVisible2 = this.SeriesVisible2 = !this.SeriesVisible2;
        }
        else if(args.Series.Name == "West Indies")
        {
            this.AxisVisible3 = this.SeriesVisible3 = !this.SeriesVisible3;
        }
    }
   
    public List<ChartData> Data = new List<ChartData>
    {
            new ChartData { XValue = 16, YValue = 2, YValue2 = 12, YValue3 = 7 },
            new ChartData { XValue = 17, YValue = 14, YValue2 = 10, YValue3 = 7 },
            new ChartData { XValue = 18, YValue = 7, YValue2 = 17, YValue3 = 11 },
            new ChartData { XValue = 19, YValue = 7, YValue2 = 20, YValue3 = 8 },
            new ChartData { XValue = 20, YValue = 10, YValue2 = 16, YValue3 = 24 },
    };
}