Bar Chart Examples
This page focuses on bar chart patterns built with Use These options are common to all datasets. The line fill color. The line color. The line width (in pixels). How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Is clip enabled? Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} Configure the visibility of the dataset. Using hidden: true will hide the dataset from being rendered in the Chart. Background color when hovered. Border color when hovered. The line width (in pixels) when hovered. The label for the dataset which appears in the legend and tooltips. 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 with key. Parsing with x and y axis keys. Bar chart specific dataset options. Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value. Percent (0-1) of the available width each bar should be within the category width. If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, barPercentage and categoryPercentage are ignored. If set to 'flex', the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using barPercentage and categoryPercentage. There is no gap when the percentage options are This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart. Skip all borders ( If this value is a number, it is applied to all sides of the rectangle ( If this value is an object, the left property defines the left border width. Similarly, the right, top, and bottom properties can also be specified. Omitted borders and If this value is a number, it is applied to all corners of the rectangle ( If this value is an object, the topLeft property defines the top-left corners border radius. Similarly, the Percent (0-1) of the available width each category should be within the sample width. Sets the data for the Dataset. Should the bars be grouped on index axis. When true, all the datasets at same index value will be placed next to each other centering on that index value. When false, each bar is placed on its actual index-axis value. Default The bar border radius when hovered (in pixels). Default The base axis of the dataset. The drawing order of dataset. Also affects order for stacking, tooltip and legend. Default Is style of the point enabled? Default Style of the point. If true, null or undefined values will not be used for spacing calculations when determining bar size. The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Default The ID of the x-axis to plot this dataset on. The ID of the y-axis to plot this dataset on.RzChart and inline fluent builder configuration.<RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar()
.Label("Fully Rounded")
.Data(65, 59, 80, 81, 56, 55, 40)
.BackgroundColor("var(--chart-1)")
.BorderWidth(2)
.BorderColor("transparent")
.BorderRadius(100)
.BorderSkipped(false);
ds.Bar()
.Label("Small Radius")
.Data(28, 48, 40, 19, 86, 27, 90)
.BackgroundColor("var(--chart-2)")
.BorderWidth(2)
.BorderColor("transparent")
.BorderRadius(5);
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Bar Chart - Border Radius")))
)" /><RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar().Label("Dataset 1").BackgroundColor("var(--chart-1)")
.Data(new object[] { new[] { -10, 10 }, new[] { -15, 5 }, new[] { 5, 25 }, new[] { 10, 30 }, new[] { -5, 15 }, new[] { 0, 20 }, new[] { -20, 0 } });
ds.Bar().Label("Dataset 2").BackgroundColor("var(--chart-2)")
.Data(new object[] { new[] { 10, -5 }, new[] { 5, -15 }, new[] { 20, 10 }, new[] { 25, 5 }, new[] { 15, -10 }, new[] { 10, -5 }, new[] { 0, -20 } });
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Bar Chart - Floating")))
)" /><RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar().Label("Dataset 1").Data(65, 59, 80, 81, 56, 55, 40).BackgroundColor("var(--chart-1)").IndexAxis(IndexAxis.Y);
ds.Bar().Label("Dataset 2").Data(28, 48, 40, 19, 86, 27, 90).BackgroundColor("var(--chart-2)").IndexAxis(IndexAxis.Y);
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Legend(l => l.Position(LegendPosition.Right)).Title(t => t.Display(true).Text("Chart.js Horizontal Bar Chart")))
)" /><RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar().Label("Dataset 1").Data(65, -59, 80, -81, 56, 55, -40).BackgroundColor("var(--chart-1)");
ds.Bar().Label("Dataset 2").Data(-28, 48, -40, 19, -86, 27, 90).BackgroundColor("var(--chart-2)");
ds.Bar().Label("Dataset 3").Data(18, 38, 20, 9, 66, 17, 70).BackgroundColor("var(--chart-3)");
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Bar Chart - Stacked")))
.Scales(s => {
s.ScaleId("x").Stacked(true);
s.ScaleId("y").Stacked(true);
})
)" /><RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar().Label("Dataset 1").Data(65, 59, 80, 81, 56, 55, 40).BackgroundColor("var(--chart-1)").Stack("Stack 0");
ds.Bar().Label("Dataset 2").Data(28, 48, 40, 19, 86, 27, 90).BackgroundColor("var(--chart-2)").Stack("Stack 0");
ds.Bar().Label("Dataset 3").Data(18, 38, 20, 9, 66, 17, 70).BackgroundColor("var(--chart-3)").Stack("Stack 1");
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Title(t => t.Display(true).Text("Chart.js Bar Chart - Stacked Groups")))
.Scales(s => {
s.ScaleId("x").Stacked(true);
s.ScaleId("y").Stacked(true);
})
)" /><RzChart Configure="c => c
.Data(d => d
.Labels([ "January", "February", "March", "April", "May", "June", "July" ])
.Datasets(ds => {
ds.Bar().Label("Dataset 1").Data(65, 59, 80, 81, 56, 55, 40).BackgroundColor("var(--chart-1)");
ds.Bar().Label("Dataset 2").Data(28, 48, 40, 19, 86, 27, 90).BackgroundColor("var(--chart-2)");
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Legend(l => l.Position(LegendPosition.Top)).Title(t => t.Display(true).Text("Chart.js Bar Chart")))
)" />.Bar() inside .Datasets(ds => ...) to build a bar dataset and chain configuration methods.<RzChart Configure="c => c
.Data(d => d
.Labels([ "Q1", "Q2", "Q3", "Q4" ])
.Datasets(ds => {
ds.Bar()
.Label("Revenue")
.Data(120, 150, 132, 168)
.BackgroundColor("var(--chart-4)")
.BorderColor("var(--chart-5)")
.BorderWidth(2)
.BorderRadius(8)
.Stack("Finance");
})
)
.Options(o => o
.Responsive(true)
.MaintainAspectRatio(false)
.Plugins(p => p.Title(t => t.Display(true).Text("Bar() Fluent Builder Example")))
)" />Method Purpose Example Label(string)Legend/display name for the dataset. .Label("Revenue")Data(...)Numeric values or floating ranges for each label. .Data(10, 20, 30)BackgroundColor(string)Fill color of bars. .BackgroundColor("var(--chart-1)")BorderColor(string)Stroke color around each bar. .BorderColor("var(--chart-2)")BorderWidth(int)Pixel width of bar border. .BorderWidth(2)BorderRadius(int)Rounds bar corners. .BorderRadius(8)BorderSkipped(bool)Controls whether Chart.js skips the base border. .BorderSkipped(false)IndexAxis(IndexAxis)Switches orientation to horizontal with IndexAxis.Y..IndexAxis(IndexAxis.Y)Stack(string)Assigns dataset to a stack group. .Stack("Stack 0")Common Dataset Options
BackgroundColor
.BackgroundColor("green").BackgroundColors("rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)")BorderColor
.BorderColor("grey").BorderColors("yellow", "blue")BorderWidth
.BorderWidth(1)Clip
.Clip(3).Clip(false).Clip(c => c.Left(5).Top(false).Right(-2).Bottom(0))Hidden
.Hidden(true)HoverBackgroundColor
.HoverBackgroundColor("blue").HoverBackgroundColors("blue", "green")HoverBorderColor
.HoverBorderColor("grey").HoverBorderColors("grey", "blue")HoverBorderWidth
.HoverBorderWidth(3)Label
.Label("First Bar Dataset")Parsing
.Parsing(true).Parsing("key").Parsing("xKey", "yKey")Bar Dataset Options
Base
.Base(1)BarPercentage
1.0 will take the whole category width and put the bars right next to each other. Default 0.9.BarPercentage(0.4)BarThickness
.BarThickness(2)1. This mode generates bars with different widths when data are not evenly spaced..BarThickness("flex")BorderSkipped
.BorderSkipped(Skipped.Start)true), or don't skip any borders (false)..BorderSkipped(true)BorderWidth
left, top, right, bottom), except borderSkipped. Default 0.BorderWidth(3)borderSkipped are skipped..BorderWidth(bw => bw.Top(3).Left(2).Right(3).Bottom(0))BorderRadius
topLeft, topRight, bottomLeft, bottomRight), except corners touching the borderSkipped. Default 0.BorderRadius(1)topRight, bottomLeft, and bottomRight..BorderRadius(br => br.TopLeft(2).TopRight(3).BottomLeft(2).BottomRight(3))CategoryPercentage
.CategoryPercentage(0.3)Data
.Data(1, 3, 5, 7).Data(1.0, 3.2, 5.0, 7.0).Data(IList<object> data)Grouped
true.Grouped(false)HoverBorderRadius
0.HoverBorderRadius(1)IndexAxis
'x' for vertical bars and 'y' for horizontal bars..IndexAxis(IndexAxis.X)Order
0.Order(1)PointStyle
'circle' External Link.PointStyle(true).PointStyle(PointStyle.Cross)SkipNull
.SkipNull(true)Stack
'bar'.Stack("bar")XAxisID
.XAxisID("xAxis")YAxisID
.YAxisID("yAxis")