Skip to main content

BarDataSet

Namespace: Wisej.Web.Ext.ChartJS3

Assembly: Wisej.Web.Ext.ChartJS3 (4.1.0.0)

Specialized data set for the Bar chart.

public class BarDataSet : DataSet

The DataSetCollection creates this type of data set when the ChartType is Bar or HorizontalBar. Color arrays with a single entry are sent to the client as a single color.

Example:

this.chartJS31.ChartType = ChartType.Bar;
this.chartJS31.Labels = new[] { "North", "South", "East", "West" };

var units = (BarDataSet)this.chartJS31.DataSets.Add("Units");
units.Data = new object[] { 320, 210, 180, 260 };
units.BackgroundColor = new[] { Color.CornflowerBlue };

Constructors​

Instance member BarDataSet()​

Constructs a new instance of BarDataSet.

The new data set has Type set to Bar.

Example:

var bars = new BarDataSet
{
	Label = "Budget",
	Data = new object[] { 5000, 7200, 6100 }
};
this.chartJS31.DataSets.Add(bars);

Properties​

Instance member BackgroundColor​

Color[]: Returns or sets the fill colors of the data set. One entry is the default color for all the bars, otherwise each bar can define a different color.

Value: An array of Color values, or null (the default) to use the Chart.js default.

Hides the inherited BackgroundColor and maps to the Chart.js dataset "backgroundColor" property. An array with a single entry is sent to the client as a single color.

Example:

var bars = (BarDataSet)this.chartJS31.DataSets.Add("Score");
bars.Data = new object[] { 72, 45, 90 };

// one color per bar.
bars.BackgroundColor = new[] { Color.Goldenrod, Color.IndianRed, Color.SeaGreen };
this.chartJS31.Update();

Instance member BorderColor​

Color[]: Returns or sets the border colors of the data set. One entry is the default color for all the bars, otherwise each bar can define a different border color.

Value: An array of Color values, or null (the default) to use the Chart.js default.

Hides the inherited BorderColor and maps to the Chart.js dataset "borderColor" property. The border is visible only when BorderWidth is greater than 0.

Example:

var bars = (BarDataSet)this.chartJS31.DataSets[0];
bars.BorderColor = new[] { Color.Navy };
bars.BorderWidth = 2;
this.chartJS31.Update();

Instance member HoverBackgroundColor​

Color[]: Returns or sets the hover colors of the data set. One entry is the default color for all the bars, otherwise each bar can define a different hover background color.

Value: An array of Color values, or null (the default) to use the Chart.js default.

Maps to the Chart.js dataset "hoverBackgroundColor" property. An array with a single entry is sent to the client as a single color.

Example:

var bars = (BarDataSet)this.chartJS31.DataSets[0];
bars.BackgroundColor = new[] { Color.LightSteelBlue };
bars.HoverBackgroundColor = new[] { Color.SteelBlue };
this.chartJS31.Update();

Instance member HoverBorderColor​

Color: Returns or sets the border color when hovered. (Default: Color [Empty])

Value: The hover border Color. The default is Empty.

Maps to the Chart.js dataset "hoverBorderColor" property.

Example:

var bars = (BarDataSet)this.chartJS31.DataSets[0];
bars.HoverBorderColor = Color.Black;
bars.HoverBorderWidth = 3;
this.chartJS31.Update();

Instance member HoverBorderRadius​

Int32: Returns or sets the border radius when hovered (in pixels). (Default: 0)

Value: The hover border radius in pixels. The default is 0.

Maps to the Chart.js dataset "hoverBorderRadius" property.

Example:

// round the corners of the bar under the pointer.
var bars = (BarDataSet)this.chartJS31.DataSets[0];
bars.HoverBorderRadius = 6;
this.chartJS31.Update();

Instance member HoverBorderWidth​

Int32: Returns or sets the border width when hovered (in pixels). (Default: 1)

Value: The hover border width in pixels. The default is 1.

Maps to the Chart.js dataset "hoverBorderWidth" property.

Example:

var bars = (BarDataSet)this.chartJS31.DataSets.Add("Tickets");
bars.Data = new object[] { 14, 22, 9 };
bars.HoverBorderColor = Color.DarkRed;
bars.HoverBorderWidth = 2;
this.chartJS31.Update();

Instance member Stack​

String: Returns or sets the ID of the group to which this data set belongs (when stacked, each group will be a separate stack). (Default: null)

Value: The ID of the stack group, or null (the default).

Maps to the Chart.js dataset "stack" property. The bars are stacked only when stacking is enabled, for example with Stacked or Stacked.

Example:

var options = (BarOptions)this.chartJS31.Options;
options.Stacked = true;

((BarDataSet)this.chartJS31.DataSets.Add("2023 Q1")).Stack = "2023";
((BarDataSet)this.chartJS31.DataSets.Add("2023 Q2")).Stack = "2023";
((BarDataSet)this.chartJS31.DataSets.Add("2024 Q1")).Stack = "2024";

Inherited By​

NameDescription
HorizontalBarDataSetSpecialized data set for the HorizontalBar chart.