https://github.com/komed3/chartjs-plugin-area
Area chart controller for Chart.js with dual-color thresholds and multi-band zones
https://github.com/komed3/chartjs-plugin-area
area-chart chartjs chartjs-plugin
Last synced: about 13 hours ago
JSON representation
Area chart controller for Chart.js with dual-color thresholds and multi-band zones
- Host: GitHub
- URL: https://github.com/komed3/chartjs-plugin-area
- Owner: komed3
- License: mit
- Created: 2025-12-12T18:17:43.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2026-05-15T21:31:03.000Z (14 days ago)
- Last Synced: 2026-05-16T00:10:36.387Z (14 days ago)
- Topics: area-chart, chartjs, chartjs-plugin
- Language: TypeScript
- Homepage: https://npmjs.com/chartjs-plugin-area
- Size: 296 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chart.js Area Controller
Area chart controller for Chart.js supporting dual-color thresholds and multi-band color zones.
## Installation
Install via npm:
```bash
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
}
} );
```
### Dataset Options
- **`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.
### Examples
**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' }
]
} ]
```
## License
Source code is licensed unter the **MIT LICENSE**
Visit project at https://github.com/komed3/chartjs-plugin-area
**© 2025 Paul Köhler ([komed3](https://github.com/komed3))**