# chart-zooming

> Temperature chart provides date-time navigation with a bottom scrollbar, nearest-point tooltips, and responsive title styling.

**Framework:** blazor  **Component:** Chart  **Variant:** zooming

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/chart-zooming.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-zooming/Chart.razor

```razor
@page "/chart/zooming"
@using Syncfusion.Blazor.Charts
@using System.Globalization;

<div class="control-section" align='center'>
    <SfChart Title="@TitleText" SubTitle="@SubTitleText" Width="@Width">
        <ChartTitleStyle TextOverflow="TextOverflow.Wrap" Position="@TitlePosition" TextAlignment="@TitleAlignment" ></ChartTitleStyle>
        <ChartSubTitleStyle Size="@Size" FontWeight="600" Color="@FontColor" TextAlignment="Alignment.Near"></ChartSubTitleStyle>
        <ChartEvents TooltipRender="TooltipRender" SizeChanged="SizeChangedEvent"></ChartEvents>
        <ChartMargin Top="60"></ChartMargin>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
            EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisScrollbarSettings Position="ScrollbarPosition.Bottom" />
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Temperature" RangePadding="ChartRangePadding.None" Maximum="1" Interval="0.2"
            Minimum="-0.6" LabelFormat="{value}°C" EnableScrollbarOnZooming="false">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Header="<b>${point.x}</b>" ShowNearestTooltip="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartZoomSettings EnableMouseWheelZooming="true" EnableScrollbar="true" EnablePinchZooming="true" EnableDeferredZooming="true"
            EnableSelectionZooming="true" ToolbarDisplayMode="ToolbarMode.Always" Mode="ZoomMode.X">
            <ChartZoomToolbarPosition Y="-60"></ChartZoomToolbarPosition></ChartZoomSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@seriesData" XName="X" Width="2" Opacity="1" YName="Y" Type="ChartSeriesType.Line">
                <ChartMarker AllowHighlight="false"></ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
    </SfChart>
</div>
<style>
    [id^="chart"][id$="Arrow_PrimaryXAxis"],
    [id^="chart"][id$="rightCircle_PrimaryXAxis"],
    [id^="chart"][id$="leftCircle_PrimaryXAxis"] {
        display: none;
    }
</style>
@code {
    public string Width { get; set; } = "90%";
    private List<TemperaturePoint> seriesData = new List<TemperaturePoint>();
    private string TitleText = "Global Warming: Monthly Temperature Anomalies";
    private string SubTitleText = string.Empty;
    private Alignment TitleAlignment = Alignment.Near;
    private string Size = "14px";
    private string FontColor = "#242424";
    private ChartTitlePosition TitlePosition = ChartTitlePosition.Top;
    private List<double> data = new List<double>
    {
        614.398886, 521.54577, 607.41, 528.674034, 649.02, 634.855, 548.42, 639.808083, 599.36, 643.823032, 470.58, 547.33856,
        543.24, 350.4686, 453.804214, 358.51972, 127.98, 465.66413, 121.67, 276.50556, 130.28, 290.43361, 247.47, 56.006424,
        56.66, 120.11538, 272.18, 330.8197, 329.2, 141.8835, 491.31, 554.09436, 340.3, 666.27214, 386.05, 675.33273, 355.49,
        479.08539, 587.95, 478.83736, 613.33, 477.08728, 665.84, 277.7215, 360.77, 582.38945, 685.93, 690.52167, 526, 400.62505,
        305.46, 209.73143, 393.93, 218.58078, 454.97, 228.5354, 405.23, 238.29027, 251.37, 343.4591, 228.44, 542.32413, 403.53,
        238.23318, 358.73, 233.33633, 408.9, 528.79991, 212.4, 226.28374, 535.47, 225.42172, 358.46, 225.79953, 159.09,
        226.62344, 224.74, 227.80173, 317.94, 230.89693, 182.87, 234.7583, 158.2, 238.13414, 80.91, 241.77034, 428.72, 245.7227,
        138.35, 252.26382, 244.54, 262.16412, 320.02, 275.77518, 696.06, 291.17618, 189.3, 306.58655, 234.2, 321.97433, 138.79,
        339.30057, 629.59, 357.09732, 461.06, 271.47717, 336.29, 384.07816, 142.83913, 734.0764, 429.46431, 325.61528,
        524.30643, 623.9551, 522.99226, 420.52591, 418.719, 216.7613, 512.78256, 209.27946, 305.67441, 502.32135, 399.06017,
        297.9212,
    };
    protected override void OnInitialized()
    {
        for (int i = 0; i < data.Count; i++)
        {
            DateTime date = new DateTime(1941, 1, 1).AddMonths(i + 1);
            seriesData.Add(new TemperaturePoint
            {
                X = date,
                Y = data[i] / 1000 - 0.5
            });
        }
    }
    public class TemperaturePoint
    {
        public DateTime X { get; set; }
        public double Y { get; set; }
    }
    public void TooltipRender(TooltipRenderEventArgs args)
    { 
        args.Text = $"Temperature: <b>{Convert.ToDouble(args.Data.PointY, CultureInfo.InvariantCulture):F2}°C</b>";
    }
    public void SizeChangedEvent(ResizeEventArgs args)
    {
        if (args.CurrentSize.Width < 600)
        {
            TitleText = "Global Warming: Monthly";
            SubTitleText = "Temperature Anomalies";
            StateHasChanged();
        }
        else
        {
            TitleText = "Global Warming: Monthly Temperature Anomalies";
            SubTitleText = string.Empty;
            StateHasChanged();
        }
    }
}
```