Search results

Axis Hidden in Blazor Chart component

By using the OnChartMouseClick 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 OnChartMouseClickevent, you can get the legend’s target ids. Using this event, you can also get the YAxisName of each axis, based on which you can hide the axis line when clicking the legend.

<ChartEvents OnChartMouseClick="@ChartMouseClick"></ChartEvents>
 public void ChartMouseClick(IMouseEventArgs Args)
        {
            Int32 Id;
            if (((Args.Target).IndexOf("chart_legend_text") > -1) || ((Args.Target).IndexOf("chart_legend_shape") > -1))
            {
                if ((Args.Target).IndexOf("chart_legend_text") > -1)
                {
                    Id = Int32.Parse((Args.Target).Split("chart_legend_text_")[1]);
                }
                else
                {
                    Id = Int32.Parse(Args.Target.Split("chart_legend_shape_")[1]);

                }
                if (Id == 0)
                {
                    this.AxisVisible1 = this.SeriesVisible1 = !this.SeriesVisible1;
                }
                else if (Id == 1)
                {
                    this.AxisVisible2 = this.SeriesVisible2 = !this.SeriesVisible2;
                }
                else
                {
                    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 OnChartMouseClick="@ChartMouseClick"></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;
        public double YValue;
        public double YValue2;
        public double YValue3;
    }

    public void ChartMouseClick(IMouseEventArgs Args)
    {
        Int32 ID;
        if (((Args.Target).IndexOf("chart_legend_text") > -1) || ((Args.Target).IndexOf("chart_legend_shape") > -1))
        {
            if ((Args.Target).IndexOf("chart_legend_text") > -1)
            {
                ID = Int32.Parse((Args.Target).Split("chart_legend_text_")[1]);
            }
            else
            {
                ID = Int32.Parse(Args.Target.Split("chart_legend_shape_")[1]);

            }

            if (ID == 0)
            {
                this.AxisVisible1 = this.SeriesVisible1 = !this.SeriesVisible1;
            }
            else if (ID == 1)
            {
                this.AxisVisible2 = this.SeriesVisible2 = !this.SeriesVisible2;
            }
            else
            {
                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 },
    };
}