Configuring colors, fonts, and responsiveness

Charts created with Chart.js are born responsive and fit nicely into your screen, but they are also born gray. In this section, you will discover how to change some style properties.

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...