Radar Chart

Reference

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.

helperjs output

@(Html.Chart("canvasId")
.Data(d => d
    .Labels("Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running")
    .Datasets(ds =>
    {
        ds.Radar()
        .Label("My First Dataset")
        .Data(65, 59, 90, 81, 56, 55, 40)
        .Fill(true);

        ds.Radar()
        .Label("My Second Dataset")
        .Data(28, 48, 40, 19, 96, 27, 100)
        .Fill(true);
    }))
.Render())

new Chart(document.getElementById('canvasId'),
{
  "data": {
    "labels": [
      "Eating",
      "Drinking",
      "Sleeping",
      "Designing",
      "Coding",
      "Cycling",
      "Running"
    ],
    "datasets": [
      {
        "data": [
          65.0,
          59.0,
          90.0,
          81.0,
          56.0,
          55.0,
          40.0
        ],
        "fill": true,
        "label": "My First Dataset",
        "type": "radar"
      },
      {
        "data": [
          28.0,
          48.0,
          40.0,
          19.0,
          96.0,
          27.0,
          100.0
        ],
        "fill": true,
        "label": "My Second Dataset",
        "type": "radar"
      }
    ]
  }
});

Common Dataset Options¶

These options are common to all datasets.

BackgroundColor¶

The line fill color.

.BackgroundColor("green")

BorderColor¶

The line color.

.BorderColor("grey")

BorderWidth¶

The line width (in pixels).

.BorderWidth(1)

Clip¶

How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea.

.Clip(3)

Is clip enabled?

.Clip(false)

Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}

.Clip(c => c.Left(5).Top(false).Right(-2).Bottom(0))

Hidden¶

Configure the visibility of the dataset. Using hidden: true will hide the dataset from being rendered in the Chart.

.Hidden(true)

HoverBackgroundColor¶

Background color when hovered.

.HoverBackgroundColor("blue")

HoverBorderColor¶

Border color when hovered.

.HoverBorderColor("grey")

HoverBorderWidth¶

The line width (in pixels) when hovered.

.HoverBorderWidth(3)

Label¶

The label for the dataset which appears in the legend and tooltips.

.Label("First Bar Dataset")

Parsing¶

How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.

.Parsing(true)

Parsing with key.

.Parsing("key")

Parsing with x and y axis keys.

.Parsing("xKey", "yKey")

Point Dataset Options¶

BorderCapStyle¶

Cap style of the line. Default 'butt'

.BorderCapStyle(CapStyle.Square)

BorderDash¶

Length and spacing of dashes.

.BorderDash(15, 3, 3, 3)

BorderDashOffset¶

Offset for line dashes. Default 0.0

.BorderDashOffset(0.1)

BorderJoinStyle¶

Line joint style. Default 'miter'

.BorderJoinStyle(JoinStyle.Bevel)

HoverBorderCapStyle¶

Border cap style when hovered.

.HoverBorderCapStyle(CapStyle.Square)

HoverBorderDash¶

Length and spacing of dashes when hovered.

.HoverBorderDash(15, 3, 3, 3)

HoverBorderDashOffset¶

Offset for line dashes when hovered.

.HoverBorderDashOffset(0.1)

HoverBorderJoinStyle¶

Line joint style when hovered.

.HoverBorderJoinStyle(oinStyle.Bevel)

Fill¶

Is enabled? Default false

.Fill(true)

How to fill the area under the line.

.Fill("stack")

Fill with configuration.

.Fill(f => f.Above("Blue").Below("Red"))

Order¶

The drawing order of dataset. Also affects order for stacking, tooltip and legend.

.Order(1)

PointBackgroundColor¶

The fill color for points.

.PointBackgroundColor("green")

PointBorderColor¶

The border color for points.

.PointBorderColor("grey")

PointBorderWidth¶

The width of the point border in pixels. Default 1

.PointBorderWidth(2)

PointHitRadius¶

The pixel size of the non-displayed point that reacts to mouse events. Default 1

.PointHitRadius(2)

PointHoverBackgroundColor¶

Point background color when hovered.

.PointHoverBackgroundColor("green")

PointHoverBorderColor¶

Point border color when hovered.

.PointHoverBorderColor("grey")

PointHoverBorderWidth¶

Border width of point when hovered. Default 1

.PointHoverBorderWidth(2)

PointHoverRadius¶

The radius of the point when hovered. Default 4

.PointHoverRadius(5)

PointRadius¶

The radius of the point shape. If set to 0, the point is not rendered. Default 3

.PointRadius(2)

PointRotation¶

The rotation of the point in degrees. Default 0

.PointRotation(1)

PointStyle¶

Is style of the point enabled?

.PointStyle(true)

Style of the point. Default 'circle'

.PointStyle(PointStyle.Cross)

SpanGaps¶

If true, lines will be drawn between points with no or null data. If false, points with null data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.

.SpanGaps(true)

Tension¶

Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.

.Tension(0.1)

Radar Dataset Options¶

Data¶

Sets the data for the Radar Dataset.

.Data(1.0, 3.2, 5.0, 7.0)