Skip to content

Commit bd6a03a

Browse files
AbelHeinsbroekAbelHeinsbroek
authored
Merge pull request #12 from AbelHeinsbroek/docs
Add docs
2 parents 4916e14 + aec7285 commit bd6a03a

File tree

6 files changed

+230
-0
lines changed

6 files changed

+230
-0
lines changed

‎book.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"root": "docs",
3+
"author": "chartjs",
4+
"gitbook": "3.2.2",
5+
"plugins": [
6+
"-lunr",
7+
"-search",
8+
"search-plus",
9+
"anchorjs",
10+
"ga"
11+
],
12+
"pluginsConfig": {
13+
"anchorjs": {
14+
"icon": "#",
15+
"placement": "left",
16+
"visible": "always"
17+
},
18+
"ga": {
19+
"token": "UA-99068522-3",
20+
"configuration": "auto"
21+
},
22+
"theme-default": {
23+
"showLevel": false,
24+
"styles": {
25+
"website": "assets/style.css"
26+
}
27+
}
28+
}
29+
}

‎docs/README.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<div align="center">
2+
<centering>
3+
<img src="header.png" width='600px'/>
4+
</centering>
5+
</div>
6+
7+
8+
[Chart.js](http://www.chartjs.org/) plugin to draw vertical crosshair, zoom, interpolate values and sync chart interactions.
9+
10+
Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **2.6.0** or later.
11+
12+
## Documentation
13+
14+
{% include "SUMMARY.md" %}
15+
16+
## Example
17+
18+
```javascript
19+
new Chart(ctx, {
20+
// ... data ...
21+
options: {
22+
// ... other options ...
23+
tooltips: {
24+
mode: 'interpolate',
25+
intersect: false
26+
},
27+
plugins: {
28+
crosshair: {
29+
line: {
30+
color: '#F66', // crosshair line color
31+
width: 1 // crosshair line width
32+
},
33+
sync: {
34+
enabled: true, // enable trace line syncing with other charts
35+
group: 1, // chart group
36+
suppressTooltips: false // suppress tooltips when showing a synced tracer
37+
},
38+
zoom: {
39+
enabled: true, // enable zooming
40+
zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
41+
zoomboxBorderColor: '#48F', // border color of zoom box
42+
zoomButtonText: 'Reset Zoom', // reset zoom button text
43+
zoomButtonClass: 'reset-zoom', // reset zoom button class
44+
},
45+
callbacks: {
46+
beforeZoom: function(start, end) { // called before zoom, return false to prevent zoom
47+
return true;
48+
},
49+
afterZoom: function(start, end) { // called after zoom
50+
}
51+
}
52+
}
53+
}
54+
}
55+
});
56+
```
57+
58+
## Development
59+
60+
You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
61+
62+
> npm install
63+
64+
The following commands will then be available from the repository root:
65+
66+
> gulp build // build dist files
67+
> gulp build --watch // build and watch for changes
68+
> gulp lint // perform code linting
69+
> gulp docs // generate GitBook documentation (`dist/docs`)
70+
> gulp samples // prepare samples for release (`dist/samples`)
71+
> gulp package // create an archive with dist files and samples
72+
> gulp netlify // prepare Netlify artifacts (`dist/www`)
73+
74+
## License
75+
76+
`chartjs-plugin-crosshair` is available under the [MIT license](https://github.com/abelheinsbroek/chartjs-plugin-crosshair/blob/master/LICENSE.md).
77+

‎docs/SUMMARY.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* [Installation](installation.md)
2+
* [Options](options.md)
3+
* [Samples](https://chartjs-plugin-crosshair.netlify.com/samples)

‎docs/header.png

76 KB
Loading

‎docs/installation.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Installation
2+
3+
## npm
4+
5+
[![npm](https://img.shields.io/npm/v/chartjs-plugin-crosshair.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chartjs-plugin-crosshair) [![npm downloads](https://img.shields.io/npm/dm/chartjs-plugin-crosshair.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chartjs-plugin-crosshair)
6+
7+
npm install chartjs-plugin-crosshair --save
8+
9+
## CDN
10+
11+
[![jsdelivr](https://img.shields.io/npm/v/chartjs-plugin-crosshair.svg?label=jsdelivr&style=flat-square&maxAge=600)](https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@latest/dist/) [![jsdelivr hits](https://data.jsdelivr.com/v1/package/npm/chartjs-plugin-crosshair/badge)](https://www.jsdelivr.com/package/npm/chartjs-plugin-crosshair)
12+
13+
By default, `https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair` returns the latest (minified) version, however it's [**highly recommended**](https://www.jsdelivr.com/features) to always specify a version in order to avoid breaking changes. This can be achieved by appending `@{version}` to the url:
14+
15+
https://cdn.jsdelivr.net/npm/[email protected] // exact version
16+
https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1 // latest 1.x.x
17+
18+
Read more about jsDeliver versioning on their [website](http://www.jsdelivr.com/).
19+
20+
## Download
21+
22+
[![github](https://img.shields.io/github/release/chartjs/chartjs-plugin-crosshair.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/chartjs-plugin-crosshair/releases/latest) [![github downloads](https://img.shields.io/github/downloads/chartjs/chartjs-plugin-crosshair/total.svg?style=flat-square&maxAge=600)](http://www.somsubhra.com/github-release-stats/?username=chartjs&repository=chartjs-plugin-crosshair)
23+
24+
You can download the latest version of `chartjs-plugin-crosshair` from the [GitHub releases](https://github.com/chartjs/chartjs-plugin-crosshair/releases/latest):
25+
26+
- `chartjs-plugin-crosshair.js` (recommended for development)
27+
- `chartjs-plugin-crosshair.min.js` (recommended for production)
28+
- `chartjs-plugin-crosshair.zip` (contains `.js` and `.min.js` versions + samples)

‎docs/options.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Options
2+
3+
The plugin options can be changed at 2 different levels and with the following priority:
4+
5+
- per chart: `options.plugins.crosshair.*`
6+
- globally: `Chart.defaults.global.plugins.crosshair.*`
7+
8+
## Interpolate tooltip mode
9+
10+
This plugin exposes the `interpolation` tooltip mode, which allows for
11+
linear interpolation of values between data points.
12+
13+
The `interpolation` mode can be enabled by setting the tooltips mode to
14+
`interpolate`
15+
16+
```js
17+
options: {
18+
...
19+
tooltips: {
20+
mode: 'interpolate',
21+
intersect: false
22+
}
23+
}
24+
```
25+
26+
## Crosshair Options
27+
28+
### Crosshair line options
29+
30+
| Name | Type | Default
31+
| ---- | ---- | ----
32+
| [`color`](#color) | `String` | `#F66`
33+
| [`width`](#width) | `Number` | `1`
34+
35+
36+
#### `color`
37+
The color of the crosshair line, defaults to red (#F666)
38+
#### `width`
39+
The width of the crosshair line in pixels
40+
41+
### Chart interaction syncing
42+
The plugin allows for syncing crosshairs over multiple charts
43+
44+
| Name | Type | Default
45+
| ---- | ---- | ----
46+
| [`enabled`](#enabled) | `Boolean` | `true`
47+
| [`group`](#group) | `Number` | `1`
48+
| [`suppressTooltips`](#tooltips) | `Boolean` | `false`
49+
50+
51+
#### `enabled`
52+
Enable or disable syncing of crosshairs between charts of the same group
53+
#### `group`
54+
Limit crosshair syncing to charts belonging to the same 'group'
55+
#### `suppressTooltips`
56+
Allows for suppressing tooltips when showing a synced crosshair
57+
58+
### Zooming
59+
The plugin allows for horizontal zooming by clicking and dragging over
60+
the chart.
61+
62+
| Name | Type | Default
63+
| ---- | ---- | ----
64+
| [`enabled`](#enabled) | `Boolean` | `true`
65+
| [`zoomboxBackgroundColor`](#zoomboxBackgroundColor) | `String` | `rgba(66,133,244,0.2)`
66+
| [`zoomboxBorderColor`](#zoomboxBorderColor) | `String` | `#48F`
67+
| [`zoomButtonText`](#zoomButtonText) | `String` | `Reset Zoom`
68+
| [`zoomButtonClass`](#zoomButtonClass) | `String` | `reset-zoom`
69+
70+
#### `enabled`
71+
Enable or disable zooming by drag and drop
72+
73+
#### `zoomboxBackgroundColor`
74+
Background color of the zoombox
75+
76+
#### `zoomboxBorderColor`
77+
Border color of the zoombox
78+
79+
#### `zoomButtonText`
80+
Text of the button to reset the chart to original axis ranges.
81+
82+
#### `zoomButtonClass`
83+
Class of the button to reset the chart to original axis ranges.
84+
85+
### Callbacks
86+
87+
The plugin exposes to callbacks to handle zooming
88+
89+
#### `beforeZoom(start,end)`
90+
Called before zooming, return false to prevent the zoom
91+
#### `afterZoom(start,end)`
92+
Called after zooming, can for example be used for reloading data at a higher
93+
resolution

0 commit comments

Comments
 (0)