Chart defaults

The Chart.default context contains an object for each chart type supported in Chart.js. The types are in the following table, which also lists some of the properties previously configured in each one. These properties may override the global defaults for chart styles and elements (Chart.default.global) and the default properties for scales (Chart.default.scales). You can define new defaults by changing these properties in the Chart.default context, or locally inside an options object:

Object	Description	Default properties (selection)
`bar`	The default properties for bar charts	hover.mode = 'label' scales.xAxes[0].type = 'category' scales.yAxes[0].type = 'linear'
`horizontalBar`	The default properties for horizontal bar charts	hover.mode = 'index' scales.xAxes[0].type = 'linear' scales.yAxes[0].type = 'category' elements.rectangle.borderSkipped = 'left'
`pie`	The default properties and callbacks for pie charts	circumference = 2 * Math.PI cutoutPercentage = 0 hover.mode = 'single'
`doughnut`	The default properties and callbacks for doughnut charts	circumference = 2 * Math.PI cutoutPercentage = 50 hover.mode = 'single'
`line`	The default properties and callbacks for line charts	hover.mode = 'label' scales.xAxes[0] = {type: 'category', id: 'x-axis-0'} scales.yAxes[0] = {type: 'linear', id: 'y-axis-0'} showLines = true, spanGaps = false
`radar`	The default properties for radar charts	elements.line.tension = 0 scale.type = 'radialLinear'
`polarArea`	The default properties for polar area charts	angleLines.display = false gridLines.circular = true pointLabels.display = false ticks.beginAtZero = true type = "radialLinear" startAngle = Math.PI / 2
`scatter`	The default properties for scatter charts	hover.mode = 'single' showLines = false scales.xAxes[0] = {type: 'linear', id: 'x-axis-1'} scales.yAxes[0] = {type: 'linear', id: 'y-axis-1'}
`bubble`	The default properties for bubble charts	hover.mode = 'single' scales.xAxes[0] = {type: 'linear', id: 'x-axis-0'} scales.yAxes[0] = {type: 'linear', id: 'y-axis-0'}

Default options in Charts.defaults for different types of charts

You can check the current values of your default properties by printing them to your JavaScript console and inspecting the object tree, with console.log(). The following code will print the context root:

console.log(Chart.defaults);

You can also inspect (and modify the properties of) the chart instance. In this case, you need to assign the new chart to a variable handle (see Config/defaults-1-global-config.html):

const chart = new Chart(…);
console.log("Chart Data, chart.config.data);
console.log("Chart Options, chart.options);

Table of Contents for Chart defaults

Create new playlist

Sign In

Sign Up

Table of Contents for
Chart defaults