{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-zooming",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Chart",
  "variant": "zooming",
  "dependencies": [
    "Syncfusion.Blazor.Charts"
  ],
  "description": "Temperature chart provides date-time navigation with a bottom scrollbar, nearest-point tooltips, and responsive title styling.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/chart-zooming.md"
  },
  "files": [
    {
      "target": "src/components/chart-zooming/Chart.razor",
      "content": "@page \"/chart/zooming\"\n@using Syncfusion.Blazor.Charts\n@using System.Globalization;\n\n<div class=\"control-section\" align='center'>\n    <SfChart Title=\"@TitleText\" SubTitle=\"@SubTitleText\" Width=\"@Width\">\n        <ChartTitleStyle TextOverflow=\"TextOverflow.Wrap\" Position=\"@TitlePosition\" TextAlignment=\"@TitleAlignment\" ></ChartTitleStyle>\n        <ChartSubTitleStyle Size=\"@Size\" FontWeight=\"600\" Color=\"@FontColor\" TextAlignment=\"Alignment.Near\"></ChartSubTitleStyle>\n        <ChartEvents TooltipRender=\"TooltipRender\" SizeChanged=\"SizeChangedEvent\"></ChartEvents>\n        <ChartMargin Top=\"60\"></ChartMargin>\n        <ChartPrimaryXAxis ValueType=\"Syncfusion.Blazor.Charts.ValueType.DateTime\"\n            EdgeLabelPlacement=\"EdgeLabelPlacement.Shift\">\n            <ChartAxisMajorGridLines Width=\"0\"></ChartAxisMajorGridLines>\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n            <ChartAxisScrollbarSettings Position=\"ScrollbarPosition.Bottom\" />\n        </ChartPrimaryXAxis>\n        <ChartPrimaryYAxis Title=\"Temperature\" RangePadding=\"ChartRangePadding.None\" Maximum=\"1\" Interval=\"0.2\"\n            Minimum=\"-0.6\" LabelFormat=\"{value}°C\" EnableScrollbarOnZooming=\"false\">\n            <ChartAxisLineStyle Width=\"0\"></ChartAxisLineStyle>\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n        </ChartPrimaryYAxis>\n        <ChartTooltipSettings Enable=\"true\" Header=\"<b>${point.x}</b>\" ShowNearestTooltip=\"true\"></ChartTooltipSettings>\n        <ChartLegendSettings Visible=\"false\"></ChartLegendSettings>\n        <ChartZoomSettings EnableMouseWheelZooming=\"true\" EnableScrollbar=\"true\" EnablePinchZooming=\"true\" EnableDeferredZooming=\"true\"\n            EnableSelectionZooming=\"true\" ToolbarDisplayMode=\"ToolbarMode.Always\" Mode=\"ZoomMode.X\">\n            <ChartZoomToolbarPosition Y=\"-60\"></ChartZoomToolbarPosition></ChartZoomSettings>\n        <ChartSeriesCollection>\n            <ChartSeries DataSource=\"@seriesData\" XName=\"X\" Width=\"2\" Opacity=\"1\" YName=\"Y\" Type=\"ChartSeriesType.Line\">\n                <ChartMarker AllowHighlight=\"false\"></ChartMarker>\n            </ChartSeries>\n        </ChartSeriesCollection>\n        <ChartArea>\n            <ChartAreaBorder Width=\"0\"></ChartAreaBorder>\n        </ChartArea>\n    </SfChart>\n</div>\n<style>\n    [id^=\"chart\"][id$=\"Arrow_PrimaryXAxis\"],\n    [id^=\"chart\"][id$=\"rightCircle_PrimaryXAxis\"],\n    [id^=\"chart\"][id$=\"leftCircle_PrimaryXAxis\"] {\n        display: none;\n    }\n</style>\n@code {\n    public string Width { get; set; } = \"90%\";\n    private List<TemperaturePoint> seriesData = new List<TemperaturePoint>();\n    private string TitleText = \"Global Warming: Monthly Temperature Anomalies\";\n    private string SubTitleText = string.Empty;\n    private Alignment TitleAlignment = Alignment.Near;\n    private string Size = \"14px\";\n    private string FontColor = \"#242424\";\n    private ChartTitlePosition TitlePosition = ChartTitlePosition.Top;\n    private List<double> data = new List<double>\n    {\n        614.398886, 521.54577, 607.41, 528.674034, 649.02, 634.855, 548.42, 639.808083, 599.36, 643.823032, 470.58, 547.33856,\n        543.24, 350.4686, 453.804214, 358.51972, 127.98, 465.66413, 121.67, 276.50556, 130.28, 290.43361, 247.47, 56.006424,\n        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,\n        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,\n        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,\n        238.23318, 358.73, 233.33633, 408.9, 528.79991, 212.4, 226.28374, 535.47, 225.42172, 358.46, 225.79953, 159.09,\n        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,\n        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,\n        339.30057, 629.59, 357.09732, 461.06, 271.47717, 336.29, 384.07816, 142.83913, 734.0764, 429.46431, 325.61528,\n        524.30643, 623.9551, 522.99226, 420.52591, 418.719, 216.7613, 512.78256, 209.27946, 305.67441, 502.32135, 399.06017,\n        297.9212,\n    };\n    protected override void OnInitialized()\n    {\n        for (int i = 0; i < data.Count; i++)\n        {\n            DateTime date = new DateTime(1941, 1, 1).AddMonths(i + 1);\n            seriesData.Add(new TemperaturePoint\n            {\n                X = date,\n                Y = data[i] / 1000 - 0.5\n            });\n        }\n    }\n    public class TemperaturePoint\n    {\n        public DateTime X { get; set; }\n        public double Y { get; set; }\n    }\n    public void TooltipRender(TooltipRenderEventArgs args)\n    { \n        args.Text = $\"Temperature: <b>{Convert.ToDouble(args.Data.PointY, CultureInfo.InvariantCulture):F2}°C</b>\";\n    }\n    public void SizeChangedEvent(ResizeEventArgs args)\n    {\n        if (args.CurrentSize.Width < 600)\n        {\n            TitleText = \"Global Warming: Monthly\";\n            SubTitleText = \"Temperature Anomalies\";\n            StateHasChanged();\n        }\n        else\n        {\n            TitleText = \"Global Warming: Monthly Temperature Anomalies\";\n            SubTitleText = string.Empty;\n            StateHasChanged();\n        }\n    }\n}"
    }
  ]
}