diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 24b46a38..a55fa36d 100755 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -134,6 +134,7 @@ module.exports = { title: 'Wheel Zoom', children: [ 'wheel/category', + 'wheel/category-min-range', 'wheel/log', 'wheel/time', 'wheel/over-scale-mode', diff --git a/docs/samples/wheel/category-min-range.md b/docs/samples/wheel/category-min-range.md new file mode 100644 index 00000000..09af5b95 --- /dev/null +++ b/docs/samples/wheel/category-min-range.md @@ -0,0 +1,98 @@ +# Category Scale + minRange + +```js chart-editor +// +const DATA_COUNT = 20; +const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100}; +const data = { + labels: Utils.months({count: DATA_COUNT}), + datasets: [{ + label: 'Dataset 1', + borderColor: Utils.randomColor(0.7), + backgroundColor: Utils.randomColor(0.5), + data: Utils.numbers(NUMBER_CFG), + }, { + label: 'Dataset 2', + borderColor: Utils.randomColor(0.7), + backgroundColor: Utils.randomColor(0.5), + data: Utils.numbers(NUMBER_CFG), + }, { + label: 'Dataset 3', + borderColor: Utils.randomColor(0.7), + backgroundColor: Utils.randomColor(0.5), + data: Utils.numbers(NUMBER_CFG), + }] +}; +// + +// +const scaleOpts = { + grid: { + borderColor: Utils.randomColor(1), + color: 'rgba( 0, 0, 0, 0.1)', + }, + title: { + display: true, + text: (ctx) => ctx.scale.axis + ' axis', + } +}; +const scales = { + x: { + type: 'category', + min: 5, + max: 11, + }, + y: { + type: 'linear' + }, +}; +Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts)); +// + +// +const config = { + type: 'bar', + data: data, + options: { + scales: scales, + plugins: { + zoom: { + pan: { + enabled: true, + mode: 'x', + threshold: 5, + }, + zoom: { + wheel: { + enabled: true + }, + pinch: { + enabled: true + }, + mode: 'x', + }, + limits: { + x: { + minRange: 4 + } + } + }, + }, + } +}; +// + +const actions = [ + { + name: 'Reset zoom', + handler(chart) { + chart.resetZoom(); + } + } +]; + +module.exports = { + actions, + config, +}; +```