Area chart controller for Chart.js with dual-color thresholds and multi-band zones
npm install chartjs-plugin-areabash
npm install chartjs-plugin-area
`
CommonJS (CJS)
`js
const { AreaController } = require( 'chartjs-plugin-area' );
`
UMD (Browser)
`html
`
Usage
`js
const chart = new ChartJS( ctx, {
type: 'area',
data: {
labels: [ 'Jan', 'Feb', 'Mar', ... ],
datasets: [ {
label: 'Sales',
data: [ 10, -5, 20, ... ],
// Dataset options below
} ]
},
options: {
// Chart options
}
} );
`
$3
- color < ChartJS.Color > – Color for positive values.
- negativeColor < ChartJS.Color > – Color for negative values.
- threshold < number, default: 0 > – Threshold value to separate positive and negative colors.
- thresholdColor < ChartJS.Color, optional > – Color for the threshold line (fades into area colors).
- fillOpacity < number, 0-1, default: 0.6 > – Opacity for the fill area.
- hoverState < boolean, default: false > – Enable hover state styling.
- hidePoints < boolean, default: false > – Hide data points on the chart.
- colorPointsByValue < boolean, default: true > – Color points based on their values.
- pointOpacity < number, 0-1, default: 1 > – Opacity for data points.
- colorZones < AreaChartColorZone[] > – Array of color zones for dynamic coloring.
Inherited options
- fill < boolean, 'origin', 'start', 'end', default: 'origin' > – Fill area under the line.
- showLine < boolean, default: true > – Show the line connecting data points.
AreaChartColorZone
- from < number > – Starting value of the zone.
- to < number > – Ending value of the zone.
- color < ChartJS.Color > – Color associated with the zone.
- opacity < number, optional, 0-1 > – Opacity for the zone.
- fadeTo < ChartJS.Color, optional > – Color to fade to at the end of the zone.
$3
Dual-Color Threshold
`js
datasets: [ {
data: [ 10, -5, 20 ],
color: '#4ecdc4',
negativeColor: '#ff6b6b',
threshold: 0
} ]
`
Multi-Band Color Zones
`js
datasets: [ {
data: [ 10, 50, 30 ],
colorZones: [
{ from: 0, to: 20, color: '#4ecdc4' },
{ from: 20, to: 40, color: '#ffdd59' },
{ from: 40, to: 60, color: '#ff6b6b' }
]
} ]
``