# chartjs-plugin-fill-gaps-zero

> Chart.js plugin to fill gaps with zero in X time axis for line chart

Latest version **1.0.1** (published 2022-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install chartjs-plugin-fill-gaps-zero
pnpm add chartjs-plugin-fill-gaps-zero
yarn add chartjs-plugin-fill-gaps-zero
bun add chartjs-plugin-fill-gaps-zero
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-10-13 |
| First published | 2022-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Giacomo Rocco |
| Maintainers | giaroc |
| Keywords | chartjs, plugin, fill-gaps |

## Links

- npm: https://www.npmjs.com/package/chartjs-plugin-fill-gaps-zero
- Repository: https://github.com/giaroc/chartjs-plugin-fill-gaps-zero
- Homepage: https://github.com/giaroc/chartjs-plugin-fill-gaps-zero#readme
- Issues: https://github.com/giaroc/chartjs-plugin-fill-gaps-zero/issues
- npm.io page: https://npm.io/package/chartjs-plugin-fill-gaps-zero

## Dependencies (1)

- [moment](https://npm.io/package/moment.md) ^2.29.4

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-10-13

## README

# chartjs-plugin-fill-gaps-zero

This plugin fill gaps with zero in X time axis for line Chart. Made for Chart.js **3.X**

## Demo

[Demo](https://giaroc.github.io/chartjs-plugin-fill-gaps-zero/samples/demo/)

## Installation

#### Load directly in the browser

Load ChartJS first, then the plugin which will automatically register itself with ChartJS

```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/giaroc/chartjs-plugin-fill-gaps-zero/src/chartjs-plugin-fill-gaps-zero.min.js"></script>
```

#### Download
[Compress](https://cdn.jsdelivr.net/gh/giaroc/chartjs-plugin-fill-gaps-zero/src/chartjs-plugin-fill-gaps-zero.min.js)  
[Uncompress](https://raw.githubusercontent.com/giaroc/chartjs-plugin-fill-gaps-zero/main/src/chartjs-plugin-fill-gaps-zero.js)

#### NPM
You can also install **chartjs-plugin-fill-gaps-zero** by using node.js.

    npm install chartjs-plugin-fill-gaps-zero

## Configuration

To configure the fill-gaps-ze ro plugin you need the following options in the X axis namespace: `options.scales.x`

Name                | Type         | Description
--------------------|--------------|------------
`fillGapsWithZero`  | `boolean`    | If true enable the functionality to fill gaps with zero
`minUnit`           | `string`     | Definition of the unit (eg. `day`) to be marked as zero

### Example

```javascript
{
  type: 'line',
  data: {
    labels: [],
    datasets: []
  },
  options: {
    scales: {
      x: {
        fillGapsWithZero: true,
        minUnit: 'day',
        type: 'time',
        time: {
          unit: 'day'
        },
        grid: {
          display: false
        }
      },
      y: {
        grid: {
          display: false
        }
      }
    },
    elements: {
      line: {
        tension: .3
      }
    }
  }
}
```

## Supported chart types

    line

## Contributing

Pull requests and issues are always welcome. For bugs and feature requests, [please create an issue](https://github.com/giaroc/chartjs-plugin-fill-gaps-zero/issues).

## License

**chartjs-plugin-fill-gaps-zero.js** is available under the [MIT license](http://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/chartjs-plugin-fill-gaps-zero · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._