Dataset configuration for bar charts

Besides the data and label properties, each dataset object can contain a number of optional configuration properties. Most of them are used to configure fill and border colors and widths. They are briefly described in the following table:

Property	Value	Description
data	Number[]	An array of numbers containing the data to display (this is mandatory)
label	String	A label for the dataset
backgroundColor	String or String[]	The fill color of the bar
borderColor	String or String[]	The color of the border
borderWidth	Number or Number[]	The width of the border
hoverBackgroundColor	String or String[]	The fill when the mouse is over the bar
hoverBorderColor	String or String[]	The border color when the mouse is over the bar
hoverBorderWidth	Number or Number[]	The border width when the mouse is over the bar
borderSkipped	bottom, left, top, right	Selects which edge of the bar with no border (the default is bottom for bar, and left for horizontalBar )
yAxisID and xAxisID	An Axis ID (see Chapter 5, Scales and Grid Configuration)	Used in axis configuration

Dataset properties for bar charts

You can change the gray colored bars by adding color properties in each dataset object, or by configuring global defaults that affect all charts. The backgroundColor property receives a string containing a color specified in a legal CSS format. For example, if you want to have solid red bars, you can use the following formats:

• red
• rgb(255,0,0)
• rgba(100%,0,0,1)
• #ff0000, #f00
• hsl(0,100%,50%)
• hsla(0,100%,50%,1)

The borderColor property controls the color of the label icon. It also configures the color of the bars if the borderWidth is specified with a value greater than zero, as follows:

 const dataObj = {
     labels: labels,
     datasets: [
         {
             label: "Volume",
             data: volumes,
             borderWidth: 2,
             backgroundColor: "hsla(20,100%,80%,0.8)",
             borderColor: "hsla(0,100%,50%,1)"
         }
     ]
 }
 new Chart("ocean-volume-bar-chart", {type: "bar", data: dataObj});

The preceding code should produce the result shown as follows. The full code is available at Pages/BarChart2.html:

Applying color attributes to a bar chart (code: Pages/BarChart2.html)