RizzyUI

Radar Chart Examples

A radar chart is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.

Basic Usage

Source
<RzChart Configure=@(c => c
    .Data(d => d
        .Labels("Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running")
        .Datasets(ds => {
            ds.Radar()
              .Label("Dataset 1")
              .Data(65, 59, 90, 81, 56, 55, 40)
              .Fill(true)
              .BackgroundColor("rgba(59, 130, 246, 0.2)")
              .BorderColor("var(--chart-1)");

            ds.Radar()
              .Label("Dataset 2")
              .Data(28, 48, 40, 19, 96, 27, 100)
              .Fill(true)
              .BackgroundColor("rgba(168, 85, 247, 0.2)")
              .BorderColor("var(--chart-2)");
        })
    )
    .Options(o => o
        .Responsive(true)
        .MaintainAspectRatio(false)
        .Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Radar Chart")))
    )) />