RizzyUI

Scatter Chart Examples

Scatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.

Basic Usage

Source
<RzChart Configure=@(c => c
    .Data(d => d
        .Datasets(ds => ds
            .Scatter()
            .Label("Scatter Dataset")
            .Data(new object[] {
                new { x = -10, y = 0 },
                new { x = 0, y = 10 },
                new { x = 10, y = 5 },
                new { x = 0.5, y = 5.5 }
            })
            .BackgroundColor("var(--chart-1)")
        )
    )
    .Options(o => o
        .Responsive(true)
        .MaintainAspectRatio(false)
        .Scales(s => s
            .ScaleId("x")
            .Type("linear")
            .Position(AxisPosition.Bottom)
        )
        .Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Scatter Chart")))
    )) />