Docs / Area charts

Range with line

Pro

A low/high band with a line (e.g. the average) drawn on top.

Illustration — rendered output uses live data.

Example

blade
<chart:area-range-line
    :categories="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']"
    :low="[10, 12, 9, 14, 11]"
    :high="[20, 25, 18, 27, 22]"
    :line="[15, 18, 13, 20, 16]"
/>

Props

Prop Type Default Description
categories array [] Labels for the x-axis.
low array [] Lower bound per category.
high array [] Upper bound per category.
line array [] The overlaid line values.

Plus the common props (height, theme, model, class).

This is a Pro component

Unlock it and every other Pro chart with a one-time license.

Get WireCharts Pro