Blazorise SVG Chart Annotations

Add contextual markers and regions directly to native SVG charts.

SVG chart annotations can be declared as child components or supplied through SvgChartOptions.Annotations. Use them for thresholds, release markers, operating ranges, target areas, and labeled points.

Examples

Line annotations

Use line annotations for thresholds and category markers, and label annotations for free-positioned notes.
1 series, 8 categories.Service levelThreshold and release annotations020406080100JanFebMarAprMayJunJulAugTargetReleaseStabilized
<SvgLineChart TItem="MonthlyService"
              Items="@services"
              Options="@options">
    <SvgChartTitle Title='@("Service level")' Subtitle='@("Threshold and release annotations")' />
    <SvgChartTooltip Enabled />
    <SvgChartLineAnnotation YMin="80"
                            YMax="80"
                            Border="@( new SvgChartBorderOptions { Color = Color.Danger, Width = 2 } )"
                            DashPattern="6 4"
                            Label="@thresholdLabel" />
    <SvgChartLineAnnotation XMin="3.5"
                            XMax="3.5"
                            Border="@( new SvgChartBorderOptions { Color = Color.Warning, Width = 2 } )"
                            DashPattern="4 4"
                            Label="@releaseLabel" />
    <SvgChartLabelAnnotation X="5"
                             Y="91"
                             Label="@noteLabel" />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="Uptime" Value="@( item => item.Uptime )" Color="Color.Primary" StrokeWidth="3" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Visible = false },
    };

    private readonly SvgChartAnnotationLabelOptions thresholdLabel = new()
    {
        Visible = true,
        Text = "Target",
        Position = SvgChartAnnotationLabelPosition.End,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Danger, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions releaseLabel = new()
    {
        Visible = true,
        Text = "Release",
        Position = SvgChartAnnotationLabelPosition.Start,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Warning, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions noteLabel = new()
    {
        Visible = true,
        Text = "Stabilized",
        Position = SvgChartAnnotationLabelPosition.Center,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Primary, Width = 1, Radius = 3 },
    };

    private readonly List<MonthlyService> services =
    [
        new() { Month = "Jan", Uptime = 73 },
        new() { Month = "Feb", Uptime = 78 },
        new() { Month = "Mar", Uptime = 84 },
        new() { Month = "Apr", Uptime = 82 },
        new() { Month = "May", Uptime = 88 },
        new() { Month = "Jun", Uptime = 91 },
        new() { Month = "Jul", Uptime = 86 },
        new() { Month = "Aug", Uptime = 93 },
    ];

    private sealed class MonthlyService
    {
        public string Month { get; set; }

        public double Uptime { get; set; }
    }
}

Shape annotations

Use box and ellipse annotations to mark regions, and point annotations to highlight a specific value.
1 series, 0 categories.Store performanceRegion and point annotations01020304050020406080100WatchTarget areaSelected storeStores
<SvgScatterChart TItem="StoreSample"
                 Items="@stores"
                 Options="@options">
    <SvgChartTitle Title='@("Store performance")' Subtitle='@("Region and point annotations")' />
    <SvgChartTooltip Enabled />
    <SvgChartEllipseAnnotation XMin="20"
                               XMax="40"
                               YMin="60"
                               YMax="90"
                               BackgroundColor="Color.Success"
                               Border="@( new SvgChartBorderOptions { Color = Color.Success, Width = 1 } )"
                               Opacity="0.12"
                               Label="@targetLabel" />
    <SvgChartPointAnnotation X="33"
                             Y="74"
                             Radius="6"
                             BackgroundColor="Color.Warning"
                             Border="@( new SvgChartBorderOptions { Color = Color.Danger, Width = 2 } )"
                             Label="@pointLabel" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgScatterSeries Name="Stores" XValue="@( item => item.Traffic )" YValue="@( item => item.Sales )" Color="Color.Primary" MarkerRadius="5" />
</SvgScatterChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        XAxis = new()
        {
            GridLines = new() { Visible = true },
        },
        YAxis = new()
        {
            BeginAtZero = true,
            TickCount = 6,
        },
        Annotations =
        [
            new SvgChartBoxAnnotationOptions
            {
                XMin = 10,
                XMax = 20,
                YMin = 40,
                YMax = 65,
                BackgroundColor = Color.Info,
                Opacity = 0.1,
                Label = new()
                {
                    Visible = true,
                    Text = "Watch",
                    Position = SvgChartAnnotationLabelPosition.Start,
                    BackgroundColor = "#ffffff",
                },
            },
        ],
    };

    private readonly SvgChartAnnotationLabelOptions targetLabel = new()
    {
        Visible = true,
        Text = "Target area",
        Position = SvgChartAnnotationLabelPosition.Start,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Success, Width = 1, Radius = 3 },
    };

    private readonly SvgChartAnnotationLabelOptions pointLabel = new()
    {
        Visible = true,
        Text = "Selected store",
        Position = SvgChartAnnotationLabelPosition.End,
        BackgroundColor = "#ffffff",
        Border = new() { Color = Color.Warning, Width = 1, Radius = 3 },
    };

    private readonly List<StoreSample> stores =
    [
        new() { Traffic = 8, Sales = 42 },
        new() { Traffic = 13, Sales = 48 },
        new() { Traffic = 18, Sales = 51 },
        new() { Traffic = 22, Sales = 64 },
        new() { Traffic = 27, Sales = 62 },
        new() { Traffic = 33, Sales = 74 },
        new() { Traffic = 38, Sales = 83 },
        new() { Traffic = 45, Sales = 88 },
    ];

    private sealed class StoreSample
    {
        public double Traffic { get; set; }

        public double Sales { get; set; }
    }
}

Options annotations

Configure annotations through SvgChartOptions.Annotations when chart options are created in C#.
1 series, 6 categories.Deployment healthAnnotations configured from chart options020406080100BuildTestCanaryRampStableObserveDeployTargetRecovered
<SvgLineChart TItem="DeploymentSample"
              Items="@samples"
              Options="@options">
    <SvgChartTitle Title='@("Deployment health")' Subtitle='@("Annotations configured from chart options")' />
    <SvgChartTooltip Enabled />
    <SvgChartCategoryAxis Value="@( item => item.Step )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgLineSeries Name="Health" Value="@( item => item.Score )" Color="Color.Primary" StrokeWidth="3" MarkerRadius="4" />
</SvgLineChart>

@code {
    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Visible = false },
        Annotations =
        [
            new SvgChartBoxAnnotationOptions
            {
                XMin = 2.5,
                XMax = 4.5,
                YMin = 0,
                YMax = 100,
                BackgroundColor = Color.Warning,
                Opacity = 0.12,
                Label = new()
                {
                    Visible = true,
                    Text = "Deploy",
                    Position = SvgChartAnnotationLabelPosition.Start,
                    BackgroundColor = "#ffffff",
                },
            },
            new SvgChartLineAnnotationOptions
            {
                YMin = 80,
                YMax = 80,
                Border = new() { Color = Color.Success, Width = 2 },
                DashPattern = "6 4",
                Label = new()
                {
                    Visible = true,
                    Text = "Target",
                    Position = SvgChartAnnotationLabelPosition.End,
                    BackgroundColor = "#ffffff",
                    Border = new() { Color = Color.Success, Width = 1, Radius = 3 },
                },
            },
            new SvgChartPointAnnotationOptions
            {
                X = 4,
                Y = 88,
                Radius = 6,
                BackgroundColor = Color.Primary,
                Border = new() { Color = Color.Light, Width = 2 },
                Label = new()
                {
                    Visible = true,
                    Text = "Recovered",
                    Position = SvgChartAnnotationLabelPosition.End,
                    BackgroundColor = "#ffffff",
                },
            },
        ],
    };

    private readonly List<DeploymentSample> samples =
    [
        new() { Step = "Build", Score = 86 },
        new() { Step = "Test", Score = 84 },
        new() { Step = "Canary", Score = 63 },
        new() { Step = "Ramp", Score = 72 },
        new() { Step = "Stable", Score = 88 },
        new() { Step = "Observe", Score = 91 },
    ];

    private sealed class DeploymentSample
    {
        public string Step { get; set; }

        public double Score { get; set; }
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page