How to customize the zoomkit toolbar in Blazor Charts?

This article explains how to customize the zoomkit toolbar in Blazor Charts.

Customizing zoomkit toolbar

Blazor Charts provides an option to customize the zoomkit toolbar fill, x and y attributes using CSS style.

To achieve this scenario, you need to specify the fill color for the _Zooming_Rect element using the attribute CSS selector, and place the zoomkit at the desired location in the chart by setting the transform translate for the _Zooming_KitCollection group to the desired x and y position.

The below code example demonstrates how to customize the zoomkit toolbar in chart.

Index.razor

@using Syncfusion.Blazor.Charts
<SfChart Width="100%" Height="400px">
    <ChartZoomSettings EnableSelectionZooming="true">
    </ChartZoomSettings>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="d"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries Width="2" DataSource="@ChartData" XName="Date" YName="Price"></ChartSeries>
    </ChartSeriesCollection>
</SfChart>
<style>
    rect[id*=_Zooming_Rect]{
        fill: #ccccff !important;
    }

    g[id*=_Zooming_KitCollection] {
        transform: translate(65%, 30px) !important;
    }
</style>
@code {
    public class DataPoint
    {
        public DateTime Date { get; set; }
        public double Price { get; set; }
    }
    public List<DataPoint> ChartData { get; set; }
    protected override void OnInitialized()
    {
        ChartData = new List<DataPoint>
        {
            new DataPoint { Date = new DateTime(2023, 1, 1), Price = 100 },
            new DataPoint { Date = new DateTime(2023, 2, 1), Price = 120 },
            new DataPoint { Date = new DateTime(2023, 3, 1), Price = 110 },
            new DataPoint { Date = new DateTime(2023, 4, 1), Price = 130 },
            new DataPoint { Date = new DateTime(2023, 5, 1), Price = 125 }
        };
    }
} 

The following screenshot illustrates the output of the code snippet.

Output

Live Sample for Zoomkit Toolbar Customization

Conclusion

I hope you enjoyed learning how to customize the zoomkit toolbar in Blazor Chart Component.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!