Line Chart Examples
This page focuses on line chart patterns built with RzChart and direct inline fluent builder configuration.
Interpolation Modes
<RzChart Configure=@(c => c
.Data(d => d
.Labels("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12")
.Datasets(ds => {
ds.Line()
.Label("Cubic interpolation (default)")
.Data(new object[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 })
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.CubicInterpolationMode(InterpolationMode.Default)
.Tension(0.4);
ds.Line()
.Label("Cubic interpolation (monotone)")
.Data(new object[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 })
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)")
.CubicInterpolationMode(InterpolationMode.Monotone)
.Tension(0.4);
ds.Line()
.Label("Linear interpolation (tension 0)")
.Data(new object[] { 0, 20, 20, 60, 60, 120, null, 180, 120, 125, 105, 110, 170 })
.BorderColor("var(--chart-3)")
.BackgroundColor("var(--chart-3)")
.Tension(0);
})
)
.Options(o => o
.Responsive(true)
.Interaction(i => i.Mode(InteractionMode.Index).Intersect(false))
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Cubic interpolation mode"))
)
)) />Line Chart
<RzChart Configure=@(c => c
.Data(d => d
.Labels("January", "February", "March", "April", "May", "June", "July")
.Datasets(ds => {
ds.Line()
.Label("Dataset 1")
.Data(65, 59, 80, 81, 56, 55, 40)
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)");
ds.Line()
.Label("Dataset 2")
.Data(28, 48, 40, 19, 86, 27, 90)
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)");
})
)
.Options(o => o
.Responsive(true)
.Plugins(p => p
.Legend(l => l.Position(LegendPosition.Top))
.Title(t => t.Display(true).Text("Chart.js Line Chart"))
)
)) />Multi Axis Line Chart
<RzChart Configure=@(c => c
.Data(d => d
.Labels("January", "February", "March", "April", "May", "June", "July")
.Datasets(ds => {
ds.Line()
.Label("Dataset 1")
.Data(65, 59, 80, 81, 56, 55, 40)
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.YAxisID("y");
ds.Line()
.Label("Dataset 2")
.Data(28, 48, 40, 19, 86, 27, 90)
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)")
.YAxisID("y1");
})
)
.Options(o => o
.Responsive(true)
.Interaction(i => i.Mode(InteractionMode.Index).Intersect(false))
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Multi Axis"))
)
.Scales(s => {
s.ScaleId("y").Type("linear").Display(true).Position(AxisPosition.Left);
s.ScaleId("y1").Type("linear").Display(true).Position(AxisPosition.Right).Grid(g => g.DrawOnChartArea(false));
})
)) />Point Styling
<RzChart Configure=@(c => c
.Data(d => d
.Labels("Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6")
.Datasets(ds => {
ds.Line()
.Label("Circle")
.Data(10, 20, 15, 30, 25, 40)
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.PointStyle(PointStyle.Circle)
.PointRadius(10)
.PointHoverRadius(15);
ds.Line()
.Label("Triangle")
.Data(15, 25, 20, 35, 30, 45)
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)")
.PointStyle(PointStyle.Triangle)
.PointRadius(10)
.PointHoverRadius(15);
ds.Line()
.Label("Rect")
.Data(20, 30, 25, 40, 35, 50)
.BorderColor("var(--chart-3)")
.BackgroundColor("var(--chart-3)")
.PointStyle(PointStyle.Rect)
.PointRadius(10)
.PointHoverRadius(15);
})
)
.Options(o => o
.Responsive(true)
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Point Styling"))
)
)) />Line Segment Styling
<RzChart Configure=@(c => c
.Data(d => d
.Labels("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.Datasets(ds => ds
.Line()
.Label("Dataset 1")
.Data(new object[] { 65, 59, null, 81, 56, 55 })
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.Segment("window.myLineSegmentStyles")
)
)
.Options(o => o
.Responsive(true)
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Segment Styling"))
)
)) />Stepped Line Charts
<RzChart Configure=@(c => c
.Data(d => d
.Labels("Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6")
.Datasets(ds => {
ds.Line()
.Label("False")
.Data(10, 20, 15, 30, 25, 40)
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.Stepped(false);
ds.Line()
.Label("True")
.Data(15, 25, 20, 35, 30, 45)
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)")
.Stepped(true);
ds.Line()
.Label("Before")
.Data(20, 30, 25, 40, 35, 50)
.BorderColor("var(--chart-3)")
.BackgroundColor("var(--chart-3)")
.Stepped("before");
ds.Line()
.Label("After")
.Data(25, 35, 30, 45, 40, 55)
.BorderColor("var(--chart-4)")
.BackgroundColor("var(--chart-4)")
.Stepped("after");
ds.Line()
.Label("Middle")
.Data(30, 40, 35, 50, 45, 60)
.BorderColor("var(--chart-5)")
.BackgroundColor("var(--chart-5)")
.Stepped("middle");
})
)
.Options(o => o
.Responsive(true)
.Interaction(i => i.Mode(InteractionMode.Index).Intersect(false))
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Stepped"))
)
)) />Line Styling
<RzChart Configure=@(c => c
.Data(d => d
.Labels("January", "February", "March", "April", "May", "June", "July")
.Datasets(ds => {
ds.Line()
.Label("Unfilled")
.Data(65, 59, 80, 81, 56, 55, 40)
.BorderColor("var(--chart-1)")
.BackgroundColor("var(--chart-1)")
.Fill(false);
ds.Line()
.Label("Dashed")
.Data(28, 48, 40, 19, 86, 27, 90)
.BorderColor("var(--chart-2)")
.BackgroundColor("var(--chart-2)")
.BorderDash(5, 5)
.Fill(false);
ds.Line()
.Label("Filled")
.Data(18, 48, 77, 9, 100, 27, 40)
.BorderColor("var(--chart-3)")
.BackgroundColor("var(--chart-3)")
.Fill(true);
})
)
.Options(o => o
.Responsive(true)
.Interaction(i => i.Mode(InteractionMode.Index).Intersect(false))
.Plugins(p => p
.Title(t => t.Display(true).Text("Chart.js Line Chart - Styling"))
)
)) />Common Dataset Options
These options are common to all datasets.
BackgroundColor
The line fill color.
.BackgroundColor("green").BackgroundColors("rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)")BorderColor
The line color.
.BorderColor("grey").BorderColors("yellow", "blue")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").HoverBackgroundColors("blue", "green")HoverBorderColor
Border color when hovered.
.HoverBorderColor("grey").HoverBorderColors("grey", "blue")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' External Link
.BorderCapStyle(CapStyle.Square)BorderDash
Length and spacing of dashes. External Link
.BorderDash(15, 3, 3, 3)BorderDashOffset
Offset for line dashes. Default 0.0 External Link
.BorderDashOffset(0.1)BorderJoinStyle
External Link Line joint style. Default 'miter'
.BorderJoinStyle(JoinStyle.Bevel)HoverBorderCapStyle
Border cap style when hovered. External Link
.HoverBorderCapStyle(CapStyle.Square)HoverBorderDash
Length and spacing of dashes when hovered. External Link
.HoverBorderDash(15, 3, 3, 3)HoverBorderDashOffset
Offset for line dashes when hovered. External Link
.HoverBorderDashOffset(0.1)HoverBorderJoinStyle
Line joint style when hovered. External Link
.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)Line Dataset Options
CubicInterpolationMode
The following interpolation modes are supported, 'default' and 'monotone'.
.CubicInterpolationMode(InterpolationMode.Monotone)Data
Sets the data for the Dataset.
.Data(1, 3, 5, 7).Data(1.0, 3.2, 5.0, 7.0).Data(IList<object> data)DrawActiveElementsOnTop
Draw the active points of a dataset over the other points of the dataset. Default true
.DrawActiveElementsOnTop(false)IndexAxis
The base axis of the dataset. 'x' for horizontal lines and 'y' for vertical lines. Default 'x'
.IndexAxis(IndexAxis.Y)Segment
Line segment styles can be overridden by scriptable options in the segment object. To get the segment object from a function, set a funtion name.
.Segment("segmentStyleFunction")function segmentStyleFunction(ctx) {
return {
borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
borderDash: ctx => skipped(ctx, [6, 6]),
};
}ShowLine
If false, the line is not drawn for this dataset. Default true
.ShowLine(false)Stack
The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Default 'line'
.Stack("line")Stepped
If the stepped value is set to anything other than false, 'tension' will be ignored. External Link
.Stepped(true).Stepped("after")XAxisID
The ID of the x-axis to plot this dataset on.
.XAxisID("my-x-axis")YAxisID
The ID of the y-axis to plot this dataset on.
.YAxisID("my-y-axis")