Showing preview only (2,869K chars total). Download the full file or copy to clipboard to get everything.
Repository: chartjs/Chart.js
Branch: master
Commit: a15355686107
Files: 1068
Total size: 2.5 MB
Directory structure:
gitextract_dt3kbibo/
├── .browserslistrc
├── .codeclimate.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.yml
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug.yml
│ │ ├── config.yml
│ │ ├── docs.yml
│ │ └── feature.yml
│ ├── ISSUE_TEMPLATE.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ ├── dependabot.yml
│ ├── release-drafter.yml
│ └── workflows/
│ ├── ci.yml
│ ├── compressed-size.yml
│ ├── deploy-docs.yml
│ ├── release-drafter.yml
│ └── release.yml
├── .gitignore
├── .htmllintrc
├── LICENSE.md
├── MAINTAINING.md
├── README.md
├── auto/
│ ├── auto.cjs
│ ├── auto.d.ts
│ ├── auto.js
│ └── package.json
├── composer.json
├── docs/
│ ├── .vuepress/
│ │ ├── config.ts
│ │ ├── redirects
│ │ └── styles/
│ │ └── index.styl
│ ├── axes/
│ │ ├── _common.md
│ │ ├── _common_ticks.md
│ │ ├── cartesian/
│ │ │ ├── _common.md
│ │ │ ├── _common_ticks.md
│ │ │ ├── category.md
│ │ │ ├── index.md
│ │ │ ├── linear.md
│ │ │ ├── logarithmic.md
│ │ │ ├── time.md
│ │ │ └── timeseries.md
│ │ ├── index.md
│ │ ├── labelling.md
│ │ ├── radial/
│ │ │ ├── index.md
│ │ │ └── linear.md
│ │ └── styling.md
│ ├── charts/
│ │ ├── area.md
│ │ ├── bar.md
│ │ ├── bubble.md
│ │ ├── doughnut.md
│ │ ├── line.md
│ │ ├── mixed.md
│ │ ├── polar.md
│ │ ├── radar.md
│ │ └── scatter.md
│ ├── configuration/
│ │ ├── animations.md
│ │ ├── canvas-background.md
│ │ ├── decimation.md
│ │ ├── device-pixel-ratio.md
│ │ ├── elements.md
│ │ ├── index.md
│ │ ├── interactions.md
│ │ ├── layout.md
│ │ ├── legend.md
│ │ ├── locale.md
│ │ ├── responsive.md
│ │ ├── subtitle.md
│ │ ├── title.md
│ │ └── tooltip.md
│ ├── developers/
│ │ ├── api.md
│ │ ├── axes.md
│ │ ├── charts.md
│ │ ├── contributing.md
│ │ ├── index.md
│ │ ├── plugin_flowcharts.drawio
│ │ ├── plugins.md
│ │ ├── publishing.md
│ │ └── updates.md
│ ├── general/
│ │ ├── accessibility.md
│ │ ├── colors.md
│ │ ├── data-structures.md
│ │ ├── fonts.md
│ │ ├── options.md
│ │ ├── padding.md
│ │ └── performance.md
│ ├── getting-started/
│ │ ├── index.md
│ │ ├── installation.md
│ │ ├── integration.md
│ │ ├── usage.md
│ │ └── using-from-node-js.md
│ ├── index.md
│ ├── migration/
│ │ ├── v3-migration.md
│ │ └── v4-migration.md
│ ├── package.json
│ ├── samples/
│ │ ├── .eslintrc.yml
│ │ ├── advanced/
│ │ │ ├── data-decimation.md
│ │ │ ├── derived-axis-type.md
│ │ │ ├── derived-chart-type.md
│ │ │ ├── linear-gradient.md
│ │ │ ├── programmatic-events.md
│ │ │ ├── progress-bar.md
│ │ │ └── radial-gradient.md
│ │ ├── animations/
│ │ │ ├── delay.md
│ │ │ ├── drop.md
│ │ │ ├── loop.md
│ │ │ ├── progressive-line-easing.md
│ │ │ └── progressive-line.md
│ │ ├── area/
│ │ │ ├── line-boundaries.md
│ │ │ ├── line-datasets.md
│ │ │ ├── line-drawtime.md
│ │ │ ├── line-stacked.md
│ │ │ └── radar.md
│ │ ├── bar/
│ │ │ ├── border-radius.md
│ │ │ ├── floating.md
│ │ │ ├── horizontal.md
│ │ │ ├── stacked-groups.md
│ │ │ ├── stacked.md
│ │ │ └── vertical.md
│ │ ├── information.md
│ │ ├── legend/
│ │ │ ├── events.md
│ │ │ ├── html.md
│ │ │ ├── point-style.md
│ │ │ ├── position.md
│ │ │ └── title.md
│ │ ├── line/
│ │ │ ├── interpolation.md
│ │ │ ├── line.md
│ │ │ ├── multi-axis.md
│ │ │ ├── point-styling.md
│ │ │ ├── segments.md
│ │ │ ├── stepped.md
│ │ │ └── styling.md
│ │ ├── other-charts/
│ │ │ ├── bubble.md
│ │ │ ├── combo-bar-line.md
│ │ │ ├── doughnut.md
│ │ │ ├── multi-series-pie.md
│ │ │ ├── pie.md
│ │ │ ├── polar-area-center-labels.md
│ │ │ ├── polar-area.md
│ │ │ ├── radar-skip-points.md
│ │ │ ├── radar.md
│ │ │ ├── scatter-multi-axis.md
│ │ │ ├── scatter.md
│ │ │ └── stacked-bar-line.md
│ │ ├── plugins/
│ │ │ ├── chart-area-border.md
│ │ │ ├── doughnut-empty-state.md
│ │ │ └── quadrants.md
│ │ ├── scale-options/
│ │ │ ├── center.md
│ │ │ ├── grid.md
│ │ │ ├── ticks.md
│ │ │ └── titles.md
│ │ ├── scales/
│ │ │ ├── linear-min-max-suggested.md
│ │ │ ├── linear-min-max.md
│ │ │ ├── linear-step-size.md
│ │ │ ├── log.md
│ │ │ ├── stacked.md
│ │ │ ├── time-combo.md
│ │ │ ├── time-line.md
│ │ │ └── time-max-span.md
│ │ ├── scriptable/
│ │ │ ├── bar.md
│ │ │ ├── bubble.md
│ │ │ ├── line.md
│ │ │ ├── pie.md
│ │ │ ├── polar.md
│ │ │ └── radar.md
│ │ ├── subtitle/
│ │ │ └── basic.md
│ │ ├── title/
│ │ │ └── alignment.md
│ │ ├── tooltip/
│ │ │ ├── content.md
│ │ │ ├── html.md
│ │ │ ├── interactions.md
│ │ │ ├── point-style.md
│ │ │ └── position.md
│ │ └── utils.md
│ └── scripts/
│ ├── analyzer.js
│ ├── components.js
│ ├── derived-bubble.js
│ ├── helpers.js
│ ├── log2.js
│ ├── register.js
│ └── utils.js
├── helpers/
│ ├── helpers.cjs
│ ├── helpers.d.ts
│ ├── helpers.js
│ └── package.json
├── karma.conf.cjs
├── package.json
├── pnpm-workspace.yaml
├── rollup.config.js
├── scripts/
│ ├── deploy-docs.sh
│ ├── docs-config.sh
│ ├── publish.sh
│ ├── sample-redirect-template.html
│ └── utils.sh
├── src/
│ ├── controllers/
│ │ ├── controller.bar.js
│ │ ├── controller.bubble.js
│ │ ├── controller.doughnut.js
│ │ ├── controller.line.js
│ │ ├── controller.pie.js
│ │ ├── controller.polarArea.js
│ │ ├── controller.radar.js
│ │ ├── controller.scatter.js
│ │ └── index.js
│ ├── core/
│ │ ├── core.adapters.ts
│ │ ├── core.animation.js
│ │ ├── core.animations.defaults.js
│ │ ├── core.animations.js
│ │ ├── core.animator.js
│ │ ├── core.config.js
│ │ ├── core.controller.js
│ │ ├── core.datasetController.js
│ │ ├── core.defaults.js
│ │ ├── core.element.ts
│ │ ├── core.interaction.js
│ │ ├── core.layouts.defaults.js
│ │ ├── core.layouts.js
│ │ ├── core.plugins.js
│ │ ├── core.registry.js
│ │ ├── core.scale.autoskip.js
│ │ ├── core.scale.defaults.js
│ │ ├── core.scale.js
│ │ ├── core.ticks.js
│ │ ├── core.typedRegistry.js
│ │ └── index.ts
│ ├── elements/
│ │ ├── element.arc.ts
│ │ ├── element.bar.js
│ │ ├── element.line.js
│ │ ├── element.point.ts
│ │ └── index.js
│ ├── helpers/
│ │ ├── helpers.canvas.ts
│ │ ├── helpers.collection.ts
│ │ ├── helpers.color.ts
│ │ ├── helpers.config.ts
│ │ ├── helpers.config.types.ts
│ │ ├── helpers.core.ts
│ │ ├── helpers.curve.ts
│ │ ├── helpers.dataset.ts
│ │ ├── helpers.dom.ts
│ │ ├── helpers.easing.ts
│ │ ├── helpers.extras.ts
│ │ ├── helpers.interpolation.ts
│ │ ├── helpers.intl.ts
│ │ ├── helpers.math.ts
│ │ ├── helpers.options.ts
│ │ ├── helpers.rtl.ts
│ │ ├── helpers.segment.js
│ │ └── index.ts
│ ├── index.ts
│ ├── index.umd.ts
│ ├── platform/
│ │ ├── index.js
│ │ ├── platform.base.js
│ │ ├── platform.basic.js
│ │ └── platform.dom.js
│ ├── plugins/
│ │ ├── index.js
│ │ ├── plugin.colors.ts
│ │ ├── plugin.decimation.js
│ │ ├── plugin.filler/
│ │ │ ├── filler.drawing.js
│ │ │ ├── filler.helper.js
│ │ │ ├── filler.options.js
│ │ │ ├── filler.segment.js
│ │ │ ├── filler.target.js
│ │ │ ├── filler.target.stack.js
│ │ │ ├── index.js
│ │ │ └── simpleArc.js
│ │ ├── plugin.legend.js
│ │ ├── plugin.subtitle.js
│ │ ├── plugin.title.js
│ │ └── plugin.tooltip.js
│ ├── scales/
│ │ ├── index.js
│ │ ├── scale.category.js
│ │ ├── scale.linear.js
│ │ ├── scale.linearbase.js
│ │ ├── scale.logarithmic.js
│ │ ├── scale.radialLinear.js
│ │ ├── scale.time.js
│ │ └── scale.timeseries.js
│ ├── types/
│ │ ├── animation.d.ts
│ │ ├── basic.d.ts
│ │ ├── color.d.ts
│ │ ├── geometric.d.ts
│ │ ├── index.d.ts
│ │ ├── layout.d.ts
│ │ └── utils.d.ts
│ └── types.ts
├── test/
│ ├── .eslintrc.yml
│ ├── BasicChartWebWorker.js
│ ├── fixtures/
│ │ ├── controller.bar/
│ │ │ ├── aligned-pixels.js
│ │ │ ├── backgroundColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── loopable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── bar-animation-hide-show.js
│ │ │ ├── bar-base-value.js
│ │ │ ├── bar-default-begin-at-zero.js
│ │ │ ├── bar-thickness-absolute.json
│ │ │ ├── bar-thickness-flex-offset.json
│ │ │ ├── bar-thickness-flex-single-reverse.json
│ │ │ ├── bar-thickness-flex-single.json
│ │ │ ├── bar-thickness-flex.json
│ │ │ ├── bar-thickness-max.json
│ │ │ ├── bar-thickness-min-interval-multi.json
│ │ │ ├── bar-thickness-min-interval.json
│ │ │ ├── bar-thickness-multiple.json
│ │ │ ├── bar-thickness-no-overlap.json
│ │ │ ├── bar-thickness-offset.json
│ │ │ ├── bar-thickness-per-dataset-stacked.json
│ │ │ ├── bar-thickness-per-dataset.json
│ │ │ ├── bar-thickness-reverse.json
│ │ │ ├── bar-thickness-single-xy.json
│ │ │ ├── bar-thickness-single.json
│ │ │ ├── bar-thickness-stacked.json
│ │ │ ├── baseLine/
│ │ │ │ ├── bottom.js
│ │ │ │ ├── left.js
│ │ │ │ ├── mid-x.js
│ │ │ │ ├── mid-y.js
│ │ │ │ ├── right.js
│ │ │ │ ├── top.js
│ │ │ │ ├── value-x.js
│ │ │ │ └── value-y.js
│ │ │ ├── borderColor/
│ │ │ │ ├── border+dpr.js
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderRadius/
│ │ │ │ ├── border-radius-stacked-number-mixed-chart.js
│ │ │ │ ├── border-radius-stacked-number-with-order.js
│ │ │ │ ├── border-radius-stacked-number.js
│ │ │ │ ├── border-radius.js
│ │ │ │ └── no-spacing.js
│ │ │ ├── borderSkipped/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── middle.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderWidth/
│ │ │ │ ├── indexable-object.js
│ │ │ │ ├── indexable.js
│ │ │ │ ├── negative.js
│ │ │ │ ├── object.js
│ │ │ │ ├── scriptable-object.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── chart-area-clip.js
│ │ │ ├── data/
│ │ │ │ ├── object-index-axis-y.js
│ │ │ │ ├── object.js
│ │ │ │ └── parsing.js
│ │ │ ├── floatBar/
│ │ │ │ ├── data-as-objects-horizontal.js
│ │ │ │ ├── data-as-objects.js
│ │ │ │ ├── float-bar-horizontal.json
│ │ │ │ ├── float-bar-stacked-horizontal.json
│ │ │ │ ├── float-bar-stacked.json
│ │ │ │ └── float-bar.json
│ │ │ ├── horizontal-borders.js
│ │ │ ├── minBarLength/
│ │ │ │ ├── horizontal-neg.js
│ │ │ │ ├── horizontal-pos.js
│ │ │ │ ├── horizontal-stacked-no-overlap.js
│ │ │ │ ├── horizontal-stacked.js
│ │ │ │ ├── horizontal.js
│ │ │ │ ├── vertical-neg.js
│ │ │ │ ├── vertical-pos.js
│ │ │ │ ├── vertical-stacked-no-overlap.js
│ │ │ │ ├── vertical-stacked.js
│ │ │ │ └── vertical.js
│ │ │ ├── not-grouped/
│ │ │ │ ├── mixed.js
│ │ │ │ └── on-time.js
│ │ │ ├── skipNull/
│ │ │ │ ├── bar-skip-null-object-data.js
│ │ │ │ ├── bar-skip-null.js
│ │ │ │ └── combinations.js
│ │ │ └── stacking/
│ │ │ ├── issue-9105.js
│ │ │ ├── logarithmic-strings.js
│ │ │ ├── logarithmic.js
│ │ │ ├── order-default.json
│ │ │ ├── order-specified.json
│ │ │ ├── remove-dataset.js
│ │ │ ├── replace-data.js
│ │ │ └── stacked-and-multiple-axis.js
│ │ ├── controller.bubble/
│ │ │ ├── autoPadding-disabled.js
│ │ │ ├── clip.js
│ │ │ ├── hover-radius-zero.js
│ │ │ ├── padding-update.js
│ │ │ ├── padding.js
│ │ │ ├── point-style.json
│ │ │ ├── radius-data.js
│ │ │ └── radius-scriptable.js
│ │ ├── controller.doughnut/
│ │ │ ├── backgroundColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderAlign/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderDash/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderJoinStyle/
│ │ │ │ ├── bevel-default.js
│ │ │ │ ├── miter.js
│ │ │ │ └── round.js
│ │ │ ├── borderRadius/
│ │ │ │ ├── scriptable.js
│ │ │ │ ├── value-corners.js
│ │ │ │ ├── value-large-radius.js
│ │ │ │ └── value-small-number.js
│ │ │ ├── borderWidth/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── doughnut-NaN.js
│ │ │ ├── doughnut-animation-hide-last.js
│ │ │ ├── doughnut-animation.js
│ │ │ ├── doughnut-border-align-center.json
│ │ │ ├── doughnut-border-align-inner.json
│ │ │ ├── doughnut-circumference-over-2pi.json
│ │ │ ├── doughnut-circumference-per-dataset.js
│ │ │ ├── doughnut-circumference.json
│ │ │ ├── doughnut-full-to-semi.js
│ │ │ ├── doughnut-hidden-single.js
│ │ │ ├── doughnut-hidden.js
│ │ │ ├── doughnut-offset.js
│ │ │ ├── doughnut-outer-radius-percent.js
│ │ │ ├── doughnut-outer-radius-pixels.js
│ │ │ ├── doughnut-parsing.js
│ │ │ ├── doughnut-rotation-300.js
│ │ │ ├── doughnut-rotation-circumference-8x8.js
│ │ │ ├── doughnut-rotation-per-dataset.js
│ │ │ ├── doughnut-set-active-elements.js
│ │ │ ├── doughnut-spacing-and-offset.js
│ │ │ ├── doughnut-spacing.js
│ │ │ ├── doughnut-weight.json
│ │ │ ├── event-replay.js
│ │ │ ├── pie-border-align-center.json
│ │ │ ├── pie-border-align-inner.json
│ │ │ ├── pie-circumference.json
│ │ │ ├── pie-offset.js
│ │ │ ├── pie-weight.json
│ │ │ ├── selfJoin/
│ │ │ │ ├── doughnut.js
│ │ │ │ └── pie.js
│ │ │ ├── single-slice-circumference-405.js
│ │ │ ├── single-slice-offset.js
│ │ │ └── single-slice-opacity.js
│ │ ├── controller.line/
│ │ │ ├── backgroundColor/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderCapStyle/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderColor/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderDash/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderDashOffset/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderJoinStyle/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderWidth/
│ │ │ │ ├── scriptable.js
│ │ │ │ ├── value.js
│ │ │ │ └── zero.js
│ │ │ ├── clip/
│ │ │ │ ├── default-x-max.json
│ │ │ │ ├── default-x-min.json
│ │ │ │ ├── default-x.json
│ │ │ │ ├── default-y-max.json
│ │ │ │ ├── default-y-min.json
│ │ │ │ ├── default-y.json
│ │ │ │ ├── false.js
│ │ │ │ └── specified.json
│ │ │ ├── cubicInterpolationMode/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── fill/
│ │ │ │ ├── no-border.js
│ │ │ │ ├── order-default.js
│ │ │ │ ├── order.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── issue-8902.js
│ │ │ ├── non-numeric-y.json
│ │ │ ├── point-style-offscreen-canvas.json
│ │ │ ├── point-style.json
│ │ │ ├── pointBackgroundColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointBorderColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointBorderWidth/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointStyle/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── radius/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable-to-value.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── rotation/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── segments/
│ │ │ │ ├── gap.js
│ │ │ │ ├── gradient.js
│ │ │ │ ├── range.js
│ │ │ │ ├── single.js
│ │ │ │ ├── slope.js
│ │ │ │ └── spanGaps.js
│ │ │ ├── showLine/
│ │ │ │ ├── dataset.js
│ │ │ │ └── false.js
│ │ │ └── stacking/
│ │ │ ├── bounds-data.js
│ │ │ ├── order-default.js
│ │ │ ├── order-specified.js
│ │ │ ├── single.js
│ │ │ ├── stacked-scatter.js
│ │ │ └── updates.js
│ │ ├── controller.polarArea/
│ │ │ ├── angle-array.json
│ │ │ ├── angle-lines.json
│ │ │ ├── angle-undefined.json
│ │ │ ├── backgroundColor/
│ │ │ │ ├── indexable-dataset.js
│ │ │ │ ├── indexable-element-options.js
│ │ │ │ ├── scriptable-dataset.js
│ │ │ │ ├── scriptable-element-options.js
│ │ │ │ ├── value-dataset.js
│ │ │ │ └── value-element-options.js
│ │ │ ├── border-align-center.json
│ │ │ ├── border-align-inner.json
│ │ │ ├── borderAlign/
│ │ │ │ ├── indexable-dataset.js
│ │ │ │ ├── indexable-element-options.js
│ │ │ │ ├── scriptable-dataset.js
│ │ │ │ ├── scriptable-element-options.js
│ │ │ │ ├── value-dataset.js
│ │ │ │ └── value-element-options.js
│ │ │ ├── borderColor/
│ │ │ │ ├── indexable-dataset.js
│ │ │ │ ├── indexable-element-options.js
│ │ │ │ ├── scriptable-dataset.js
│ │ │ │ ├── scriptable-element-options.js
│ │ │ │ ├── value-dataset.js
│ │ │ │ └── value-element-options.js
│ │ │ ├── borderDash/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderWidth/
│ │ │ │ ├── indexable-dataset.js
│ │ │ │ ├── indexable-element-options.js
│ │ │ │ ├── scriptable-dataset.js
│ │ │ │ ├── scriptable-element-options.js
│ │ │ │ ├── value-dataset.js
│ │ │ │ └── value-element-options.js
│ │ │ ├── last-slice-animate.js
│ │ │ ├── parse-object-data.json
│ │ │ ├── pointLabels/
│ │ │ │ ├── centered-180.js
│ │ │ │ ├── centered-45.js
│ │ │ │ ├── centered.js
│ │ │ │ ├── default-180.js
│ │ │ │ ├── default-45.js
│ │ │ │ ├── default.js
│ │ │ │ ├── displayAuto-180.js
│ │ │ │ ├── displayAuto.js
│ │ │ │ ├── overlapping.js
│ │ │ │ └── withTitle/
│ │ │ │ ├── bottom-centered-45.js
│ │ │ │ ├── bottom-centered.js
│ │ │ │ ├── left-centered-45.js
│ │ │ │ ├── left-centered.js
│ │ │ │ ├── right-centered-45.js
│ │ │ │ ├── right-centered.js
│ │ │ │ ├── top-centered-45.js
│ │ │ │ ├── top-centered.js
│ │ │ │ ├── top-default-45.js
│ │ │ │ └── top-default.js
│ │ │ ├── polar-area-animation-rotate.js
│ │ │ └── polar-area-animation-scale.js
│ │ ├── controller.radar/
│ │ │ ├── backgroundColor/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderCapStyle/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderColor/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderDash/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderDashOffset/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderJoinStyle/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── borderWidth/
│ │ │ │ ├── scriptable.js
│ │ │ │ ├── value.js
│ │ │ │ └── zero.js
│ │ │ ├── fill/
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── point-style.json
│ │ │ ├── pointBackgroundColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointBorderColor/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointBorderWidth/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── pointStyle/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── radius/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── rotation/
│ │ │ │ ├── indexable.js
│ │ │ │ ├── scriptable.js
│ │ │ │ └── value.js
│ │ │ ├── showLine/
│ │ │ │ └── value.js
│ │ │ └── startAngle/
│ │ │ ├── 135.js
│ │ │ ├── 180.js
│ │ │ ├── 225.js
│ │ │ ├── 270.js
│ │ │ ├── 315.js
│ │ │ ├── 45.js
│ │ │ ├── 90.js
│ │ │ └── default.js
│ │ ├── controller.scatter/
│ │ │ └── showLine/
│ │ │ ├── changed.js
│ │ │ ├── true.js
│ │ │ └── undefined.js
│ │ ├── core.datasetController/
│ │ │ └── stacked-initial-render.js
│ │ ├── core.interaction/
│ │ │ ├── drawActiveElementsOnTop-false.js
│ │ │ ├── nearest-partial-bar.js
│ │ │ └── nearest-point-behind-scale.js
│ │ ├── core.layouts/
│ │ │ ├── hidden-vertical-boxes.js
│ │ │ ├── long-labels.js
│ │ │ ├── no-boxes-all-padding.js
│ │ │ ├── refit-vertical-boxes.js
│ │ │ ├── scriptable.js
│ │ │ ├── stacked-boxes-max-index-without-clip.js
│ │ │ ├── stacked-boxes-max-index.js
│ │ │ ├── stacked-boxes-max-without-clip.js
│ │ │ ├── stacked-boxes-max.js
│ │ │ ├── stacked-boxes-with-weight.js
│ │ │ └── stacked-boxes.js
│ │ ├── core.scale/
│ │ │ ├── autoSkip/
│ │ │ │ ├── fit-after.js
│ │ │ │ ├── no-offset.js
│ │ │ │ └── offset.js
│ │ │ ├── backgroundColor.js
│ │ │ ├── border-behind-elements.js
│ │ │ ├── cartesian-axis-border-settings.json
│ │ │ ├── crossAlignment/
│ │ │ │ ├── cross-align-bottom-center.js
│ │ │ │ ├── cross-align-bottom-far.js
│ │ │ │ ├── cross-align-bottom-near.js
│ │ │ │ ├── cross-align-left-center.js
│ │ │ │ ├── cross-align-left-far-clipped.js
│ │ │ │ ├── cross-align-left-far.js
│ │ │ │ ├── cross-align-left-near.js
│ │ │ │ ├── cross-align-right-center.js
│ │ │ │ ├── cross-align-right-far-clipped.js
│ │ │ │ ├── cross-align-right-far.js
│ │ │ │ ├── cross-align-right-near.js
│ │ │ │ ├── cross-align-top-center.js
│ │ │ │ ├── cross-align-top-far.js
│ │ │ │ ├── cross-align-top-near.js
│ │ │ │ ├── mirror-cross-align-left-center.js
│ │ │ │ ├── mirror-cross-align-left-far.js
│ │ │ │ ├── mirror-cross-align-left-near.js
│ │ │ │ ├── mirror-cross-align-right-center.js
│ │ │ │ ├── mirror-cross-align-right-far.js
│ │ │ │ └── mirror-cross-align-right-near.js
│ │ │ ├── grid/
│ │ │ │ ├── border-over-grid.js
│ │ │ │ ├── colors.js
│ │ │ │ └── scriptable-borderDash.js
│ │ │ ├── label-align-center.js
│ │ │ ├── label-align-end.js
│ │ │ ├── label-align-inner-onlyX.js
│ │ │ ├── label-align-inner-reverse.js
│ │ │ ├── label-align-inner-rotate.js
│ │ │ ├── label-align-inner.js
│ │ │ ├── label-align-start.js
│ │ │ ├── label-offset-vertical-axes.json
│ │ │ ├── tick-backdrop-alignment-inner.js
│ │ │ ├── tick-backdrop-rotation.js
│ │ │ ├── tick-backdrop.js
│ │ │ ├── tick-drawing.json
│ │ │ ├── tick-override-styles.json
│ │ │ ├── ticks/
│ │ │ │ ├── rotated-long.js
│ │ │ │ ├── rotated-multi-line.js
│ │ │ │ └── skip-by-callback.js
│ │ │ ├── ticks-mirror-x.js
│ │ │ ├── ticks-mirror.js
│ │ │ ├── title/
│ │ │ │ ├── align-end.js
│ │ │ │ ├── align-start.js
│ │ │ │ ├── default.js
│ │ │ │ ├── horizontal-center.js
│ │ │ │ ├── horizontal-value.js
│ │ │ │ ├── multi-line/
│ │ │ │ │ ├── align-end.js
│ │ │ │ │ ├── align-start.js
│ │ │ │ │ └── default.js
│ │ │ │ ├── vertical-center.js
│ │ │ │ └── vertical-value.js
│ │ │ ├── x-axis-position-center.json
│ │ │ ├── x-axis-position-dynamic-margin.js
│ │ │ ├── x-axis-position-dynamic.json
│ │ │ ├── y-axis-position-center.json
│ │ │ └── y-axis-position-dynamic.json
│ │ ├── element.line/
│ │ │ ├── cubicInterpolationMode/
│ │ │ │ ├── monotone-horizontal.js
│ │ │ │ └── monotone-vertical.js
│ │ │ ├── default.js
│ │ │ ├── skip/
│ │ │ │ ├── all.js
│ │ │ │ ├── first-span.js
│ │ │ │ ├── first.js
│ │ │ │ ├── last-span.js
│ │ │ │ ├── last.js
│ │ │ │ ├── middle-span.js
│ │ │ │ └── middle.js
│ │ │ ├── stepped/
│ │ │ │ ├── after.js
│ │ │ │ ├── before.js
│ │ │ │ ├── default.js
│ │ │ │ └── middle.js
│ │ │ └── tension/
│ │ │ ├── default.js
│ │ │ ├── one.js
│ │ │ └── zero.js
│ │ ├── element.point/
│ │ │ ├── point-style-circle.json
│ │ │ ├── point-style-cross-rot.json
│ │ │ ├── point-style-cross.json
│ │ │ ├── point-style-dash.json
│ │ │ ├── point-style-image.js
│ │ │ ├── point-style-line.json
│ │ │ ├── point-style-rect-rot.json
│ │ │ ├── point-style-rect-rounded.json
│ │ │ ├── point-style-rect.json
│ │ │ ├── point-style-star.json
│ │ │ ├── point-style-triangle.json
│ │ │ └── rotation.js
│ │ ├── mixed/
│ │ │ ├── bar+line-stacked.js
│ │ │ └── bar+line.js
│ │ ├── plugin.colors/
│ │ │ ├── bar.js
│ │ │ ├── bubble.js
│ │ │ ├── chart-options-colors.js
│ │ │ ├── doughnut.js
│ │ │ ├── dynamic-datasets-default.js
│ │ │ ├── dynamic-datasets-force-override.js
│ │ │ ├── line.js
│ │ │ ├── mixed.js
│ │ │ ├── pie.js
│ │ │ ├── polarArea.js
│ │ │ ├── radar.js
│ │ │ └── scatter.js
│ │ ├── plugin.filler/
│ │ │ ├── line/
│ │ │ │ ├── above-below-vertical-linechart.js
│ │ │ │ ├── before-dataset-draw.js
│ │ │ │ ├── before-datasets-draw.js
│ │ │ │ ├── boundary/
│ │ │ │ │ ├── above-below-line-null-start.json
│ │ │ │ │ ├── above-below-line-null.json
│ │ │ │ │ ├── end-span.json
│ │ │ │ │ ├── end.json
│ │ │ │ │ ├── origin-span-dual.json
│ │ │ │ │ ├── origin-span.json
│ │ │ │ │ ├── origin-spline-above.json
│ │ │ │ │ ├── origin-spline-span.json
│ │ │ │ │ ├── origin-spline.json
│ │ │ │ │ ├── origin-stepped-span.json
│ │ │ │ │ ├── origin-stepped.json
│ │ │ │ │ ├── origin.json
│ │ │ │ │ ├── start-span.json
│ │ │ │ │ └── start.json
│ │ │ │ ├── dataset/
│ │ │ │ │ ├── border.json
│ │ │ │ │ ├── clip-bounds-x-off.js
│ │ │ │ │ ├── clip-bounds-x.js
│ │ │ │ │ ├── clip-bounds-y-off.js
│ │ │ │ │ ├── clip-bounds-y.js
│ │ │ │ │ ├── dual.json
│ │ │ │ │ ├── interpolated.js
│ │ │ │ │ ├── no-border.json
│ │ │ │ │ ├── span-dual.json
│ │ │ │ │ ├── span.json
│ │ │ │ │ ├── spline-span-above.json
│ │ │ │ │ ├── spline-span-below.json
│ │ │ │ │ ├── spline-span.json
│ │ │ │ │ ├── spline.json
│ │ │ │ │ └── stepped.json
│ │ │ │ ├── drawTimeFillFalse/
│ │ │ │ │ ├── beforeDatasetDraw.js
│ │ │ │ │ ├── beforeDatasetsDraw.js
│ │ │ │ │ └── beforeDraw.js
│ │ │ │ ├── points-outside-canvas-initial.js
│ │ │ │ ├── points-outside-canvas-update.js
│ │ │ │ ├── segments/
│ │ │ │ │ ├── alignToPixels.js
│ │ │ │ │ ├── gap.js
│ │ │ │ │ └── slope.js
│ │ │ │ ├── shape.js
│ │ │ │ ├── stack-multiple-scales.js
│ │ │ │ ├── stack.json
│ │ │ │ ├── value.json
│ │ │ │ └── vertical.js
│ │ │ └── radar/
│ │ │ ├── beforeDraw.js
│ │ │ ├── boundary/
│ │ │ │ ├── end-circular.json
│ │ │ │ ├── end-span.json
│ │ │ │ ├── end.json
│ │ │ │ ├── origin-circular.json
│ │ │ │ ├── origin-span.json
│ │ │ │ ├── origin-spline-span.json
│ │ │ │ ├── origin-spline.json
│ │ │ │ ├── origin.json
│ │ │ │ ├── start-circular.json
│ │ │ │ ├── start-span.json
│ │ │ │ └── start.json
│ │ │ ├── dataset/
│ │ │ │ ├── border.json
│ │ │ │ ├── default.json
│ │ │ │ ├── order.js
│ │ │ │ ├── span.json
│ │ │ │ └── spline.json
│ │ │ └── value.json
│ │ ├── plugin.legend/
│ │ │ ├── borderRadius/
│ │ │ │ └── legend-border-radius.js
│ │ │ ├── horizontal-rtl-hitbox.js
│ │ │ ├── label-textAlign/
│ │ │ │ ├── center.js
│ │ │ │ ├── horizontal-left.js
│ │ │ │ ├── horizontal-right.js
│ │ │ │ ├── horizontal-rtl-left.js
│ │ │ │ ├── horizontal-rtl-right.js
│ │ │ │ ├── left.js
│ │ │ │ ├── right.js
│ │ │ │ ├── rtl-center.js
│ │ │ │ ├── rtl-left.js
│ │ │ │ └── rtl-right.js
│ │ │ ├── legend-doughnut-bottom-center-mulitiline.json
│ │ │ ├── legend-doughnut-bottom-center-single.json
│ │ │ ├── legend-doughnut-bottom-end-mulitiline.json
│ │ │ ├── legend-doughnut-bottom-start-mulitiline.json
│ │ │ ├── legend-doughnut-left-center-mulitiline.json
│ │ │ ├── legend-doughnut-left-center-single.json
│ │ │ ├── legend-doughnut-left-default-center.json
│ │ │ ├── legend-doughnut-left-end-mulitiline.json
│ │ │ ├── legend-doughnut-left-start-mulitiline.json
│ │ │ ├── legend-doughnut-point-style.json
│ │ │ ├── legend-doughnut-right-center-mulitiline-labels.json
│ │ │ ├── legend-doughnut-right-center-mulitiline.json
│ │ │ ├── legend-doughnut-right-center-single.json
│ │ │ ├── legend-doughnut-right-default-center.json
│ │ │ ├── legend-doughnut-right-end-mulitiline.json
│ │ │ ├── legend-doughnut-right-start-mulitiline.json
│ │ │ ├── legend-doughnut-top-center-mulitiline.json
│ │ │ ├── legend-doughnut-top-center-single.json
│ │ │ ├── legend-doughnut-top-end-mulitiline.json
│ │ │ ├── legend-doughnut-top-start-mulitiline.json
│ │ │ ├── legend-line-chart-area.json
│ │ │ ├── maxWidth/
│ │ │ │ ├── infinity.js
│ │ │ │ ├── undefined.js
│ │ │ │ └── value.js
│ │ │ ├── padding/
│ │ │ │ ├── 2cols-with-padding.js
│ │ │ │ └── add-column.js
│ │ │ ├── pointStyle-width/
│ │ │ │ ├── legend-pointStyle-width-default.json
│ │ │ │ └── legend-pointStyle-width.json
│ │ │ └── title/
│ │ │ ├── bottom-center-center.js
│ │ │ ├── bottom-end-end.js
│ │ │ ├── bottom-start-start.js
│ │ │ ├── left-center-center.js
│ │ │ ├── left-end-end.js
│ │ │ ├── left-start-start.js
│ │ │ ├── right-center-center.js
│ │ │ ├── right-end-end.js
│ │ │ ├── right-start-start.js
│ │ │ ├── top-center-center.js
│ │ │ ├── top-end-end.js
│ │ │ └── top-start-start.js
│ │ ├── plugin.subtitle/
│ │ │ └── basic.js
│ │ ├── plugin.title/
│ │ │ └── scriptable-options.js
│ │ ├── plugin.tooltip/
│ │ │ ├── box-padding.js
│ │ │ ├── caret-position.js
│ │ │ ├── color-box-border-dash.js
│ │ │ ├── color-box-border-radius.js
│ │ │ ├── corner-radius.js
│ │ │ ├── opacity.js
│ │ │ ├── point-style.js
│ │ │ └── positioning.js
│ │ ├── scale.category/
│ │ │ ├── invalid-data.js
│ │ │ ├── max-ticks-limit-a.js
│ │ │ ├── max-ticks-limit-b.js
│ │ │ ├── max-ticks-limit-norotation.js
│ │ │ └── ticks-from-data.js
│ │ ├── scale.linear/
│ │ │ ├── grace/
│ │ │ │ ├── grace-10%.js
│ │ │ │ ├── grace-beginAtZero.js
│ │ │ │ ├── grace-neg.js
│ │ │ │ ├── grace-pos.js
│ │ │ │ ├── grace.js
│ │ │ │ └── issue-8912.js
│ │ │ ├── issue-8806.js
│ │ │ ├── min-max-skip/
│ │ │ │ ├── edge-case-1.js
│ │ │ │ ├── edge-case-2.js
│ │ │ │ ├── edge-case-3.js
│ │ │ │ ├── edge-case-4.js
│ │ │ │ ├── includeBounds.js
│ │ │ │ ├── min-max-skip.js
│ │ │ │ ├── no-collision.js
│ │ │ │ ├── rotated-case-1.js
│ │ │ │ ├── rotated-case-2.js
│ │ │ │ ├── rotated-case-3.js
│ │ │ │ └── rotated-case-4.js
│ │ │ ├── rotated-45.js
│ │ │ ├── rotated-5.js
│ │ │ ├── rotated-85.js
│ │ │ ├── tick-count-data-limits.js
│ │ │ ├── tick-count-min-max-not-aligned.js
│ │ │ ├── tick-count-min-max-not-int.js
│ │ │ ├── tick-count-min-max.js
│ │ │ ├── tick-step-min-max-step-fp.js
│ │ │ ├── tick-step-min-max.js
│ │ │ └── tiny-numbers.js
│ │ ├── scale.logarithmic/
│ │ │ ├── large-range.js
│ │ │ ├── large-values-small-range.js
│ │ │ ├── med-range.js
│ │ │ ├── min-max.js
│ │ │ ├── null-values.js
│ │ │ └── small-range.js
│ │ ├── scale.radialLinear/
│ │ │ ├── anglelines-disable.json
│ │ │ ├── anglelines-indexable.js
│ │ │ ├── anglelines-reverse-scale.js
│ │ │ ├── anglelines-scriptable.js
│ │ │ ├── backgroundColor.js
│ │ │ ├── border-dash.json
│ │ │ ├── circular-backgroundColor.js
│ │ │ ├── circular-border-dash.json
│ │ │ ├── gridlines-disable.json
│ │ │ ├── gridlines-no-z.json
│ │ │ ├── gridlines-scriptable.js
│ │ │ ├── gridlines-z.json
│ │ │ ├── indexable-gridlines.json
│ │ │ ├── pointLabels/
│ │ │ │ ├── background.js
│ │ │ │ ├── border-radius.js
│ │ │ │ ├── no-more-than-half-radius.js
│ │ │ │ ├── padding.js
│ │ │ │ └── scriptable-color-small.js
│ │ │ └── ticks-below-zero.js
│ │ ├── scale.time/
│ │ │ ├── autoskip-major.js
│ │ │ ├── bar-large-gap-between-data.js
│ │ │ ├── custom-parser.js
│ │ │ ├── data-ty.js
│ │ │ ├── data-xy.js
│ │ │ ├── invalid-data.js
│ │ │ ├── labels-date.js
│ │ │ ├── labels-strings.js
│ │ │ ├── labels.js
│ │ │ ├── negative-times.js
│ │ │ ├── offset-auto-skip-ticks.js
│ │ │ ├── offset-with-1-tick.js
│ │ │ ├── offset-with-2-ticks.js
│ │ │ ├── offset-with-no-ticks.js
│ │ │ ├── skip-null-gridlines.js
│ │ │ ├── skip-undefined-gridlines.js
│ │ │ ├── source-auto-linear.js
│ │ │ ├── source-data-linear.js
│ │ │ ├── source-labels-linear-offset-min-max.js
│ │ │ ├── source-labels-linear.js
│ │ │ ├── ticks-capacity.js
│ │ │ ├── ticks-minunit.js
│ │ │ ├── ticks-reverse-linear-min-max.js
│ │ │ ├── ticks-reverse-linear.js
│ │ │ ├── ticks-reverse-offset.js
│ │ │ ├── ticks-reverse.js
│ │ │ ├── ticks-round.js
│ │ │ ├── ticks-stepsize.js
│ │ │ └── ticks-unit.js
│ │ └── scale.timeseries/
│ │ ├── data-timestamps.js
│ │ ├── financial-daily.js
│ │ ├── normalize.js
│ │ ├── source-auto.js
│ │ ├── source-data-offset-min-max.js
│ │ ├── source-data.js
│ │ ├── source-labels-offset-min-max.js
│ │ ├── source-labels.js
│ │ ├── ticks-reverse-max.js
│ │ ├── ticks-reverse-min-max.js
│ │ ├── ticks-reverse-min.js
│ │ └── ticks-reverse.js
│ ├── index.js
│ ├── integration/
│ │ ├── node/
│ │ │ ├── package.json
│ │ │ ├── test.cjs
│ │ │ └── test.js
│ │ ├── node-commonjs/
│ │ │ ├── package.json
│ │ │ ├── test-auto.js
│ │ │ └── test.js
│ │ ├── react-browser/
│ │ │ ├── package.json
│ │ │ ├── public/
│ │ │ │ └── index.html
│ │ │ ├── src/
│ │ │ │ ├── App.tsx
│ │ │ │ ├── AppAuto.tsx
│ │ │ │ └── index.tsx
│ │ │ └── tsconfig.json
│ │ ├── typescript-node/
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ └── index.ts
│ │ │ └── tsconfig.json
│ │ └── typescript-node-next/
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── seed-reporter.cjs
│ ├── specs/
│ │ ├── controller.bar.tests.js
│ │ ├── controller.bubble.tests.js
│ │ ├── controller.doughnut.tests.js
│ │ ├── controller.line.tests.js
│ │ ├── controller.polarArea.tests.js
│ │ ├── controller.radar.tests.js
│ │ ├── controller.scatter.tests.js
│ │ ├── core.animation.tests.js
│ │ ├── core.animations.tests.js
│ │ ├── core.animator.tests.js
│ │ ├── core.controller.tests.js
│ │ ├── core.datasetController.tests.js
│ │ ├── core.defaults.tests.js
│ │ ├── core.element.tests.js
│ │ ├── core.helpers.tests.js
│ │ ├── core.interaction.tests.js
│ │ ├── core.layouts.tests.js
│ │ ├── core.plugin.tests.js
│ │ ├── core.registry.tests.js
│ │ ├── core.scale.tests.js
│ │ ├── core.ticks.tests.js
│ │ ├── element.arc.tests.js
│ │ ├── element.bar.tests.js
│ │ ├── element.line.tests.js
│ │ ├── element.point.tests.js
│ │ ├── global.defaults.tests.js
│ │ ├── global.namespace.tests.js
│ │ ├── helpers.canvas.tests.js
│ │ ├── helpers.collection.tests.js
│ │ ├── helpers.color.tests.js
│ │ ├── helpers.config.tests.js
│ │ ├── helpers.core.tests.js
│ │ ├── helpers.curve.tests.js
│ │ ├── helpers.dom.tests.js
│ │ ├── helpers.easing.tests.js
│ │ ├── helpers.interpolation.tests.js
│ │ ├── helpers.math.tests.js
│ │ ├── helpers.options.tests.js
│ │ ├── helpers.segment.tests.js
│ │ ├── mixed.tests.js
│ │ ├── platform.basic.tests.js
│ │ ├── platform.dom.tests.js
│ │ ├── plugin.colors.tests.js
│ │ ├── plugin.decimation.tests.js
│ │ ├── plugin.filler.tests.js
│ │ ├── plugin.legend.tests.js
│ │ ├── plugin.subtitle.tests.js
│ │ ├── plugin.title.tests.js
│ │ ├── plugin.tooltip.tests.js
│ │ ├── scale.category.tests.js
│ │ ├── scale.linear.tests.js
│ │ ├── scale.logarithmic.tests.js
│ │ ├── scale.radialLinear.tests.js
│ │ └── scale.time.tests.js
│ └── types/
│ ├── .eslintrc.yml
│ ├── animation.ts
│ ├── autogen.js
│ ├── chart_types.ts
│ ├── controllers/
│ │ ├── bar_floating_data.ts
│ │ ├── bubble_chart_options.ts
│ │ ├── doughnut_meta_total.ts
│ │ ├── doughnut_offset.ts
│ │ ├── doughnut_outer_radius.ts
│ │ ├── doughnut_spacing_offset.ts
│ │ ├── line_scriptable_parsed_data.ts
│ │ ├── line_segments.ts
│ │ ├── line_span_gaps.ts
│ │ ├── line_styling_array.ts
│ │ └── radar_dataset_indexable_options.ts
│ ├── data_types.ts
│ ├── dataset_null_data.ts
│ ├── date_adapter.ts
│ ├── defaults.ts
│ ├── elements/
│ │ └── scriptable_element_options.ts
│ ├── extensions/
│ │ ├── plugin.ts
│ │ └── scale.ts
│ ├── helpers/
│ │ ├── dom.ts
│ │ └── options.ts
│ ├── interaction.ts
│ ├── layout/
│ │ └── position.ts
│ ├── options.ts
│ ├── overrides.ts
│ ├── parsed.data.type.ts
│ ├── plugins/
│ │ ├── defaults.ts
│ │ ├── plugin.colors/
│ │ │ └── colors.ts
│ │ ├── plugin.decimation/
│ │ │ └── decimation_algorithm.ts
│ │ ├── plugin.filler/
│ │ │ └── fill_target_true.ts
│ │ └── plugin.tooltip/
│ │ ├── chart.tooltip.ts
│ │ ├── tooltip_dataset_type.ts
│ │ ├── tooltip_parsed_data.ts
│ │ ├── tooltip_parsed_data_chart_defaults.ts
│ │ └── tooltip_scriptable_background_color.ts
│ ├── register.ts
│ ├── scales/
│ │ ├── chart_options.ts
│ │ ├── options.ts
│ │ └── time_string_max.ts
│ ├── scriptable.ts
│ ├── scriptable_core_chart_options.ts
│ ├── test_instance_assignment.ts
│ ├── ticks/
│ │ └── ticks.ts
│ └── tsconfig.json
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .browserslistrc
================================================
defaults
not IE 11
not IE_Mob 11
maintained node versions
================================================
FILE: .codeclimate.yml
================================================
version: "2"
plugins:
duplication:
enabled: true
config:
languages:
- javascript
fixme:
enabled: true
checks:
argument-count:
config:
threshold: 5
method-complexity:
config:
threshold: 7
exclude_patterns:
- "dist/"
- "docs/"
- "scripts/"
- "test/"
- "*.js"
- "*.json"
- "*.md"
- ".*"
================================================
FILE: .editorconfig
================================================
# https://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.html]
indent_style = tab
indent_size = 4
================================================
FILE: .eslintignore
================================================
dist/*
test/integration/react-browser/*
================================================
FILE: .eslintrc.yml
================================================
extends:
- chartjs
- plugin:es/restrict-to-es2018
- plugin:markdown/recommended
settings:
es:
aggressive: true
env:
es6: true
browser: true
node: true
parserOptions:
ecmaVersion: 2022
sourceType: module
ecmaFeatures:
impliedStrict: true
modules: true
plugins: ['html', 'es']
rules:
class-methods-use-this: "off"
complexity: ["warn", 10]
max-statements: ["warn", 30]
no-empty-function: "off"
no-use-before-define: ["error", { "functions": false }]
# disable everything, except Rest/Spread Properties in ES2018
es/no-import-meta: "off"
es/no-async-iteration: "error"
es/no-malformed-template-literals: "error"
es/no-regexp-lookbehind-assertions: "error"
es/no-regexp-named-capture-groups: "error"
es/no-regexp-s-flag: "error"
es/no-regexp-unicode-property-escapes: "error"
es/no-dynamic-import: "off"
overrides:
- files: ['**/*.ts']
parser: '@typescript-eslint/parser'
plugins:
- '@typescript-eslint'
extends:
- chartjs
- plugin:@typescript-eslint/recommended
rules:
complexity: ["warn", 10]
max-statements: ["warn", 30]
# Replace stock eslint rules with typescript-eslint equivalents for proper
# TypeScript support.
indent: "off"
"@typescript-eslint/indent": ["error", 2]
no-use-before-define: "off"
'@typescript-eslint/no-use-before-define': "error"
no-shadow: "off"
'@typescript-eslint/no-shadow': "error"
space-before-function-paren: "off"
'@typescript-eslint/space-before-function-paren': [2, never]
================================================
FILE: .github/ISSUE_TEMPLATE/bug.yml
================================================
name: Bug Report
description: Something went awry
labels: ["type: bug"]
body:
- type: markdown
attributes:
value: |
Need help or support?
Please don't open an issue! Head to https://stackoverflow.com/questions/tagged/chart.js.
- type: markdown
attributes:
value: "Bug reports MUST be submitted with an interactive example: https://codepen.io/leelenaleee/pen/WNyJXEe."
- type: markdown
attributes:
value: Chart.js versions lower then 4.x are NOT supported anymore, new issues will be disregarded.
- type: textarea
attributes:
label: Expected behavior
description: Tell us what should happen.
validations:
required: true
- type: textarea
attributes:
label: Current behavior
description: Tell us what happens instead of the expected behavior.
validations:
required: true
- type: input
attributes:
label: Reproducible sample
description: |
Please provide issue reproduction.
You can use [this codepen](https://codepen.io/leelenaleee/pen/WNyJXEe) to make a reproducible sample.
Major framework wrappers for chart.js templates:
[vue-chart-3 sandbox (Vue)](https://codesandbox.io/s/vue-chart-3-chart-js-issue-template-bpg7k?file=/src/App.vue)
[ng2-charts sandbox (Angular)](https://codesandbox.io/s/ng2charts-chart-js-issue-template-fhezt?file=/src/app/app.component.ts)
[react-chartjs-2 sandbox (React)](https://codesandbox.io/p/sandbox/react-chartjs-2-chart-js-issue-template-v4-forked-lqz5tn?file=%2Fsrc%2FApp.tsx)
For typescript issues you can make use of [this TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIA) to make a reproducible sample.
If filing a bug against `master`, you may reference the latest code via
https://www.chartjs.org/dist/master/chart.umd.min.js (changing the filename to
point at the file you need as appropriate). Do not rely on these files for
production purposes as they may be removed at any time.
validations:
required: true
- type: textarea
attributes:
label: Optional extra steps/info to reproduce
- type: textarea
attributes:
label: Possible solution
description: If you have suggestions on a fix for the bug.
- type: textarea
attributes:
label: Context
description: |
How has this issue affected you? What are you trying to accomplish?
Providing context helps us come up with a solution that is most useful in the real world.
- type: input
attributes:
label: chart.js version
description: Which version of `chart.js` are you using?
placeholder: "v0.0.0"
validations:
required: true
- type: input
attributes:
label: Browser name and version
- type: input
attributes:
label: Link to your project
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Support, Help, and Advice
url: https://stackoverflow.com/questions/tagged/chart.js
about: Need help or support? Head to https://stackoverflow.com/questions/tagged/chart.js
================================================
FILE: .github/ISSUE_TEMPLATE/docs.yml
================================================
name: Documentation
description: Are the docs lacking or missing something?
labels: ["type: documentation"]
body:
- type: checkboxes
attributes:
label: "Documentation Is:"
options:
- label: Missing or needed?
- label: Confusing
- label: Not sure?
- type: textarea
attributes:
label: Please Explain in Detail...
validations:
required: true
- type: textarea
attributes:
label: Your Proposal for Changes
validations:
required: true
- type: input
attributes:
label: Example
description: |
Provide a link to a live example demonstrating the issue or feature to be documented:
Normal: https://codepen.io/pen?template=BapRepQ
TS: [TS Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyMIA)
================================================
FILE: .github/ISSUE_TEMPLATE/feature.yml
================================================
name: Feature Request
description: Suggest an idea
labels: ["type: enhancement"]
body:
- type: markdown
attributes:
value: |
Most features should start as plugins outside of Chart.js
(https://www.chartjs.org/docs/latest/developers/plugins.html).
Please consider whether your changes are useful for all users, or if this is
specific to your usecase and a Chart.js plugin would be more appropriate.
Need help or tech support? Please don't open an issue!
Head to https://stackoverflow.com/questions/tagged/chart.js
- type: textarea
attributes:
label: Feature Proposal
description: |
What are you trying to accomplish?
Providing context helps us come up with a solution that is most useful in the real world
validations:
required: true
- type: textarea
attributes:
label: Possible Implementation
description: Not obligatory, but suggest ideas for how to implement the addition or change
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
<!--
Need help or support? Don't open an issue!
Head to https://stackoverflow.com/questions/tagged/chart.js
Ahoy!
You're seeing this because you felt none of the other options fit the type of
issue you'd like to create. Please use this opportunity to tell us about the
type of issue you were looking for, so we can try to accommodate similar
issues in the future.
If you're using this template to report an issue covered by an existing issue
type, we'll close it as invalid faster than you can spell 'Mississippi'.
-->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
Please consider the following before submitting a pull request:
Guidelines for contributing: https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md
Example of changes on an interactive website such as the following:
- https://jsbin.com/
- https://jsfiddle.net/
- https://codepen.io/pen/
- Premade template: https://codepen.io/pen?template=wvezeOq
-->
================================================
FILE: .github/dependabot.yml
================================================
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: "weekly"
================================================
FILE: .github/release-drafter.yml
================================================
name-template: 'v$RESOLVED_VERSION'
tag-template: 'v$RESOLVED_VERSION'
categories:
- title: 'Breaking Changes'
labels:
- 'breaking change'
- title: 'Enhancements'
labels:
- 'type: enhancement'
- title: 'Performance'
labels:
- 'type: performance'
- title: 'Bugs Fixed'
labels:
- 'type: bug'
- title: 'Types'
labels:
- 'type: types'
- title: 'Documentation'
labels:
- 'type: documentation'
- title: 'Development'
labels:
- 'type: chore'
- 'dependencies'
exclude-labels:
- 'type: infrastructure'
change-template: '- #$NUMBER $TITLE'
change-title-escapes: '\<*_&`#@'
version-resolver:
major:
labels:
- 'breaking change'
minor:
labels:
- 'type: enhancement'
patch:
labels:
- 'type: bug'
- 'type: chore'
- 'type: types'
default: patch
template: |
# Essential Links
* [npm](https://www.npmjs.com/package/chart.js)
* [Migration guide](https://www.chartjs.org/docs/$RESOLVED_VERSION/migration/v4-migration.html)
* [Docs](https://www.chartjs.org/docs/$RESOLVED_VERSION/)
* [API](https://www.chartjs.org/docs/$RESOLVED_VERSION/api/)
* [Samples](https://www.chartjs.org/docs/$RESOLVED_VERSION/samples/information.html)
$CHANGES
Thanks to $CONTRIBUTORS
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
push:
branches:
- master
- "2.9"
pull_request:
branches:
- master
- "2.9"
workflow_dispatch:
permissions:
contents: read
jobs:
build:
permissions:
checks: write # for coverallsapp/github-action to create new checks
contents: read # for dorny/paths-filter to fetch a list of changed files
pull-requests: read # for dorny/paths-filter to read pull requests
runs-on: ${{ matrix.os }}
outputs:
coveralls: ${{ steps.changes.outputs.src }}
strategy:
matrix:
os: [ubuntu-latest, windows-latest]
fail-fast: false
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4.2.0
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: 16
cache: pnpm
- uses: dorny/paths-filter@v3
id: changes
with:
filters: |
docs:
- 'docs/**'
- 'package.json'
- 'tsconfig.json'
src:
- 'src/**'
- 'package.json'
test:
- 'test/**'
- 'karma.conf.js'
- 'package.json'
types:
- 'package.json'
- 'tsconfig.json'
- name: Install
run: pnpm install
- name: Lint
run: pnpm run lint
- name: Build
run: pnpm run build
- name: Test
if: |
(steps.changes.outputs.src == 'true' ||
steps.changes.outputs.test == 'true') &&
runner.os != 'Windows'
run: |
pnpm run build
if [ "${{ runner.os }}" == "macOS" ]; then
pnpm run test-ci --browsers chrome,safari
else
xvfb-run --auto-servernum pnpm run test-ci
fi
shell: bash
- name: Package
if: steps.changes.outputs.docs == 'true'
run: |
pnpm run docs
pnpm pack
- name: Coveralls Parallel - Chrome
if: |
steps.changes.outputs.src == 'true' &&
runner.os != 'Windows'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.github_token }}
path-to-lcov: './coverage/chrome/lcov.info'
flag-name: ${{ matrix.os }}-chrome
parallel: true
- name: Coveralls Parallel - Firefox
if: |
steps.changes.outputs.src == 'true' &&
runner.os != 'Windows'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.github_token }}
path-to-lcov: './coverage/firefox/lcov.info'
flag-name: ${{ matrix.os }}-firefox
parallel: true
finish:
permissions:
checks: write # for coverallsapp/github-action to create new checks
needs: build
runs-on: ubuntu-latest
steps:
- name: Coveralls Finished
if: needs.build.outputs.coveralls == 'true'
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.github_token }}
parallel-finished: true
================================================
FILE: .github/workflows/compressed-size.yml
================================================
name: Compressed Size
on: [pull_request]
permissions:
contents: read
jobs:
build:
permissions:
checks: write # for preactjs/compressed-size-action to create and update the checks
contents: read # for actions/checkout to fetch code
issues: write # for preactjs/compressed-size-action to create comments
pull-requests: write # for preactjs/compressed-size-action to write a PR review
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4.2.0
- uses: preactjs/compressed-size-action@v2
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
================================================
FILE: .github/workflows/deploy-docs.yml
================================================
# This workflow publishes new documentation to https://chartjs.org/docs/master after every commit
name: Deploy docs
on:
push:
branches:
- master
permissions:
contents: read
jobs:
correct_repository:
permissions:
contents: none
runs-on: ubuntu-latest
steps:
- name: fail on fork
if: github.repository_owner != 'chartjs'
run: exit 1
build:
needs: correct_repository
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4.2.0
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: 16
cache: pnpm
- name: Package & Deploy Docs
run: |
pnpm install
pnpm run build
./scripts/docs-config.sh "master"
pnpm run docs
pnpm pack
./scripts/deploy-docs.sh "master"
env:
GITHUB_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}
GH_AUTH_EMAIL: ${{ secrets.GH_AUTH_EMAIL }}
================================================
FILE: .github/workflows/release-drafter.yml
================================================
name: Release Drafter
on:
push:
branches:
- master
workflow_dispatch:
permissions:
contents: read
jobs:
correct_repository:
permissions:
contents: none
runs-on: ubuntu-latest
steps:
- name: fail on fork
if: github.repository_owner != 'chartjs'
run: exit 1
update_release_draft:
permissions:
contents: write # for release-drafter/release-drafter to create a github release
pull-requests: write # for release-drafter/release-drafter to add label to PR
needs: correct_repository
runs-on: ubuntu-latest
steps:
- uses: release-drafter/release-drafter@v6
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
release:
types: [published]
permissions:
contents: read
jobs:
setup:
permissions:
contents: none
runs-on: ubuntu-latest
outputs:
version: ${{ steps.trim.outputs.version }}
steps:
- id: trim
run: echo "version=${TAG:1}" >> $GITHUB_OUTPUT
env:
TAG: ${{ github.event.release.tag_name }}
release:
permissions:
contents: write # for actions/upload-release-asset to upload release asset
needs: setup
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4.2.0
- uses: actions/setup-node@v6
with:
registry-url: https://registry.npmjs.org/
node-version: 16
cache: pnpm
- name: Setup and build
run: |
pnpm install
pnpm install -g json
json -I -f package.json -e "this.version=\"$VERSION\""
pnpm run build
./scripts/docs-config.sh "$VERSION" release
pnpm run docs
pnpm pack
env:
VERSION: ${{ needs.setup.outputs.version }}
- name: Publish to NPM
run: ./scripts/publish.sh
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
VERSION: ${{ needs.setup.outputs.version }}
- name: Deploy Docs
run: ./scripts/deploy-docs.sh "$VERSION" release
env:
GITHUB_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}
GH_AUTH_EMAIL: ${{ secrets.GH_AUTH_EMAIL }}
VERSION: ${{ needs.setup.outputs.version }}
- name: Upload NPM package file
id: upload-npm-package-file
uses: actions/upload-release-asset@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
VERSION: ${{ needs.setup.outputs.version }}
with:
upload_url: ${{ github.event.release.upload_url }}
asset_path: ${{ format('chart.js-{0}.tgz', needs.setup.outputs.version) }}
asset_name: ${{ format('chart.js-{0}.tgz', needs.setup.outputs.version) }}
asset_content_type: application/gzip
release-tag:
needs: [setup, release]
runs-on: ubuntu-latest
if: "!github.event.release.prerelease"
steps:
- uses: actions/checkout@v6
- uses: pnpm/action-setup@v4.2.0
- uses: actions/setup-node@v6
with:
registry-url: https://registry.npmjs.org/
node-version: 16
cache: pnpm
- name: Setup and build
run: |
pnpm install
pnpm install -g json
json -I -f package.json -e "this.version=\"$VERSION\""
pnpm run build
./scripts/docs-config.sh "$VERSION"
pnpm run docs
env:
VERSION: ${{ needs.setup.outputs.version }}
- name: Deploy Docs
run: ./scripts/deploy-docs.sh "$VERSION"
env:
GITHUB_TOKEN: ${{ secrets.GH_AUTH_TOKEN }}
GH_AUTH_EMAIL: ${{ secrets.GH_AUTH_EMAIL }}
VERSION: ${{ needs.setup.outputs.version }}
================================================
FILE: .gitignore
================================================
# Deployment
/coverage
/custom
/dist
/gh-pages
# Node.js
node_modules/
npm-debug.log*
# Docs
.cache-loader
build/
# Generated type docs
docs/api
docs/.vuepress/dist
# Development
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
.project
.settings
.vscode
.zed
*.log
*.swp
*.stackdump
# Generated
/test/types/autogen*.ts
# Eslint
.eslintcache
================================================
FILE: .htmllintrc
================================================
{
"indent-style": "tabs",
"line-end-style": false,
"attr-quote-style": "double",
"spec-char-escape": false,
"attr-bans": [
"align",
"background",
"bgcolor",
"border",
"frameborder",
"longdesc",
"marginwidth",
"marginheight",
"scrolling"
],
"tag-bans": [ "b", "i" ],
"id-class-style": false
}
================================================
FILE: LICENSE.md
================================================
The MIT License (MIT)
Copyright (c) 2014-2024 Chart.js Contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: MAINTAINING.md
================================================
# Maintaining
## Release Process
Chart.js relies on [Travis CI](https://travis-ci.org/) to automate the library [releases](https://github.com/chartjs/Chart.js/releases).
### Releasing a New Version
1. Update the release version on [GitHub](https://github.com/chartjs/Chart.js/releases/new) for the release drafted by the `release-drafter` tool
2. Publish the release
3. follow the build process on [GitHub Actions](https://github.com/chartjs/Chart.js/actions?query=workflow%3A%22Node.js+Package%22)
Creation of this tag triggers a new build:
* `Chart.js.zip` package is generated, containing dist files and examples
* `dist/*.js`, `types/*.ts`, and `Chart.js.zip` are attached to the GitHub release (downloads)
* A new npm package is published on [npmjs](https://www.npmjs.com/package/chart.js)
Finally, [cdnjs](https://cdnjs.com/libraries/Chart.js) is automatically updated from the npm release.
### Releasing a patch version
If there is a need to create a patch version for an older release:
1. Create a branch for the patch version (without the `v` prefix)
2. Cherry pick the needed commit(s) to that new branch from master
3. Trigger the release-drafter workflow on that branch from the actions.
4. Follow the procedure for [Releasing a New Version](#releasing-a-new-version)
### Further Reading
* [GitHub Action releases](https://github.com/chartjs/Chart.js/pull/7891)
* [dist/* files](https://github.com/chartjs/Chart.js/issues/3033)
* [cdnjs npm auto update](https://github.com/cdnjs/cdnjs/pull/8401)
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://www.chartjs.org/" target="_blank">
<img src="https://www.chartjs.org/media/logo-title.svg" alt="https://www.chartjs.org/"><br/>
</a>
Simple yet flexible JavaScript charting for designers & developers
</p>
<p align="center">
<a href="https://www.chartjs.org/docs/latest/getting-started/installation.html"><img src="https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Downloads"></a>
<a href="https://github.com/chartjs/Chart.js/actions?query=workflow%3ACI+branch%3Amaster"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/chartjs/Chart.js/ci.yml?branch=master&style=flat-square"></a>
<a href="https://coveralls.io/github/chartjs/Chart.js?branch=master"><img src="https://img.shields.io/coveralls/chartjs/Chart.js.svg?style=flat-square&maxAge=600" alt="Coverage"></a>
<a href="https://github.com/chartjs/awesome"><img src="https://awesome.re/badge-flat2.svg" alt="Awesome"></a>
<a href="https://discord.gg/HxEguTK6av"><img src="https://img.shields.io/badge/discord-chartjs-blue?style=flat-square&maxAge=3600" alt="Discord"></a>
</p>
## Documentation
All the links point to the new version 4 of the lib.
* [Introduction](https://www.chartjs.org/docs/latest/)
* [Getting Started](https://www.chartjs.org/docs/latest/getting-started/index)
* [General](https://www.chartjs.org/docs/latest/general/data-structures)
* [Configuration](https://www.chartjs.org/docs/latest/configuration/index)
* [Charts](https://www.chartjs.org/docs/latest/charts/line)
* [Axes](https://www.chartjs.org/docs/latest/axes/index)
* [Developers](https://www.chartjs.org/docs/latest/developers/index)
* [Popular Extensions](https://github.com/chartjs/awesome)
* [Samples](https://www.chartjs.org/samples/)
In case you are looking for an older version of the docs, you will have to specify the specific version in the url like this: [https://www.chartjs.org/docs/2.9.4/](https://www.chartjs.org/docs/2.9.4/)
## Contributing
Instructions on building and testing Chart.js can be found in [the documentation](https://www.chartjs.org/docs/master/developers/contributing.html#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://www.chartjs.org/docs/master/developers/contributing) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) with the `chart.js` tag.
## License
Chart.js is available under the [MIT license](LICENSE.md).
================================================
FILE: auto/auto.cjs
================================================
const chartjs = require('../dist/chart.cjs');
const {Chart, registerables} = chartjs;
Chart.register(...registerables);
module.exports = Object.assign(Chart, chartjs);
================================================
FILE: auto/auto.d.ts
================================================
import {Chart} from '../dist/types.js';
export * from '../dist/types.js';
export default Chart;
================================================
FILE: auto/auto.js
================================================
import {Chart, registerables} from '../dist/chart.js';
Chart.register(...registerables);
export * from '../dist/chart.js';
export default Chart;
================================================
FILE: auto/package.json
================================================
{
"name": "chart.js-auto",
"private": true,
"description": "Auto registering package. Exists to support bundlers without exports support such as webpack 4.",
"type": "module",
"main": "./auto.cjs",
"module": "./auto.js",
"exports": {
"types": "./auto.d.ts",
"import": "./auto.js",
"require": "./auto.cjs"
},
"types": "./auto.d.ts"
}
================================================
FILE: composer.json
================================================
{
"name": "nnnick/chartjs",
"type": "library",
"description": "Simple HTML5 charts using the canvas element.",
"keywords": [
"chart",
"js"
],
"homepage": "https://www.chartjs.org/",
"license": "MIT",
"authors": [
{
"name": "NICK DOWNIE",
"email": "hello@nickdownie.com"
}
],
"require": {
"php": ">=5.3.3"
},
"minimum-stability": "stable",
"extra": {
"branch-alias": {
"release/2.0": "v2.0-dev"
}
}
}
================================================
FILE: docs/.vuepress/config.ts
================================================
import * as path from 'path';
import markdownItInclude from 'markdown-it-include';
import { DefaultThemeConfig, defineConfig, PluginTuple } from 'vuepress/config';
const docsVersion = "VERSION";
const base: `/${string}/` = process.env.NODE_ENV === "development" ? '/docs/master/' : `/docs/${docsVersion}/`;
export default defineConfig({
title: 'Chart.js',
description: 'Open source HTML5 Charts for your website',
theme: 'chartjs',
base,
dest: path.resolve(__dirname, '../../dist/docs'),
head: [
['link', {rel: 'icon', href: '/favicon.ico'}],
],
plugins: [
'tabs',
['flexsearch'],
['@vuepress/html-redirect', {
countdown: 0,
}],
[
'@vuepress/google-analytics',
{
'ga': 'UA-28909194-3'
}
],
['redirect', {
redirectors: [
// Default sample page when accessing /samples.
{base: '/samples', alternative: ['information']},
],
}],
['vuepress-plugin-code-copy', true],
['vuepress-plugin-typedoc', {
entryPoints: ['../../src/types/index.d.ts'],
hideInPageTOC: true,
tsconfig: path.resolve(__dirname, '../../tsconfig.json'),
},
],
['@simonbrunel/vuepress-plugin-versions', {
filters: {
suffix: (tag) => tag ? ` (${tag})` : '',
title: (v, vars) => {
return window.location.href.includes('master') ? 'Development (master)' :
vars.tag === 'latest' ? 'Latest (' + v + ')' :
v + (vars.tag ? ` (${vars.tag})` : '') + ' (outdated)';
},
},
menu: {
text: '{{version|title}}',
items: [
{
text: 'Documentation',
items: [
{
text: 'Development (master)',
link: '/docs/master/',
},
{
text: 'Latest version',
link: '/docs/latest/',
},
{
type: 'versions',
text: '{{version}}{{tag|suffix}}',
link: '/docs/{{version}}/',
exclude: /^[01]\.|2\.[0-5]\./,
group: 'minor',
}
]
},
{
text: 'Release notes (5 latest)',
items: [
{
type: 'versions',
limit: 5,
target: '_blank',
group: 'patch',
link: 'https://github.com/chartjs/Chart.js/releases/tag/v{{version}}'
}
]
}
]
},
}],
] as PluginTuple[],
chainWebpack(config) {
config.merge({
resolve: {
alias: {
'chart.js': path.resolve(__dirname, '../../dist/chart.js'),
}
}
})
config.module.rule('images').use('url-loader').tap(options => ({
...options,
esModule: false
}))
},
markdown: {
extendMarkdown: md => {
md.use(markdownItInclude, path.resolve(__dirname, '../'));
}
},
themeConfig: {
repo: 'chartjs/Chart.js',
logo: '/favicon.ico',
lastUpdated: 'Last Updated',
searchPlaceholder: 'Search...',
editLinks: false,
docsDir: 'docs',
chart: {
imports: [
['scripts/register.js'],
['scripts/utils.js', 'Utils'],
['scripts/helpers.js', 'helpers'],
['scripts/components.js', 'components']
]
},
nav: [
{text: 'Home', link: '/'},
{text: 'API', link: '/api/'},
{text: 'Samples', link: `/samples/`},
{
text: 'Ecosystem',
ariaLabel: 'Community Menu',
items: [
{ text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
{ text: 'Discord', link: 'https://discord.gg/HxEguTK6av' },
{ text: 'Stack Overflow', link: 'https://stackoverflow.com/questions/tagged/chart.js' }
]
}
],
sidebar: {
'/api/': 'API',
'/samples/': [
'information',
{
title: 'Bar Charts',
children: [
'bar/border-radius',
'bar/floating',
'bar/horizontal',
'bar/stacked',
'bar/stacked-groups',
'bar/vertical',
]
},
{
title: 'Line Charts',
children: [
'line/interpolation',
'line/line',
'line/multi-axis',
'line/point-styling',
'line/segments',
'line/stepped',
'line/styling',
]
},
{
title: 'Other charts',
children: [
'other-charts/bubble',
'other-charts/combo-bar-line',
'other-charts/doughnut',
'other-charts/multi-series-pie',
'other-charts/pie',
'other-charts/polar-area',
'other-charts/polar-area-center-labels',
'other-charts/radar',
'other-charts/radar-skip-points',
'other-charts/scatter',
'other-charts/scatter-multi-axis',
'other-charts/stacked-bar-line',
]
},
{
title: 'Area charts',
children: [
'area/line-boundaries',
'area/line-datasets',
'area/line-drawtime',
'area/line-stacked',
'area/radar'
]
},
{
title: 'Scales',
children: [
'scales/linear-min-max',
'scales/linear-min-max-suggested',
'scales/linear-step-size',
'scales/log',
'scales/stacked',
'scales/time-line',
'scales/time-max-span',
'scales/time-combo',
]
},
{
title: 'Scale Options',
children: [
'scale-options/center',
'scale-options/grid',
'scale-options/ticks',
'scale-options/titles',
]
},
{
title: 'Legend',
children: [
'legend/events',
'legend/html',
'legend/point-style',
'legend/position',
'legend/title',
]
},
{
title: 'Title',
children: [
'title/alignment',
]
},
{
title: 'Subtitle',
children: [
'subtitle/basic',
]
}, {
title: 'Tooltip',
children: [
'tooltip/content',
'tooltip/html',
'tooltip/interactions',
'tooltip/point-style',
'tooltip/position',
]
},
{
title: 'Scriptable Options',
children: [
'scriptable/bar',
'scriptable/bubble',
'scriptable/line',
'scriptable/pie',
'scriptable/polar',
'scriptable/radar',
]
},
{
title: 'Animations',
children: [
'animations/delay',
'animations/drop',
'animations/loop',
'animations/progressive-line',
'animations/progressive-line-easing',
]
},
{
title: 'Advanced',
children: [
'advanced/data-decimation',
'advanced/derived-axis-type',
'advanced/derived-chart-type',
'advanced/linear-gradient',
'advanced/programmatic-events',
'advanced/progress-bar',
'advanced/radial-gradient',
]
},
{
title: 'Plugins',
children: [
'plugins/chart-area-border',
'plugins/doughnut-empty-state',
'plugins/quadrants',
]
},
'utils'
],
'/': [
'',
{
title: 'Getting Started',
children: [
'getting-started/',
'getting-started/installation',
'getting-started/integration',
'getting-started/usage',
'getting-started/using-from-node-js',
]
},
{
title: 'General',
children: [
'general/accessibility',
'general/colors',
'general/data-structures',
'general/fonts',
'general/options',
'general/padding',
'general/performance'
]
},
{
title: 'Configuration',
children: [
'configuration/',
'configuration/animations',
'configuration/canvas-background',
'configuration/decimation',
'configuration/device-pixel-ratio',
'configuration/elements',
'configuration/interactions',
'configuration/layout',
'configuration/legend',
'configuration/locale',
'configuration/responsive',
'configuration/subtitle',
'configuration/title',
'configuration/tooltip',
]
},
{
title: 'Chart Types',
children: [
'charts/area',
'charts/bar',
'charts/bubble',
'charts/doughnut',
'charts/line',
'charts/mixed',
'charts/polar',
'charts/radar',
'charts/scatter',
]
},
{
title: 'Axes',
children: [
'axes/',
{
title: 'Cartesian',
children: [
'axes/cartesian/',
'axes/cartesian/category',
'axes/cartesian/linear',
'axes/cartesian/logarithmic',
'axes/cartesian/time',
'axes/cartesian/timeseries'
],
},
{
title: 'Radial',
children: [
'axes/radial/',
'axes/radial/linear'
],
},
'axes/labelling',
'axes/styling'
]
},
{
title: 'Developers',
children: [
'developers/',
'developers/api',
'developers/axes',
'developers/charts',
'developers/contributing',
'developers/plugins',
'developers/publishing',
['api/', 'TypeDoc'],
'developers/updates',
]
},
{
title: 'Migration',
children: [
'migration/v4-migration',
'migration/v3-migration',
]
},
],
} as any
} as DefaultThemeConfig
});
================================================
FILE: docs/.vuepress/redirects
================================================
/charts/ /charts/line.html
/general/ /general/data-structures.html
/samples/ /samples/information.html
/getting-started/v3-migration/ /migration/v3-migration.html
================================================
FILE: docs/.vuepress/styles/index.styl
================================================
@require '~vuepress-plugin-tabs/dist/themes/default.styl'
.theme-default-content
&:not(.custom)
max-width: unset
.chart-view
max-width 800px
.sidebar-group.is-sub-group.depth-1
> .sidebar-group-items
border-left 1px solid rgba($accentColor, 0.25)
> .sidebar-heading:not(.open)
border-left 1px solid rgba($accentColor, 0.25)
margin-left: 0
> .sidebar-heading
padding-left calc(1.475rem - 1px)
transition border-color .25s
padding 0.35rem 1.475rem
border-left-width 3px
margin-left -1px
font-size 1em
line-height 1.4
opacity 1 !important
&.active, &.open
border-left-color $accentColor
color $accentColor
font-weight bold
>.arrow
display none
>.sidebar-group-items
padding-left: 0
.sidebar-group.is-sub-group.depth-1:hover .sidebar-heading:not(.open)
color $accentColor
margin-left -1px
border-left 3px solid rgba($accentColor, 0.25)
padding-left calc(1.475rem - 1px)
================================================
FILE: docs/axes/_common.md
================================================
### Common options to all axes
Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
| `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area.
| `border` | `object` | | Border configuration. [more...](/axes/styling.md#border-configuration)
| `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
| `grid` | `object` | | Grid line configuration. [more...](/axes/styling.md#grid-line-configuration)
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](/axes/index.md#axis-range-settings)
| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](/axes/index.md#axis-range-settings)
| `reverse` | `boolean` | `false` | Reverse the scale.
| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](/axes/index.md#stacking)
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](/axes/index.md#axis-range-settings)
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](/axes/index.md#axis-range-settings)
| `ticks` | `object` | | Tick configuration. [more...](/axes/index.md#tick-configuration)
| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
================================================
FILE: docs/axes/_common_ticks.md
================================================
### Common tick options to all axes
Namespace: `options.scales[scaleId].ticks`
| Name | Type | Scriptable | Default | Description
| ---- | ---- | :-------------------------------: | ------- | -----------
| `backdropColor` | [`Color`](../../general/colors.md) | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
| `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
| `callback` | `function` | | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](/axes/labelling.md#creating-custom-tick-formats).
| `display` | `boolean` | | `true` | If true, show tick labels.
| `color` | [`Color`](/general/colors.md) | Yes | `Chart.defaults.color` | Color of ticks.
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](/general/fonts.md)
| `major` | `object` | | `{}` | [Major ticks configuration](/axes/styling.md#major-tick-configuration).
| `padding` | `number` | | `3` | Sets the offset of the tick labels from the axis
| `showLabelBackdrop` | `boolean` | Yes | `true` for radial scale, `false` otherwise | If true, draw a background behind the tick labels.
| `textStrokeColor` | [`Color`](/general/colors.md) | Yes | `` | The color of the stroke around the text.
| `textStrokeWidth` | `number` | Yes | `0` | Stroke width around the text.
| `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.
================================================
FILE: docs/axes/cartesian/_common.md
================================================
### Common options to all cartesian axes
Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area
| `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position)
| `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked.
| `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
| `axis` | `string` | | Which type of axis this is. Possible values are: `'x'`, `'y'`. If not set, this is inferred from the first character of the ID which should be `'x'` or `'y'`.
| `offset` | `boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a bar chart by default.
| `title` | `object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration)
================================================
FILE: docs/axes/cartesian/_common_ticks.md
================================================
### Common tick options to all cartesian axes
Namespace: `options.scales[scaleId].ticks`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `align` | `string` | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, `'end'`, or `'inner'`. `inner` alignment means align `start` for first tick and `end` for the last tick of horizontal axis
| `crossAlign` | `string` | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](/axes/cartesian/#tick-alignment)
| `sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
| `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
| `autoSkipPadding` | `number` | `3` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.
| `includeBounds` | `boolean` | `true` | Should the defined `min` and `max` values be presented as ticks even if they are not "nice".
| `labelOffset` | `number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the x-direction for the x-axis, and the y-direction for the y-axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
| `maxRotation` | `number` | `50` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
| `minRotation` | `number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
| `mirror` | `boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
| `padding` | `number` | `0` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
================================================
FILE: docs/axes/cartesian/category.md
================================================
# Category Axis
If the global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
Specifying any of the settings above defines the x-axis as `type: 'category'` if not defined otherwise. For more fine-grained control of category labels, it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
## Category Axis Definition
Globally:
```javascript
let chart = new Chart(ctx, {
type: ...
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: ...
}
});
```
As part of axis definition:
```javascript
let chart = new Chart(ctx, {
type: ...
data: ...
options: {
scales: {
x: {
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June']
}
}
}
});
```
## Configuration Options
### Category Axis specific options
Namespace: `options.scales[scaleId]`
| Name | Type | Description
| ---- | ---- | -----------
| `min` | `string`\|`number` | The minimum item to display. [more...](#min-max-configuration)
| `max` | `string`\|`number` | The maximum item to display. [more...](#min-max-configuration)
| `labels` | `string[]`\|`string[][]` | An array of labels to display. When an individual label is an array of strings, each item is rendered on a new line.
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
## Tick Configuration
!!!include(axes/cartesian/_common_ticks.md)!!!
!!!include(axes/_common_ticks.md)!!!
## Min Max Configuration
For both the `min` and `max` properties, the value must be `string` in the `labels` array or `numeric` value as an index of a label in that array. In the example below, the x axis would only display "March" through "June".
```javascript
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [10, 20, 30, 40, 50, 60]
}],
labels: ['January', 'February', 'March', 'April', 'May', 'June']
},
options: {
scales: {
x: {
min: 'March'
}
}
}
});
```
## Internal data format
Internally category scale uses label indices
================================================
FILE: docs/axes/cartesian/index.md
================================================
# Cartesian Axes
Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Five cartesian axes are included in Chart.js by default.
* [linear](./linear.md)
* [logarithmic](./logarithmic.md)
* [category](./category.md)
* [time](./time.md)
* [timeseries](./timeseries.md)
## Visual Components
A cartesian axis is composed of visual components that can be individually configured. These components are:
* [border](#border)
* [grid lines](#grid-lines)
* [tick](#ticks-and-tick-marks)
* [tick mark](#ticks-and-tick-marks)
* [title](#title)
### Border
The axis border is drawn at the edge of the axis, beside the chart area. In the image below, it is drawn in red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data,
options: {
scales: {
x: {
border: {
color: 'red'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Grid lines
The grid lines for an axis are drawn on the chart area. In the image below, they are red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data,
options: {
scales: {
x: {
grid: {
color: 'red',
borderColor: 'grey',
tickColor: 'grey'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Ticks and Tick Marks
Ticks represent data values on the axis that appear as labels. The tick mark is the extension of the grid line from the axis border to the label.
In this example, the tick mark is drawn in red while the tick label is drawn in blue.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data,
options: {
scales: {
x: {
grid: {
tickColor: 'red'
},
ticks: {
color: 'blue',
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Title
The title component of the axis is used to label the data. In the example below, it is shown in red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data,
options: {
scales: {
x: {
title: {
color: 'red',
display: true,
text: 'Month'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Common Configuration
:::tip Note
These are only the common options supported by all cartesian axes. Please see the specific axis documentation for all the available options for that axis.
:::
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
### Axis Position
An axis can either be positioned at the edge of the chart, at the center of the chart area, or dynamically with respect to a data value.
To position the axis at the edge of the chart, set the `position` option to one of: `'top'`, `'left'`, `'bottom'`, `'right'`.
To position the axis at the center of the chart area, set the `position` option to `'center'`. In this mode, either the `axis` option must be specified or the axis ID has to start with the letter 'x' or 'y'. This is so chart.js knows what kind of axis (horizontal or vertical) it is.
To position the axis with respect to a data value, set the `position` option to an object such as:
```javascript
{
x: -20
}
```
This will position the axis at a value of -20 on the axis with ID "x". For cartesian axes, only 1 axis may be specified.
### Scale Bounds
The `bounds` property controls the scale boundary strategy (bypassed by `min`/`max` options).
* `'data'`: makes sure data are fully visible, labels outside are removed
* `'ticks'`: makes sure ticks are fully visible, data outside are truncated
### Tick Configuration
:::tip Note
These are only the common tick options supported by all cartesian axes. Please see specific axis documentation for all of the available options for that axis.
:::
!!!include(axes/cartesian/_common_ticks.md)!!!
!!!include(axes/_common_ticks.md)!!!
### Tick Alignment
The alignment of ticks is primarily controlled using two settings on the tick configuration object: `align` and `crossAlign`. The `align` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlign` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlign` setting is used to left align the labels on the Y axis.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
scales: {
y: {
ticks: {
crossAlign: 'far',
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::tip Note
The `crossAlign` setting is only effective when these preconditions are met:
* tick rotation is `0`
* axis position is `'top'`, '`left'`, `'bottom'` or `'right'`
:::
### Axis ID
The properties `dataset.xAxisID` or `dataset.yAxisID` have to match to `scales` property. This is especially needed if multi-axes charts are used.
```javascript
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
// This dataset appears on the first axis
yAxisID: 'first-y-axis'
}, {
// This dataset appears on the second axis
yAxisID: 'second-y-axis'
}]
},
options: {
scales: {
'first-y-axis': {
type: 'linear'
},
'second-y-axis': {
type: 'linear'
}
}
}
});
```
## Creating Multiple Axes
With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the `xAxes` and `yAxes` properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are **not** used in this case.
In the example below, we are creating two Y axes. We then use the `yAxisID` property to map the datasets to their correct axes.
```javascript
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [20, 50, 100, 75, 25, 0],
label: 'Left dataset',
// This binds the dataset to the left y axis
yAxisID: 'left-y-axis'
}, {
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
label: 'Right dataset',
// This binds the dataset to the right y axis
yAxisID: 'right-y-axis'
}],
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
options: {
scales: {
'left-y-axis': {
type: 'linear',
position: 'left'
},
'right-y-axis': {
type: 'linear',
position: 'right'
}
}
}
});
```
================================================
FILE: docs/axes/cartesian/linear.md
================================================
# Linear Axis
The linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
## Configuration Options
### Linear Axis specific options
Namespace: `options.scales[scaleId]`
| Name | Type | Description
| ---- | ---- | -----------
| `beginAtZero` | `boolean` | if true, scale will include 0 if it is not already included.
| `grace` | `number`\|`string` | Percentage (string ending with `%`) or amount (number) for added room in the scale range above and below data. [more...](#grace)
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
## Tick Configuration
### Linear Axis specific tick options
Namespace: `options.scales[scaleId].ticks`
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation.
| `format` | `object` | Yes | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
| `precision` | `number` | Yes | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
| `stepSize` | `number` | Yes | | User-defined fixed step size for the scale. [more...](#step-size)
!!!include(axes/cartesian/_common_ticks.md)!!!
!!!include(axes/_common_ticks.md)!!!
## Step Size
If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y-axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
```javascript
let options = {
scales: {
y: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
```
## Grace
If the value is a string ending with `%`, it's treated as a percentage. If a number, it's treated as a value.
The value is added to the maximum data value and subtracted from the minimum data. This extends the scale range as if the data values were that much greater.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: ['Positive', 'Negative'],
datasets: [{
data: [100, -50],
backgroundColor: 'rgb(255, 99, 132)'
}],
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
type: 'linear',
grace: '5%'
}
},
plugins: {
legend: false
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Internal data format
Internally, the linear scale uses numeric data.
================================================
FILE: docs/axes/cartesian/logarithmic.md
================================================
# Logarithmic Axis
The logarithmic scale is used to chart numerical data. It can be placed on either the x or y-axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis.
## Configuration Options
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
## Tick Configuration
### Logarithmic Axis specific options
Namespace: `options.scales[scaleId].ticks`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
!!!include(axes/cartesian/_common_ticks.md)!!!
!!!include(axes/_common_ticks.md)!!!
## Internal data format
Internally, the logarithmic scale uses numeric data.
================================================
FILE: docs/axes/cartesian/time.md
================================================
# Time Cartesian Axis
The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit based on the size of the scale.
## Date Adapters
The time scale **requires** both a date library and a corresponding adapter to be present. Please choose from the [available adapters](https://github.com/chartjs/awesome#adapters).
## Data Sets
### Input Data
See [data structures](../../general/data-structures.md).
### Date Formats
When providing data for the time scale, Chart.js uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970, UTC) internally. However, Chart.js also supports all of the formats that your chosen date adapter accepts. You should use timestamps if you'd like to set `parsing: false` for better performance.
## Configuration Options
### Time Axis specific options
Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `min` | `number`\|`string` | | The minimum item to display. [more...](#min-max-configuration)
| `max` | `number`\|`string` | | The maximum item to display. [more...](#min-max-configuration)
| `suggestedMin` | `number`\|`string` | | The minimum item to display if there is no datapoint before it. [more...](../index.md#axis-range-settings)
| `suggestedMax` | `number`\|`string` | | The maximum item to display if there is no datapoint behind it. [more...](../index.md#axis-range-settings)
| `adapters.date` | `object` | `{}` | Options for adapter for external date library if that adapter needs or supports options
| `bounds` | `string` | `'data'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
| `offsetAfterAutoskip` | `boolean` | `false` | If true, bar chart offsets are computed with auto skipped ticks.
| `ticks.source` | `string` | `'auto'` | How ticks are generated. [more...](#ticks-source)
| `time.displayFormats` | `object` | | Sets how different time units are displayed. [more...](#display-formats)
| `time.isoWeekday` | `boolean`\|`number` | `false` | If `boolean` and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday. If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday)
| `time.parser` | `string`\|`function` | | Custom parser for dates. [more...](#parser)
| `time.round` | `string` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
| `time.tooltipFormat` | `string` | | The format string to use for the tooltip.
| `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit.
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
#### Time Units
The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.
* `'millisecond'`
* `'second'`
* `'minute'`
* `'hour'`
* `'day'`
* `'week'`
* `'month'`
* `'quarter'`
* `'year'`
For example, to create a chart with a time scale that always displayed units per month, the following config could be used.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'month'
}
}
}
}
});
```
#### Display Formats
You may specify a map of display formats with a key for each unit:
* `millisecond`
* `second`
* `minute`
* `hour`
* `day`
* `week`
* `month`
* `quarter`
* `year`
The format string used as a value depends on the date adapter you chose to use.
For example, to set the display format for the `quarter` unit to show the month and year, the following config might be passed to the chart constructor.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
time: {
displayFormats: {
quarter: 'MMM YYYY'
}
}
}
}
}
});
```
#### Ticks Source
The `ticks.source` property controls the ticks generation.
* `'auto'`: generates "optimal" ticks based on scale size and time options
* `'data'`: generates ticks from data (including labels from data `{x|y}` objects)
* `'labels'`: generates ticks from user given `labels` ONLY
#### Parser
If this property is defined as a string, it is interpreted as a custom format to be used by the date adapter to parse the date.
If this is a function, it must return a type that can be handled by your date adapter's `parse` method.
## Min Max Configuration
For both the `min` and `max` properties, the value must be `string` that is parsable by your date adapter or a number with the amount of milliseconds that have elapsed since UNIX epoch.
In the example below the x axis will start at 7 November 2021.
```javascript
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [{
x: '2021-11-06 23:39:30',
y: 50
}, {
x: '2021-11-07 01:00:28',
y: 60
}, {
x: '2021-11-07 09:00:28',
y: 20
}]
}],
},
options: {
scales: {
x: {
min: '2021-11-07 00:00:00',
}
}
}
});
```
## Changing the scale type from Time scale to Logarithmic/Linear scale.
When changing the scale type from Time scale to Logarithmic/Linear scale, you need to add `bounds: 'ticks'` to the scale options. Changing the `bounds` parameter is necessary because its default value is the `'data'` for the Time scale.
Initial config:
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'time',
}
}
}
});
```
Scale update:
```javascript
chart.options.scales.x = {
type: 'logarithmic',
bounds: 'ticks'
};
```
## Internal data format
Internally time scale uses milliseconds since epoch
================================================
FILE: docs/axes/cartesian/timeseries.md
================================================
# Time Series Axis
The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.
## Example
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'timeseries',
}
}
}
});
```
## More details
Please see [the time scale documentation](./time.md) for all other details.
================================================
FILE: docs/axes/index.md
================================================
# Axes
Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X-axis and 1 or more Y-axis to map points onto the 2-dimensional canvas. These axes are known as ['cartesian axes'](./cartesian/).
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/).
Scales in Chart.js >v2.0 are significantly more powerful, but also different from those of v1.0.
* Multiple X & Y axes are supported.
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displayed normally.
* Scale titles are supported.
* New scale types can be extended without writing an entirely new chart type.
## Default scales
The default `scaleId`'s for cartesian charts are `'x'` and `'y'`. For radial charts: `'r'`.
Each dataset is mapped to a scale for each axis (x, y or r) it requires. The scaleId's that a dataset is mapped to is determined by the `xAxisID`, `yAxisID` or `rAxisID`.
If the ID for an axis is not specified, the first scale for that axis is used. If no scale for an axis is found, a new scale is created.
Some examples:
The following chart will have `'x'` and `'y'` scales:
```js
let chart = new Chart(ctx, {
type: 'line'
});
```
The following chart will have scales `'x'` and `'myScale'`:
```js
let chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
data: [1, 2, 3]
}]
},
options: {
scales: {
myScale: {
type: 'logarithmic',
position: 'right', // `axis` is determined by the position as `'y'`
}
}
}
});
```
The following chart will have scales `'xAxis'` and `'yAxis'`:
```js
let chart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
yAxisID: 'yAxis'
}]
},
options: {
scales: {
xAxis: {
// The axis for this scale is determined from the first letter of the id as `'x'`
// It is recommended to specify `position` and / or `axis` explicitly.
type: 'time',
}
}
}
});
```
The following chart will have `'r'` scale:
```js
let chart = new Chart(ctx, {
type: 'radar'
});
```
The following chart will have `'myScale'` scale:
```js
let chart = new Chart(ctx, {
type: 'radar',
scales: {
myScale: {
axis: 'r'
}
}
});
```
## Common Configuration
:::tip Note
These are only the common options supported by all axes. Please see specific axis documentation for all the available options for that axis.
:::
!!!include(axes/_common.md)!!!
## Tick Configuration
:::tip Note
These are only the common tick options supported by all axes. Please see specific axis documentation for all the available tick options for that axis.
:::
!!!include(axes/_common_ticks.md)!!!
## Axis Range Settings
Given the number of axis range settings, it is important to understand how they all interact with each other.
The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto-fit behaviour.
```javascript
let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);
```
In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
```javascript
let chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
y: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
```
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Stacking
By default, data is not stacked. If the `stacked` option of the value scale (y-axis on horizontal chart) is `true`, positive and negative values are stacked separately. Additionally, a `stack` option can be defined per dataset to further divide into stack groups [more...](../general/data-structures/#dataset-configuration).
For some charts, you might want to stack positive and negative values together. That can be achieved by specifying `stacked: 'single'`.
## Callbacks
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. The options are supplied at the top level of the axis options.
Namespace: `options.scales[scaleId]`
| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeUpdate` | `axis` | Callback called before the update process starts.
| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
| `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
| `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
| `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
| `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
| `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
| `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
| `beforeCalculateLabelRotation` | `axis` | Callback that runs before tick rotation is determined.
| `afterCalculateLabelRotation` | `axis` | Callback that runs after tick rotation is determined.
| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
| `afterUpdate` | `axis` | Callback that runs at the end of the update process.
### Updating Axis Defaults
The default configuration for a scale can be easily changed. All you need to do is set the new options to `Chart.defaults.scales[type]`.
For example, to set the minimum value of 0 for all linear scales, you would do the following. Any linear scales created after this time would now have a minimum of 0.
```javascript
Chart.defaults.scales.linear.min = 0;
```
## Creating New Axes
To create a new axis, see the [developer docs](../developers/axes.md).
================================================
FILE: docs/axes/labelling.md
================================================
# Labeling Axes
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
## Scale Title Configuration
Namespace: `options.scales[scaleId].title`, it defines options for the scale title. Note that this only applies to cartesian axes.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `false` | If true, display the axis title.
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
| `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
| `strokeColor` | [`Color`](../general/colors.md) | | Color of text stroke.
| `strokeWidth` | `number` | | Size of stroke width, in pixels.
| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
| `padding` | [`Padding`](../general/padding.md) | `4` | Padding to apply around scale labels. Only `top`, `bottom` and `y` are implemented.
## Creating Custom Tick Formats
It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$').
To do this, you need to override the `ticks.callback` method in the axis configuration.
The method receives 3 arguments:
* `value` - the tick value in the **internal data format** of the associated scale. For time scale, it is a timestamp.
* `index` - the tick index in the ticks array.
* `ticks` - the array containing all of the [tick objects](../api/interfaces/Tick).
The call to the method is scoped to the scale. `this` inside the method is the scale object.
If the callback returns `null` or `undefined` the associated grid line will be hidden.
:::tip
The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/Scale.md#getlabelforvalue)
:::
In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, ticks) {
return '$' + value;
}
}
}
}
}
});
```
Keep in mind that overriding `ticks.callback` means that you are responsible for all formatting of the label. Depending on your use case, you may want to call the default formatter and then modify its output. In the example above, that would look like:
```javascript
// call the default formatter, forwarding `this`
return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);
```
Related samples:
* [Tick configuration sample](../samples/scale-options/ticks)
================================================
FILE: docs/axes/radial/index.md
================================================
# Radial Axes
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
* [radialLinear](./linear.md)
## Visual Components
A radial axis is composed of visual components that can be individually configured. These components are:
* [angle lines](#angle-lines)
* [grid lines](#grid-lines)
* [point labels](#point-labels)
* [ticks](#ticks)
### Angle Lines
The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
angleLines: {
color: 'red'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Grid Lines
The grid lines for an axis are drawn on the chart area. In the example below, they are red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
grid: {
color: 'red'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Point Labels
The point labels indicate the value for each angle line. In the example below, they are red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
pointLabels: {
color: 'red'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Ticks
The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 0, 5],
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'radar',
data,
options: {
scales: {
r: {
ticks: {
color: 'red'
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
================================================
FILE: docs/axes/radial/linear.md
================================================
# Linear Radial Axis
The linear radial scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation to the center of the axis.
The following additional configuration options are provided by the radial linear scale.
## Configuration Options
### Linear Radial Axis specific options
Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `animate` | `boolean` | `true` | Whether to animate scaling the chart from the centre
| `angleLines` | `object` | | Angle line configuration. [more...](#angle-line-options)
| `beginAtZero` | `boolean` | `false` | If true, scale will include 0 if it is not already included.
| `pointLabels` | `object` | | Point label configuration. [more...](#point-label-options)
| `startAngle` | `number` | `0` | Starting angle of the scale. In degrees, 0 is at top.
### Common options for all axes
Namespace: `options.scales[scaleId]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `type` | `string` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.
| `alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
| `backgroundColor` | [`Color`](/general/colors.md) | | Background color of the scale area.
| `display` | `boolean`\|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
| `grid` | `object` | | Grid line configuration. [more...](#grid-line-configuration)
| `min` | `number` | | User defined minimum number for the scale, overrides minimum value from data. [more...](/axes/index.md#axis-range-settings)
| `max` | `number` | | User defined maximum number for the scale, overrides maximum value from data. [more...](/axes/index.md#axis-range-settings)
| `reverse` | `boolean` | `false` | Reverse the scale.
| `stacked` | `boolean`\|`string` | `false` | Should the data be stacked. [more...](/axes/index.md#stacking)
| `suggestedMax` | `number` | | Adjustment used when calculating the maximum data value. [more...](/axes/index.md#axis-range-settings)
| `suggestedMin` | `number` | | Adjustment used when calculating the minimum data value. [more...](/axes/index.md#axis-range-settings)
| `ticks` | `object` | | Tick configuration. [more...](/axes/index.md#tick-configuration)
| `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
## Tick Configuration
### Linear Radial Axis specific tick options
Namespace: `options.scales[scaleId].ticks`
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `count` | `number` | Yes | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation.
| `format` | `object` | Yes | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
| `maxTicksLimit` | `number` | Yes | `11` | Maximum number of ticks and gridlines to show.
| `precision` | `number` | Yes | | If defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
| `stepSize` | `number` | Yes | | User defined fixed step size for the scale. [more...](#step-size)
!!!include(axes/_common_ticks.md)!!!
The scriptable context is described in [Options](../../general/options.md#tick) section.
## Grid Line Configuration
Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines of the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `borderDash` | `number[]` | | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
The scriptable context is described in [Options](../general/options.md#tick) section.
## Axis Range Settings
Given the number of axis range settings, it is important to understand how they all interact with each other.
The `suggestedMax` and `suggestedMin` settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto-fit behaviour.
```javascript
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
```
In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the `suggestedMin` setting, it is ignored.
```javascript
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
```
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Step Size
If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
```javascript
let options = {
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
```
## Angle Line Options
The following options are used to configure angled lines that radiate from the center of the chart to the point labels.
Namespace: `options.scales[scaleId].angleLines`
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `display` | `boolean` | | `true` | If true, angle lines are shown.
| `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.borderColor` | Color of angled lines.
| `lineWidth` | `number` | Yes | `1` | Width of angled lines.
| `borderDash` | `number[]` | Yes<sup>1</sup> | `[]` | Length and spacing of dashes on angled lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Yes | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
1. the `borderDash` setting only accepts a static value or a function. Passing an array of arrays is not supported.
The scriptable context is described in [Options](../../general/options.md#pointLabel) section.
## Point Label Options
The following options are used to configure the point labels that are shown on the perimeter of the scale.
Namespace: `options.scales[scaleId].pointLabels`
| Name | Type | Scriptable | Default | Description
| ---- | ---- | ------- | ------- | -----------
| `backdropColor` | [`Color`](../../general/colors.md) | `true` | `undefined` | Background color of the point label.
| `backdropPadding` | [`Padding`](../../general/padding.md) | | `2` | Padding of label backdrop.
| `borderRadius` | `number`\|`object` | `true` | `0` | Border radius of the point label
| `display` | `boolean`\|`string` | | `true` | If true, point labels are shown. When `display: 'auto'`, the label is hidden if it overlaps with another label.
| `callback` | `function` | | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
| `color` | [`Color`](../../general/colors.md) | Yes | `Chart.defaults.color` | Color of label.
| `font` | `Font` | Yes | `Chart.defaults.font` | See [Fonts](../../general/fonts.md)
| `padding` | `number` | Yes | 5 | Padding between chart and point labels.
| [`centerPointLabels`](../../samples/other-charts/polar-area-center-labels.md) | `boolean` | | `false` | If true, point labels are centered.
The scriptable context is described in [Options](../../general/options.md#pointLabel) section.
## Internal data format
Internally, the linear radial scale uses numeric data
================================================
FILE: docs/axes/styling.md
================================================
# Styling
There are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line-configuration) and [ticks](#tick-configuration).
## Grid Line Configuration
Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
| `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
| `offset` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
| `tickBorderDash` | `number[]` | Yes | Yes | `[]` | Length and spacing of the tick mark line. If not set, defaults to the grid line `borderDash` value.
| `tickBorderDashOffset` | `number` | Yes | Yes | | Offset for the line dash of the tick mark. If unset, defaults to the grid line `borderDashOffset` value
| `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.
| `tickLength` | `number` | | | `8` | Length in pixels that the grid lines will draw into the axis area.
| `tickWidth` | `number` | Yes | Yes | | Width of the tick mark in pixels. If unset, defaults to the grid line width.
| `z` | `number` | | | `-1` | z-index of the gridline layer. Values <= 0 are drawn under datasets, > 0 on top.
The scriptable context is described in [Options](../general/options.md#tick) section.
## Tick Configuration
!!!include(axes/_common_ticks.md)!!!
The scriptable context is described in [Options](../general/options.md#tick) section.
## Major Tick Configuration
Namespace: `options.scales[scaleId].ticks.major`, it defines options for the major tick marks that are generated by the axis.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `false` | If true, major ticks are generated. A major tick will affect autoskipping and `major` will be defined on ticks in the scriptable options context.
## Border Configuration
Namespace: `options.scales[scaleId].border`, it defines options for the border that run perpendicular to the axis.
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `display` | `boolean` | | | `true` | If true, draw a border at the edge between the axis and the chart area.
| `color` | [`Color`](../general/colors.md) | | | `Chart.defaults.borderColor` | The color of the border line.
| `width` | `number` | | | `1` | The width of the border line.
| `dash` | `number[]` | Yes | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `dashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `z` | `number` | | | `0` | z-index of the border layer. Values <= 0 are drawn under datasets, > 0 on top.
================================================
FILE: docs/charts/area.md
================================================
# Area Chart
Both [line](./line.md) and [radar](./radar.md) charts support a `fill` option on the dataset object which can be used to create space between two datasets or a dataset and a boundary, i.e. the scale `origin`, `start,` or `end` (see [filling modes](#filling-modes)).
:::tip Note
This feature is implemented by the [`filler` plugin](https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.filler/index.js).
:::
## Filling modes
| Mode | Type | Values |
| :--- | :--- | :--- |
| Absolute dataset index | `number` | `1`, `2`, `3`, ... |
| Relative dataset index | `string` | `'-1'`, `'-2'`, `'+1'`, ... |
| Boundary | `string` | `'start'`, `'end'`, `'origin'` |
| Disabled <sup>1</sup> | `boolean` | `false` |
| Stacked value below | `string` | `'stack'` |
| Axis value | `object` | `{ value: number; }` |
| Shape (fill inside line) | `string` | `'shape'` |
> <sup>1</sup> for backward compatibility, `fill: true` is equivalent to `fill: 'origin'`<br/>
### Example
```javascript
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: fill to 'origin'
{fill: '+2'}, // 1: fill to dataset 3
{fill: 1}, // 2: fill to dataset 1
{fill: false}, // 3: no fill
{fill: '-2'}, // 4: fill to dataset 2
{fill: {value: 25}} // 5: fill to axis value 25
]
}
});
```
If you need to support multiple colors when filling from one dataset to another, you may specify an object with the following option :
| Param | Type | Description |
| :--- | :--- | :--- |
| `target` | `number`, `string`, `boolean`, `object` | The accepted values are the same as the filling mode values, so you may use absolute and relative dataset indexes and/or boundaries. |
| `above` | `Color` | If no color is set, the default color will be the background color of the chart. |
| `below` | `Color` | Same as the above. |
### Example with multiple colors
```javascript
new Chart(ctx, {
data: {
datasets: [
{
fill: {
target: 'origin',
above: 'rgb(255, 0, 0)', // Area will be red above the origin
below: 'rgb(0, 0, 255)' // And blue below the origin
}
}
]
}
});
```
## Configuration
Namespace: `options.plugins.filler`
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `drawTime` | `string` | `beforeDatasetDraw` | Filler draw time. Supported values: `'beforeDraw'`, `'beforeDatasetDraw'`, `'beforeDatasetsDraw'`
| [`propagate`](#propagate) | `boolean` | `true` | Fill propagation when target is hidden.
### propagate
`propagate` takes a `boolean` value (default: `true`).
If `true`, the fill area will be recursively extended to the visible target defined by the `fill` value of hidden dataset targets:
#### Example using propagate
```javascript
new Chart(ctx, {
data: {
datasets: [
{fill: 'origin'}, // 0: fill to 'origin'
{fill: '-1'}, // 1: fill to dataset 0
{fill: 1}, // 2: fill to dataset 1
{fill: false}, // 3: no fill
{fill: '-2'} // 4: fill to dataset 2
]
},
options: {
plugins: {
filler: {
propagate: true
}
}
}
});
```
`propagate: true`:
-if dataset 2 is hidden, dataset 4 will fill to dataset 1
-if dataset 2 and 1 are hidden, dataset 4 will fill to `'origin'`
`propagate: false`:
-if dataset 2 and/or 4 are hidden, dataset 4 will not be filled
================================================
FILE: docs/charts/bar.md
================================================
# Bar Chart
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.bar` - options for all bar datasets
* `options.elements.bar` - options for all [bar elements](../configuration/elements.md#bar-configuration)
* `options` - options for the whole chart
The bar chart allows a number of properties to be specified for each dataset.
These are used to set display properties for a specific dataset. For example,
the color of the bars is generally set this way.
Only the `data` option needs to be specified in the dataset namespace.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`base`](#general) | `number` | Yes | Yes |
| [`barPercentage`](#barpercentage) | `number` | - | - | `0.9` |
| [`barThickness`](#barthickness) | `number`\|`string` | - | - | |
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderSkipped`](#borderskipped) | `string`\|`boolean` | Yes | Yes | `'start'`
| [`borderWidth`](#borderwidth) | `number`\|`object` | Yes | Yes | `0`
| [`borderRadius`](#borderradius) | `number`\|`object` | Yes | Yes | `0`
| [`categoryPercentage`](#categorypercentage) | `number` | - | - | `0.8` |
| [`clip`](#general) | `number`\|`object`\|`false` | - | - |
| [`data`](#data-structure) | `object`\|`object[]`\| `number[]`\|`string[]` | - | - | **required**
| [`grouped`](#general) | `boolean` | - | - | `true` |
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes |
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes |
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`hoverBorderRadius`](#interactions) | `number` | Yes | Yes | `0`
| [`indexAxis`](#general) | `string` | - | - | `'x'`
| [`inflateAmount`](#inflateamount) | `number`\|`'auto'` | Yes | Yes | `'auto'`
| [`maxBarThickness`](#maxbarthickness) | `number` | - | - | |
| [`minBarLength`](#styling) | `number` | - | - | |
| [`label`](#general) | `string` | - | - | `''`
| [`order`](#general) | `number` | - | - | `0`
| [`pointStyle`](../configuration/elements.md#point-styles) | [`pointStyle`](../configuration/elements.md#types) | Yes | - | `'circle'`
| [`skipNull`](#general) | `boolean` | - | - | |
| [`stack`](#general) | `string` | - | - | `'bar'` |
| [`xAxisID`](#general) | `string` | - | - | first x axis
| [`yAxisID`](#general) | `string` | - | - | first y axis
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### Example dataset configuration
```javascript
data: {
datasets: [{
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
data: [10, 20, 30, 40, 50, 60, 70]
}]
};
```
### General
| Name | Description
| ---- | ----
| `base` | Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `grouped` | Should the bars be grouped on index axis. When `true`, all the datasets at same index value will be placed next to each other centering on that index value. When `false`, each bar is placed on its actual index-axis value.
| `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars.
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend. [more](mixed.md#drawing-order)
| `skipNull` | If `true`, null or undefined values will not be used for spacing calculations when determining bar size.
| `stack` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). [more](#stacked-bar-chart)
| `xAxisID` | The ID of the x-axis to plot this dataset on.
| `yAxisID` | The ID of the y-axis to plot this dataset on.
### Styling
The style of each bar can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | The bar background color.
| `borderColor` | The bar border color.
| [`borderSkipped`](#borderskipped) | The edge to skip when drawing bar.
| [`borderWidth`](#borderwidth) | The bar border width (in pixels).
| [`borderRadius`](#borderradius) | The bar border radius (in pixels).
| `minBarLength` | Set this to ensure that bars have a minimum length in pixels.
| `pointStyle` | Style of the point for legend. [more...](../configuration/elements.md#point-styles)
All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options.
#### borderSkipped
This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius.
In general, this does not need to be changed except when creating chart types
that derive from a bar chart.
:::tip Note
For negative bars in a vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in a horizontal chart.
:::
Options are:
* `'start'`
* `'end'`
* `'middle'` (only valid on stacked bars: the borders between bars are skipped)
* `'bottom'`
* `'left'`
* `'top'`
* `'right'`
* `false` (don't skip any borders)
* `true` (skip all borders)
#### borderWidth
If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except [`borderSkipped`](#borderskipped). If this value is an object, the `left` property defines the left border width. Similarly, the `right`, `top`, and `bottom` properties can also be specified. Omitted borders and [`borderSkipped`](#borderskipped) are skipped.
#### borderRadius
If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight), except corners touching the [`borderSkipped`](#borderskipped). If this value is an object, the `topLeft` property defines the top-left corners border radius. Similarly, the `topRight`, `bottomLeft`, and `bottomRight` properties can also be specified. Omitted corners and those touching the [`borderSkipped`](#borderskipped) are skipped. For example if the `top` border is skipped, the border radius for the corners `topLeft` and `topRight` will be skipped as well.
:::tip Stacked Charts
When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.
:::
#### inflateAmount
This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when [`barPercentage`](#barpercentage) * [`categoryPercentage`](#categorypercentage) is 1. The default value `'auto'` should work in most cases.
### Interactions
The interaction with each bar can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | The bar background color when hovered.
| `hoverBorderColor` | The bar border color when hovered.
| `hoverBorderWidth` | The bar border width when hovered (in pixels).
| `hoverBorderRadius` | The bar border radius when hovered (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.bar.*`](../configuration/elements.md#bar-configuration) options.
### barPercentage
Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. [more...](#barpercentage-vs-categorypercentage)
### categoryPercentage
Percent (0-1) of the available width each category should be within the sample width. [more...](#barpercentage-vs-categorypercentage)
### barThickness
If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
### maxBarThickness
Set this to ensure that bars are not sized thicker than this.
## Scale Configuration
The bar chart sets unique default values for the following configuration from the associated `scale` options:
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `offset` | `boolean` | `true` | If true, extra space is added to both edges and the axis is scaled to fit into the chart area.
| `grid.offset` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
### Example scale configuration
```javascript
options = {
scales: {
x: {
grid: {
offset: true
}
}
}
};
```
### Offset Grid Lines
If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.
## Default Options
It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in `Chart.overrides.bar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
## barPercentage vs categoryPercentage
The following shows the relationship between the bar percentage option and the category percentage option.
```
// categoryPercentage: 1.0
// barPercentage: 1.0
Bar: | 1.0 | 1.0 |
Category: | 1.0 |
Sample: |===========|
// categoryPercentage: 1.0
// barPercentage: 0.5
Bar: |.5| |.5|
Category: | 1.0 |
Sample: |==============|
// categoryPercentage: 0.5
// barPercentage: 1.0
Bar: |1.0||1.0|
Category: | .5 |
Sample: |==================|
```
## Data Structure
All the supported [data structures](../general/data-structures.md) can be used with bar charts.
## Stacked Bar Chart
Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
```javascript
const stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
```
## Horizontal Bar Chart
A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
To achieve this, you will have to set the `indexAxis` property in the options object to `'y'`.
The default for this property is `'x'` and thus will show vertical bars.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y',
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Horizontal Bar Chart config Options
The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x-axis in a bar chart, are applied to the y-axis in a horizontal bar chart.
## Internal data format
`{x, y, _custom}` where `_custom` is an optional object defining stacked bar properties: `{start, end, barStart, barEnd, min, max}`. `start` and `end` are the input values. Those two are repeated in `barStart` (closer to origin), `barEnd` (further from origin), `min` and `max`.
================================================
FILE: docs/charts/bubble.md
================================================
# Bubble Chart
A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles.
```js chart-editor
// <block:setup:1>
const data = {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
}],
backgroundColor: 'rgb(255, 99, 132)'
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bubble',
data: data,
options: {}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.bubble` - options for all bubble datasets
* `options.elements.point` - options for all [point elements](../configuration/elements.md#point-configuration)
* `options` - options for the whole chart
The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `3`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`data`](#data-structure) | `object[]` | - | - | **required**
| [`drawActiveElementsOnTop`](#general) | `boolean` | Yes | Yes | `true`
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`hoverRadius`](#interactions) | `number` | Yes | Yes | `4`
| [`hitRadius`](#interactions) | `number` | Yes | Yes | `1`
| [`label`](#general) | `string` | - | - | `undefined`
| [`order`](#general) | `number` | - | - | `0`
| [`pointStyle`](#styling) | [`pointStyle`](../configuration/elements.md#types) | Yes | Yes | `'circle'`
| [`rotation`](#styling) | `number` | Yes | Yes | `0`
| [`radius`](#styling) | `number` | Yes | Yes | `3`
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### General
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `drawActiveElementsOnTop` | Draw the active bubbles of a dataset over the other bubbles of the dataset
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for tooltip and legend. [more](mixed.md#drawing-order)
### Styling
The style of each bubble can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | bubble background color.
| `borderColor` | bubble border color.
| `borderWidth` | bubble border width (in pixels).
| `pointStyle` | bubble [shape style](../configuration/elements.md#point-styles).
| `rotation` | bubble rotation (in degrees).
| `radius` | bubble radius (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
### Interactions
The interaction with each bubble can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hitRadius` | bubble **additional** radius for hit detection (in pixels).
| `hoverBackgroundColor` | bubble background color when hovered.
| `hoverBorderColor` | bubble border color when hovered.
| `hoverBorderWidth` | bubble border width when hovered (in pixels).
| `hoverRadius` | bubble **additional** radius when hovered (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
## Default Options
We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at `Chart.overrides.bubble`.
## Data Structure
Bubble chart datasets need to contain a `data` array of points, each point represented by an object containing the following properties:
```javascript
{
// X Value
x: number,
// Y Value
y: number,
// Bubble radius in pixels (not scaled).
r: number
}
```
**Important:** the radius property, `r` is **not** scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas.
## Internal data format
`{x, y, _custom}` where `_custom` is the radius.
================================================
FILE: docs/charts/doughnut.md
================================================
# Doughnut and Pie Charts
Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.
They are excellent at showing the relational proportions between data.
Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their `cutout`. This equates to what portion of the inner should be cut out. This defaults to `0` for pie charts, and `'50%'` for doughnuts.
They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same.
:::: tabs
::: tab Doughnut
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'doughnut',
data: data,
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
:::tab Pie
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'pie',
data: data,
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
::::
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.doughnut` - options for all doughnut datasets
* `options.datasets.pie` - options for all pie datasets
* `options.elements.arc` - options for all [arc elements](../configuration/elements.md#arc-configuration)
* `options` - options for the whole chart
The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colours of the dataset's arcs are generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
| [`circumference`](#general) | `number` | - | - | `undefined`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
| [`offset`](#styling) | `number`\|`number[]` | Yes | Yes | `0`
| [`rotation`](#general) | `number` | - | - | `undefined`
| [`spacing`](#styling) | `number` | - | - | `0`
| [`weight`](#styling) | `number` | - | - | `1`
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### General
| Name | Description
| ---- | ----
| `circumference` | Per-dataset override for the sweep that the arcs cover
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `rotation` | Per-dataset override for the starting angle to draw arcs from
### Styling
The style of each arc can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | arc border width (in pixels).
| `offset` | arc offset (in pixels).
| `spacing` | Fixed arc offset (in pixels). Similar to `offset` but applies to all arcs.
| `weight` | The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.
All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
### Border Alignment
The following values are supported for `borderAlign`.
* `'center'` (default)
* `'inner'`
When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all borders will not overlap.
### Border Radius
If this value is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). If this value is an object, the `outerStart` property defines the outer-start corner's border radius. Similarly, the `outerEnd`, `innerStart`, and `innerEnd` properties can also be specified.
### Interactions
The interaction with each arc can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | arc background color when hovered.
| `hoverBorderColor` | arc border color when hovered.
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `hoverBorderWidth` | arc border width when hovered (in pixels).
| `hoverOffset` | arc offset when hovered (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
## Config Options
These are the customisation options specific to Pie & Doughnut charts. These options are looked up on access, and form together with the global chart configuration the options of the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `cutout` | `number`\|`string` | `50%` - for doughnut, `0` - for pie | The portion of the chart that is cut out of the middle. If `string` and ending with '%', percentage of the chart radius. `number` is considered to be pixels.
| `radius` | `number`\|`string` | `100%` | The outer radius of the chart. If `string` and ending with '%', percentage of the maximum radius. `number` is considered to be pixels.
| `rotation` | `number` | 0 | Starting angle to draw arcs from.
| `circumference` | `number` | 360 | Sweep to allow arcs to cover.
| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `boolean` | `false` | If true, will animate scaling the chart from the center outwards.
## Default Options
We can also change these default values for each Doughnut type that is created, this object is available at `Chart.overrides.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.overrides.pie`, with the only difference being `cutout` being set to 0.
## Data Structure
For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly.
```javascript
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
```
================================================
FILE: docs/charts/line.md
================================================
# Line Chart
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data: data,
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.line` - options for all line datasets
* `options.elements.line` - options for all [line elements](../configuration/elements.md#line-configuration)
* `options.elements.point` - options for all [point elements](../configuration/elements.md#point-configuration)
* `options` - options for the whole chart
The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderCapStyle`](#line-styling) | `string` | Yes | - | `'butt'`
| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `'default'`
| [`data`](#data-structure) | `object`\|`object[]`\| `number[]`\|`string[]` | - | - | **required**
| [`drawActiveElementsOnTop`](#general) | `boolean` | Yes | Yes | `true`
| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `false`
| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`indexAxis`](#general) | `string` | - | - | `'x'`
| [`label`](#general) | `string` | - | - | `''`
| [`order`](#general) | `number` | - | - | `0`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
| [`pointStyle`](#point-styling) | [`pointStyle`](../configuration/elements.md#types) | Yes | Yes | `'circle'`
| [`segment`](#segment) | `object` | - | - | `undefined`
| [`showLine`](#line-styling) | `boolean` | - | - | `true`
| [`spanGaps`](#line-styling) | `boolean`\|`number` | - | - | `undefined`
| [`stack`](#general) | `string` | - | - | `'line'` |
| [`stepped`](#stepped) | `boolean`\|`string` | - | - | `false`
| [`tension`](#line-styling) | `number` | - | - | `0`
| [`xAxisID`](#general) | `string` | - | - | first x axis
| [`yAxisID`](#general) | `string` | - | - | first y axis
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### General
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `drawActiveElementsOnTop` | Draw the active points of a dataset over the other points of the dataset
| `indexAxis` | The base axis of the dataset. `'x'` for horizontal lines and `'y'` for vertical lines.
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend. [more](mixed.md#drawing-order)
| `stack` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). [more](#stacked-area-chart)
| `xAxisID` | The ID of the x-axis to plot this dataset on.
| `yAxisID` | The ID of the y-axis to plot this dataset on.
### Point Styling
The style of each point can be controlled with the following properties:
| Name | Description
| ---- | ----
| `pointBackgroundColor` | The fill color for points.
| `pointBorderColor` | The border color for points.
| `pointBorderWidth` | The width of the point border in pixels.
| `pointHitRadius` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointRotation` | The rotation of the point in degrees.
| `pointStyle` | Style of the point. [more...](../configuration/elements.md#point-styles)
All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
### Line Styling
The style of the line can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | The line fill color.
| `borderCapStyle` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderColor` | The line color.
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts](area.md).
| `tension` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
| `showLine` | If false, the line is not drawn for this dataset.
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `null` data will create a break in the line. Can also be a number specifying the maximum gap length to span. The unit of the value depends on the scale used.
If the value is `undefined`, the values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
### Interactions
The interaction with each point can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `pointHoverBackgroundColor` | Point background color when hovered.
| `pointHoverBorderColor` | Point border color when hovered.
| `pointHoverBorderWidth` | Border width of point when hovered.
| `pointHoverRadius` | The radius of the point when hovered.
### cubicInterpolationMode
The following interpolation modes are supported.
* `'default'`
* `'monotone'`
The `'default'` algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets.
The `'monotone'` algorithm is more suited to `y = f(x)` datasets: it preserves monotonicity (or piecewise monotonicity) of the dataset being interpolated, and ensures local extremums (if any) stay at input data points.
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
### Segment
Line segment styles can be overridden by scriptable options in the `segment` object. Currently, all of the `border*` and `backgroundColor` options are supported. The segment styles are resolved for each section of the line between each point. `undefined` fallbacks to main line styles.
:::tip
To be able to style gaps, you need the [`spanGaps`](#line-styling) option enabled.
:::
Context for the scriptable segment contains the following properties:
* `type`: `'segment'`
* `p0`: first point element
* `p1`: second point element
* `p0DataIndex`: index of first point in the data array
* `p1DataIndex`: index of second point in the data array
* `datasetIndex`: dataset index
[Example usage](../samples/line/segments.md)
### Stepped
The following values are supported for `stepped`.
* `false`: No Step Interpolation (default)
* `true`: Step-before Interpolation (eq. `'before'`)
* `'before'`: Step-before Interpolation
* `'after'`: Step-after Interpolation
* `'middle'`: Step-middle Interpolation
If the `stepped` value is set to anything other than false, `tension` will be ignored.
## Default Options
It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.overrides.line`. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all line charts with `spanGaps = true` you would do:
```javascript
Chart.overrides.line.spanGaps = true;
```
## Data Structure
All the supported [data structures](../general/data-structures.md) can be used with line charts.
## Stacked Area Chart
Line charts can be configured into stacked area charts by changing the settings on the y-axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces.
```javascript
const stackedLine = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
y: {
stacked: true
}
}
}
});
```
## Vertical Line Chart
A vertical line chart is a variation on the horizontal line chart.
To achieve this, you will have to set the `indexAxis` property in the options object to `'y'`.
The default for this property is `'x'` and thus will show horizontal lines.
```js chart-editor
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: labels,
datasets: [{
axis: 'y',
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data: data,
options: {
indexAxis: 'y',
scales: {
x: {
beginAtZero: true
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
### Config Options
The configuration options for the vertical line chart are the same as for the [line chart](#configuration-options). However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart.
## Internal data format
`{x, y}`
================================================
FILE: docs/charts/mixed.md
================================================
# Mixed Chart Types
With Chart.js, it is possible to create mixed charts that are a combination of two or more different chart types. A common example is a bar chart that also includes a line dataset.
When creating a mixed chart, we specify the chart type on each dataset.
```javascript
const mixedChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40]
}, {
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
```
At this point, we have a chart rendering how we'd like. It's important to note that the default options for the charts are only considered at the dataset level and are not merged at the chart level in this case.
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'January',
'February',
'March',
'April'
],
datasets: [{
type: 'bar',
label: 'Bar Dataset',
data: [10, 20, 30, 40],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'line',
label: 'Line Dataset',
data: [50, 50, 50, 50],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'scatter',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Drawing order
By default, datasets are drawn such that the first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`. Note that this also affects stacking, legend, and tooltip. So it's essentially the same as reordering the datasets.
The `order` property behaves like a weight instead of a specific order, so the higher the number, the sooner that dataset is drawn on the canvas and thus other datasets with a lower order number will get drawn over it.
```javascript
const mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40],
// this dataset is drawn below
order: 2
}, {
label: 'Line Dataset',
data: [10, 10, 10, 10],
type: 'line',
// this dataset is drawn on top
order: 1
}],
labels: ['January', 'February', 'March', 'April']
},
options: options
});
```
================================================
FILE: docs/charts/polar.md
================================================
# Polar Area Chart
Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.
This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'polarArea',
data: data,
options: {}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.polarArea` - options for all polarArea datasets
* `options.elements.arc` - options for all [arc elements](../configuration/elements.md#arc-configuration)
* `options` - options for the whole chart
The following options can be included in a polar area chart dataset to configure options for that specific dataset.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`circular`](#styling) | `boolean` | Yes | Yes | `true`
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### General
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
### Styling
The style of each arc can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | arc border width (in pixels).
| `circular` | By default the Arc is curved. If `circular: false` the Arc will be flat.
All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
### Border Alignment
The following values are supported for `borderAlign`.
* `'center'` (default)
* `'inner'`
When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all the borders do not overlap.
### Interactions
The interaction with each arc can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | arc background color when hovered.
| `hoverBorderColor` | arc border color when hovered.
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `hoverBorderWidth` | arc border width when hovered (in pixels).
All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
## Config Options
These are the customisation options specific to Polar Area charts. These options are looked up on access, and form together with the [global chart default options](#default-options) the options of the chart.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `animation.animateRotate` | `boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `boolean` | `true` | If true, will animate scaling the chart from the center outwards.
The polar area chart uses the [radialLinear](../axes/radial/linear.md) scale. Additional configuration is provided via the scale.
## Default Options
We can also change these default values for each PolarArea type that is created, this object is available at `Chart.overrides.polarArea`. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all new polar area charts with `animateScale = false` you would do:
```javascript
Chart.overrides.polarArea.animation.animateScale = false;
```
## Data Structure
For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.
You also need to specify an array of labels so that tooltips appear correctly for each slice.
```javascript
data = {
datasets: [{
data: [10, 20, 30]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: [
'Red',
'Yellow',
'Blue'
]
};
```
================================================
FILE: docs/charts/radar.md
================================================
# Radar Chart
A radar chart is a way of showing multiple data points and the variation between them.
They are often useful for comparing the points of two or more different data sets.
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'radar',
data: data,
options: {
elements: {
line: {
borderWidth: 3
}
}
},
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.line` - options for all line datasets
* `options.elements.line` - options for all [line elements](../configuration/elements.md#line-configuration)
* `options.elements.point` - options for all [point elements](../configuration/elements.md#point-configuration)
* `options` - options for the whole chart
The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.
| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
| ---- | ---- | :----: | :----: | ----
| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderCapStyle`](#line-styling) | `string` | Yes | - | `'butt'`
| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `'miter'`
| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
| [`hoverBackgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderCapStyle`](#line-styling) | `string` | Yes | - | `undefined`
| [`hoverBorderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `undefined`
| [`hoverBorderDash`](#line-styling) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#line-styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | - | `undefined`
| [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`fill`](#line-styling) | `boolean`\|`string` | Yes | - | `false`
| [`label`](#general) | `string` | - | - | `''`
| [`order`](#general) | `number` | - | - | `0`
| [`tension`](#line-styling) | `number` | - | - | `0`
| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1`
| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined`
| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1`
| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4`
| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3`
| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0`
| [`pointStyle`](#point-styling) | [`pointStyle`](../configuration/elements.md#types) | Yes | Yes | `'circle'`
| [`spanGaps`](#line-styling) | `boolean` | - | - | `undefined`
All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options)
### General
| Name | Description
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for tooltip and legend. [more](mixed.md#drawing-order)
### Point Styling
The style of each point can be controlled with the following properties:
| Name | Description
| ---- | ----
| `pointBackgroundColor` | The fill color for points.
| `pointBorderColor` | The border color for points.
| `pointBorderWidth` | The width of the point border in pixels.
| `pointHitRadius` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointRotation` | The rotation of the point in degrees.
| `pointStyle` | Style of the point. [more...](../configuration/elements#point-styles)
All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.
### Line Styling
The style of the line can be controlled with the following properties:
| Name | Description
| ---- | ----
| `backgroundColor` | The line fill color.
| `borderCapStyle` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderColor` | The line color.
| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | The line width (in pixels).
| `fill` | How to fill the area under the line. See [area charts](area.md).
| `tension` | Bezier curve tension of the line. Set to 0 to draw straight lines.
| `spanGaps` | If true, lines will be drawn between points with no or null data. If false, points with `null` data will create a break in the line.
If the value is `undefined`, the values fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options.
### Interactions
The interaction with each point can be controlled with the following properties:
| Name | Description
| ---- | -----------
| `pointHoverBackgroundColor` | Point background color when hovered.
| `pointHoverBorderColor` | Point border color when hovered.
| `pointHoverBorderWidth` | Border width of point when hovered.
| `pointHoverRadius` | The radius of the point when hovered.
## Scale Options
The radar chart supports only a single scale. The options for this scale are defined in the `scales.r` property, which can be referenced from the [Linear Radial Axis page](../axes/radial/linear).
```javascript
options = {
scales: {
r: {
angleLines: {
display: false
},
suggestedMin: 50,
suggestedMax: 100
}
}
};
```
## Default Options
It is common to want to apply a configuration setting to all created radar charts. The global radar chart settings are stored in `Chart.overrides.radar`. Changing the global options only affects charts created after the change. Existing charts are not changed.
## Data Structure
The `data` property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index.
```javascript
data: [20, 10]
```
For a radar chart, to provide context of what each point means, we include an array of strings that show around each point in the chart.
```javascript
data: {
labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
datasets: [{
data: [20, 10, 4, 2]
}]
}
```
## Internal data format
`{x, y}`
================================================
FILE: docs/charts/scatter.md
================================================
# Scatter Chart
Scatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 points.
```js chart-editor
// <block:setup:1>
const data = {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}, {
x: 0.5,
y: 5.5
}],
backgroundColor: 'rgb(255, 99, 132)'
}],
};
// </block:setup>
// <block:config:0>
const config = {
type: 'scatter',
data: data,
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
## Dataset Properties
Namespaces:
* `data.datasets[index]` - options for this dataset only
* `options.datasets.scatter` - options for all scatter datasets
* `options.elements.line` - options for all [line elements](../configuration/elements.md#line-configuration)
* `options.elements.point` - options for all [point elements](../configuration/elements.md#point-configuration)
* `options` - options for the whole chart
The scatter chart supports all the same properties as the [line chart](./line.md#dataset-properties).
By default, the scatter chart will override the showLine property of the line chart to `false`.
The index scale is of the type `linear`. This means, if you are using the labels array, the values have to be numbers or parsable to numbers, the same applies to the object format for the keys.
## Data Structure
Unlike the line chart where data can be supplied in two different formats, the scatter chart only accepts data in a point format.
```javascript
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
```
## Internal data format
`{x, y}`
================================================
FILE: docs/configuration/animations.md
================================================
# Animations
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
:::: tabs
::: tab "Looping tension [property]"
```js chart-editor
// <block:setup:1>
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Looping tension',
data: [65, 59, 80, 81, 26, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data: data,
options: {
animations: {
tension: {
duration: 1000,
easing: 'linear',
from: 1,
to: 0,
loop: true
}
},
scales: {
y: { // defining min and max so hiding the dataset does not change scale range
min: 0,
max: 100
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
::: tab "Hide and show [mode]"
```js chart-editor
// <block:setup:1>
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Try hiding me',
data: [65, 59, 80, 81, 26, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
}]
};
// </block:setup>
// <block:config:0>
const config = {
type: 'line',
data: data,
options: {
transitions: {
show: {
animations: {
x: {
from: 0
},
y: {
from: 0
}
}
},
hide: {
animations: {
x: {
to: 0
},
y: {
to: 0
}
}
}
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
::::
## Animation configuration
Animation configuration consists of 3 keys.
| Name | Type | Details
| ---- | ---- | -------
| animation | `object` | [animation](#animation)
| animations | `object` | [animations](#animations)
| transitions | `object` | [transitions](#transitions)
These keys can be configured in following paths:
* `` - chart options
* `datasets[type]` - dataset type options
* `overrides[type]` - chart type options
These paths are valid under `defaults` for global configuration and `options` for instance configuration.
## animation
The default configuration is defined here: <a href="https://github.com/chartjs/Chart.js/blob/master/src/core/core.animations.defaults.js" target="_blank">core.animations.defaults.js</a>
Namespace: `options.animation`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `duration` | `number` | `1000` | The number of milliseconds an animation takes.
| `easing` | `string` | `'easeOutQuart'` | Easing function to use. [more...](#easing)
| `delay` | `number` | `undefined` | Delay before starting the animations.
| `loop` | `boolean` | `undefined` | If set to `true`, the animations loop endlessly.
These defaults can be overridden in `options.animation` or `dataset.animation` and `tooltip.animation`. These keys are also [Scriptable](../general/options.md#scriptable-options).
## animations
Animations options configures which element properties are animated and how.
In addition to the main [animation configuration](#animation-configuration), the following options are available:
Namespace: `options.animations[animation]`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `properties` | `string[]` | `key` | The property names this configuration applies to. Defaults to the key name of this object.
| `type` | `string` | `typeof property` | Type of property, determines the interpolator used. Possible values: `'number'`, `'color'` and `'boolean'`. Only really needed for `'color'`, because `typeof` does not get that right.
| `from` | `number`\|`Color`\|`boolean` | `undefined` | Start value for the animation. Current value is used when `undefined`
| `to` | `number`\|`Color`\|`boolean` | `undefined` | End value for the animation. Updated value is used when `undefined`
| `fn` | <code><T>(from: T, to: T, factor: number) => T;</code> | `undefined` | Optional custom interpolator, instead of using a predefined interpolator from `type` |
### Default animations
| Name | Option | Value
| ---- | ------ | -----
| `numbers` | `properties` | `['x', 'y', 'borderWidth', 'radius', 'tension']`
| `numbers` | `type` | `'number'`
| `colors` | `properties` | `['color', 'borderColor', 'backgroundColor']`
| `colors` | `type` | `'color'`
:::tip Note
These default animations are overridden by most of the dataset controllers.
:::
## transitions
The core transitions are `'active'`, `'hide'`, `'reset'`, `'resize'`, `'show'`.
A custom transition can be used by passing a custom `mode` to [update](../developers/api.md#updatemode).
Transition extends the main [animation configuration](#animation-configuration) and [animations configuration](#animations-configuration).
### Default transitions
Namespace: `options.transitions[mode]`
| Mode | Option | Value | Description
| -----| ------ | ----- | -----
| `'active'` | animation.duration | 400 | Override default duration to 400ms for hover animations
| `'resize'` | animation.duration | 0 | Override default duration to 0ms (= no animation) for resize
| `'show'` | animations.colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], from: 'transparent' }` | Colors are faded in from transparent when dataset is shown using legend / [api](../developers/api.md#showdatasetIndex).
| `'show'` | animations.visible | `{ type: 'boolean', duration: 0 }` | Dataset visibility is immediately changed to true so the color transition from transparent is visible.
| `'hide'` | animations.colors | `{ type: 'color', properties: ['borderColor', 'backgroundColor'], to: 'transparent' }` | Colors are faded to transparent when dataset id hidden using legend / [api](../developers/api.md#hidedatasetIndex).
| `'hide'` | animations.visible | `{ type: 'boolean', easing: 'easeInExpo' }` | Visibility is changed to false at a very late phase of animation
## Disabling animation
To disable an animation configuration, the animation node must be set to `false`, with the exception for animation modes which can be disabled by setting the `duration` to `0`.
```javascript
chart.options.animation = false; // disables all animations
chart.options.animations.colors = false; // disables animation defined by the collection of 'colors' properties
chart.options.animations.x = false; // disables animation defined by the 'x' property
chart.options.transitions.active.animation.duration = 0; // disables the animation for 'active' mode
```
## Easing
Available options are:
* `'linear'`
* `'easeInQuad'`
* `'easeOutQuad'`
* `'easeInOutQuad'`
* `'easeInCubic'`
* `'easeOutCubic'`
* `'easeInOutCubic'`
* `'easeInQuart'`
* `'easeOutQuart'`
* `'easeInOutQuart'`
* `'easeInQuint'`
* `'easeOutQuint'`
* `'easeInOutQuint'`
* `'easeInSine'`
* `'easeOutSine'`
* `'easeInOutSine'`
* `'easeInExpo'`
* `'easeOutExpo'`
* `'easeInOutExpo'`
* `'easeInCirc'`
* `'easeOutCirc'`
* `'easeInOutCirc'`
* `'easeInElastic'`
* `'easeOutElastic'`
* `'easeInOutElastic'`
* `'easeInBack'`
* `'easeOutBack'`
* `'easeInOutBack'`
* `'easeInBounce'`
* `'easeOutBounce'`
* `'easeInOutBounce'`
See [Robert Penner's easing equations](http://robertpenner.com/easing/).
## Animation Callbacks
The animation configuration provides callbacks which are useful for synchronizing an external draw to the chart animation.
The callbacks can be set only at main [animation configuration](#animation-configuration).
Namespace: `options.animation`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `onProgress` | `function` | `null` | Callback called on each step of an animation.
| `onComplete` | `function` | `null` | Callback called when all animations are completed.
The callback is passed the following object:
```javascript
{
// Chart object
chart: Chart,
// Number of animations still in progress
currentStep: number,
// `true` for the initial animation of the chart
initial: boolean,
// Total number of animations at the start of current animation
numSteps: number,
}
```
The following example fills a progress bar during the chart animation.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.currentStep / animation.numSteps;
}
}
}
});
```
Another example usage of these callbacks can be found [in this progress bar sample,](../samples/advanced/progress-bar.md) which displays a progress bar showing how far along the animation is.
================================================
FILE: docs/configuration/canvas-background.md
================================================
# Canvas background
In some use cases you would want a background image or color over the whole canvas. There is no built-in support for this, the way you can achieve this is by writing a custom plugin.
In the two example plugins underneath here you can see how you can draw a color or image to the canvas as background. This way of giving the chart a background is only necessary if you want to export the chart with that specific background.
For normal use you can set the background more easily with [CSS](https://www.w3schools.com/cssref/css3_pr_background.asp).
:::: tabs
::: tab Color
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
// </block:setup>
// <block:plugin:2>
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const plugin = {
id: 'customCanvasBackgroundColor',
beforeDraw: (chart, args, options) => {
const {ctx} = chart;
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = options.color || '#99ffff';
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
}
};
// </block:plugin>
// <block:config:0>
const config = {
type: 'doughnut',
data: data,
options: {
plugins: {
customCanvasBackgroundColor: {
color: 'lightGreen',
}
}
},
plugins: [plugin],
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
::: tab Image
```js chart-editor
// <block:setup:1>
const data = {
labels: [
'Red',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
// </block:setup>
// <block:plugin:2>
// Note: changes to the plugin code is not reflected to the chart, because the plugin is loaded at chart construction time and editor changes only trigger an chart.update().
const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';
const plugin = {
id: 'customCanvasBackgroundImage',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {top, left, width, height} = chart.chartArea;
const x = left + width / 2 - image.width / 2;
const y = top + height / 2 - image.height / 2;
ctx.drawImage(image, x, y);
} else {
image.onload = () => chart.draw();
}
}
};
// </block:plugin>
// <block:config:0>
const config = {
type: 'doughnut',
data: data,
plugins: [plugin],
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
```
:::
::::
================================================
FILE: docs/configuration/decimation.md
================================================
# Data Decimation
The decimation plugin can be used with line charts to automatically decimate data at the start of the chart lifecycle. Before enabling this plugin, review the [requirements](#requirements) to ensure that it will work with the chart you want to create.
## Configuration Options
Namespace: `options.plugins.decimation`, the global options for the plugin are defined in `Chart.defaults.plugins.decimation`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `false` | Is decimation enabled?
| `algorithm` | `string` | `'min-max'` | Decimation algorithm to use. See the [more...](#decimation-algorithms)
| `samples` | `number` | | If the `'lttb'` algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel.
| `threshold` | `number` | | If the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width.<br />The number of point after decimation can be higher than the `threshold` value.
## Decimation Algorithms
Decimation algorithm to use for data. Options are:
* `'lttb'`
* `'min-max'`
### Largest Triangle Three Bucket (LTTB) Decimation
[LTTB](https://github.com/sveinn-steinarsson/flot-downsample) decimation reduces the number of data points significantly. This is most useful for showing trends in data using only a few data points.
### Min/Max Decimation
[Min/max](https://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784) decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.
## Requirements
To use the decimation plugin, the following requirements must be met:
1. The dataset must have an [`indexAxis`](../charts/line.md#general) of `'x'`
2. The dataset must be a line
3. The X axis for the dataset must be either a [`'linear'`](../axes/cartesian/linear.md) or [`'time'`](../axes/cartesian/time.md) type axis
4. Data must not need parsing, i.e. [`parsing`](../general/data-structures.md#dataset-configuration) must be `false`
5. The dataset object must be mutable. The plugin stores the original data as `dataset._data` and then defines a new `data` property on the dataset.
6. There must be more points on the chart than the threshold value. Take a look at the Configuration Options for more information.
## Related Samples
* [Data Decimation Sample](../samples/advanced/data-decimation)
================================================
FILE: docs/configuration/device-pixel-ratio.md
================================================
# Device Pixel Ratio
By default, the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).
For applications where a chart will be converted to a bitmap, or printed to a higher DPI medium, it can be desirable to render the chart at a higher resolution than the default.
Setting `devicePixelRatio` to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.
## Configuration Options
Namespace: `options`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `devicePixelRatio` | `number` | `window.devicePixelRatio` | Override the window's default devicePixelRatio.
================================================
FILE: docs/configuration/elements.md
================================================
# Elements
While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[bars](#bar-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
## Global Configuration
The element options can be specified per chart or globally. The global options for elements are defined in `Chart.defaults.elements`. For example, to set the border width of all bar charts globally, you would do:
```javascript
Chart.defaults.elements.bar.borderWidth = 2;
```
## Point Configuration
Point elements are used to represent the points in a line, radar or bubble chart.
Namespace: `options.elements.point`, global point options: `Chart.defaults.elements.point`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `radius` | `number` | `3` | Point radius.
| [`pointStyle`](#point-styles) | [`pointStyle`](#types) | `'circle'` | Point style.
| `rotation` | `number` | `0` | Point rotation (in degrees).
| `backgroundColor` | [`Color`](../general/colors.md) | `Chart.defaults.backgroundColor` | Point fill color.
| `borderWidth` | `number` | `1` | Point stroke width.
| `borderColor` | [`Color`](../general/colors.md) | `'Chart.defaults.borderColor` | Point stroke color.
| `hitRadius` | `number` | `1` | Extra radius added to point radius for hit detection.
| `hoverRadius` | `number` | `4` | Point radius when hovered.
| `hoverBorderWidth` | `number` | `1` | Stroke width when hovered.
### Point Styles
#### Types
The `pointStyle` argument accepts the following type of inputs: `string`, `Image` and `HTMLCanvasElement`
#### Info
When a string is provided, the following values are supported:
- `'circle'`
- `'cross'`
- `'crossRot'`
- `'dash'`
- `'line'`
- `'rect'`
- `'rectRounded'`
- `'rectRot'`
- `'star'`
- `'triangle'`
- `false`
If the value is an image or a canvas element, that image or canvas element is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage).
## Line Configuration
Line elements are used to represent the line in a line chart.
Namespace: `options.elements.line`, global line options: `Chart.defaults.elements.line`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `tension` | `number` | `0` | Bézier curve tension (`0` for no Bézier curves).
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Line fill color.
| `borderWidth` | `number` | `3` | Line stroke width.
| `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Line stroke color.
| `borderCapStyle` | `string` | `'butt'` | Line cap style. See [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap).
| `borderDash` | `number[]` | `[]` | Line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | `0.0` | Line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'miter'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `capBezierPoints` | `boolean` | `true` | `true` to keep Bézier control inside the chart, `false` for no restriction.
| `cubicInterpolationMode` | `string` | `'default'` | Interpolation mode to apply. [See more...](/charts/line.md#cubicinterpolationmode)
| `fill` | `boolean`\|`string` | `false` | How to fill the area under the line. See [area charts](/charts/area.md#filling-modes).
| `stepped` | `boolean` | `false` | `true` to show the line as a stepped line (`tension` will be ignored).
## Bar Configuration
Bar elements are used to represent the bars in a bar chart.
Namespace: `options.elements.bar`, global bar options: `Chart.defaults.elements.bar`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Bar fill color.
| `borderWidth` | `number` | `0` | Bar stroke width.
| `borderColor` | [`Color`](/general/colors.md) | `Chart.defaults.borderColor` | Bar stroke color.
| `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'middle'`, `'bottom'`, `'left'`, `'top'`, `'right'` or `false`.
| `borderRadius` | `number`\|`object` | `0` | The bar border radius (in pixels).
| `inflateAmount` | `number`\|`'auto'` | `'auto'` | The amount of pixels to inflate the bar rectangle(s) when drawing.
| [`pointStyle`](#point-styles) | `string`\|`Image`\|`HTMLCanvasElement` | `'circle'` | Style of the point for legend.
## Arc Configuration
Arcs are used in the polar area, doughnut and pie charts.
Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.arc`.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover.
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
| `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
| `borderDash` | `number[]` | `[]` | Arc line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | `0.0` | Arc line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'bevel'`\|`'round'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). The default is `'round'` when `borderAlign` is `'inner'`
| `borderWidth`| `number` | `2` | Arc stroke width.
| `circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat
================================================
FILE: docs/configuration/index.md
================================================
# Configuration
The configuration is used to change how the chart behaves. There are properties to control styling, fonts, the legend, etc.
## Configuration object structure
The top level structure of Chart.js configuration:
```javascript
const config = {
type: 'line',
data: {},
options: {},
plugins: []
}
```
### type
Chart type determines the main type of the chart.
**note** A dataset can override the `type`, this is how mixed charts are constructed.
### data
See [Data Structures](../general/data-structures.md) for details.
### options
Majority of the documentation talks about these options.
### plugins
Inline plugins can be included in this array. It is an alternative way of adding plugins for single chart (vs registering the plugin globally).
More about plugins in the [developers section](../developers/plugins.md).
## Global Configuration
This concept was introduced in Chart.js 1.0 to keep configuration [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type.
Chart.js merges the `options` object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately. This way you can be as specific as you would like in your individual chart configuration, while still changing the defaults for all chart types where applicable. The global general options are defined in `Chart.defaults`. The defaults for each chart type are discussed in the documentation for that chart type.
The following example would set the interaction mode to 'nearest' for all charts where this was not overridden by the chart type defaults or the options passed to the constructor on creation.
```javascript
Chart.defaults.interaction.mode = 'nearest';
// Interaction mode is set to nearest because it was not overridden here
const chartInteractionModeNearest = new Chart(ctx, {
type: 'line',
data: data
});
// This chart would have the interaction mode that was passed in
const chartDifferentInteractionMode = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
// Overrides the global setting
mode: 'index'
}
}
});
```
## Dataset Configuration
Options may be configured directly on the dataset. The dataset options can be changed at multiple different levels. See [options](../general/options.md#dataset-level-options) for details on how the options are resolved.
The following example would set the `showLine` option to 'false' for all line datasets except for those overridden by options passed to the dataset on creation.
```javascript
// Do not show lines for all datasets by default
Chart.defaults.datasets.line.showLine = false;
// This chart would show a line only for the third dataset
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [0, 0],
}, {
data: [0, 1]
}, {
data: [1, 0],
showLine: true // overrides the `line` dataset default
}, {
type: 'scatter', // 'line' dataset default does not affect this dataset since it's a 'scatter'
data: [1, 1]
}]
}
});
```
================================================
FILE: docs/configuration/interactions.md
================================================
# Interactions
Namespace: `options.interaction`, the global interaction configuration is at `Chart.defaults.interaction`. To configure which events trigger chart interactions, see [events](#events).
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `mode` | `string` | `'nearest'` | Sets which elements appear in the interaction. See [Interaction Modes](#modes) for details.
| `intersect` | `boolean` | `true` | if true, the interaction mode only applies when the mouse position intersects an item on the chart.
| `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, `'xy'` or `'r'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
| `includeInvisible` | `boolean` | `false` | if true, the invisible points that are outside of the chart area will also be included when evaluating interactions.
By default, these options apply to both the hover and tooltip interactions. The same options can be set in the `options.hover` namespace, in which case they will only affect the hover interaction. Similarly, the options can be set in the `options.plugins.tooltip` namespace to independently configure the tooltip interactions.
## Events
The following properties define how the chart interacts with events.
Namespace: `options`
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `events` | `string[]` | `['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']` | The `events` option defines the browser events that the chart should listen to for. Each of these events trigger hover and are passed to plugins. [more...](#event-option)
| `onHover` | `function` | `null` | Called when any of the events fire over chartArea. Passed the event, an array of active elements (bars, points, etc), and the chart.
| `onClick` | `function` | `null` | Called if the event is of type `'mouseup'`, `'click'` or '`'contextmenu'` over chartArea. Passed the event, an array of active elements, and the chart.
### Event Option
For example, to have the chart only respond to click events, you could do:
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
// This chart will not respond to mousemove, etc
events: ['click']
}
});
```
Events for each plugin can be further limited by defining (allowed) events array in plugin options:
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
// All of these (default) events trigger a hover and are passed to all plugins,
// unless limited at plugin options
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
plugins: {
tooltip: {
// Tooltip will only receive click events
events: ['click']
}
}
}
});
```
Events that do not fire over chartArea, like `mouseout`, can be captured using a simple plugin:
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
// these are the default events:
// events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
},
plugins: [{
id: 'myEventCatcher',
beforeEvent(chart, args, pluginOptions) {
const event = args.event;
if (event.type === 'mouseout') {
// process the event
}
}
}]
});
```
For more information about plugins, see [Plugins](../developers/plugins.md)
### Converting Events to Data Values
A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
onClick: (e) => {
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
// Substitute the appropriate scale IDs
const dataX = chart.scales.x.getValueForPixel(canvasPosition.x);
const dataY = chart.scales.y.getValueForPixel(canvasPosition.y);
}
}
});
```
When using a bundler, the helper functions have to be imported separately, for a full explanation of this please head over to the [integration](../getting-started/integration.md#helper-functions) page
## Modes
When configuring the interaction with the graph via `interaction`, `hover` or `tooltips`, a number of different modes are available.
`options.hover` and `options.plugins.tooltip` extend from `options.interaction`. So if `mode`, `intersect` or any other common settings are configured only in `options.interaction`, both hover and tooltips obey that.
The modes are detailed below and how they behave in conjunction with the `intersect` setting.
See how different modes work with the tooltip in [tooltip interactions sample](../samples/tooltip/interactions.md )
### point
Finds all of the items that intersect the point.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
mode: 'point'
}
}
});
```
### nearest
Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which coordinates are considered in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
mode: 'nearest'
}
}
});
```
### index
Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
mode: 'index'
}
}
});
```
To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the `axis` setting introduced in v2.7.0. By setting this value to `'y'` on the y direction is used.
```javascript
const chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
interaction: {
mode: 'index',
axis: 'y'
}
}
});
```
### dataset
Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
interaction: {
mode: 'dataset'
}
}
});
```
### x
Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
```javascript
const chart = new Chart(ctx, {
type: 'line',
data: data,
gitextract_dt3kbibo/ ├── .browserslistrc ├── .codeclimate.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.yml ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug.yml │ │ ├── config.yml │ │ ├── docs.yml │ │ └── feature.yml │ ├── ISSUE_TEMPLATE.md │ ├── PULL_REQUEST_TEMPLATE.md │ ├── dependabot.yml │ ├── release-drafter.yml │ └── workflows/ │ ├── ci.yml │ ├── compressed-size.yml │ ├── deploy-docs.yml │ ├── release-drafter.yml │ └── release.yml ├── .gitignore ├── .htmllintrc ├── LICENSE.md ├── MAINTAINING.md ├── README.md ├── auto/ │ ├── auto.cjs │ ├── auto.d.ts │ ├── auto.js │ └── package.json ├── composer.json ├── docs/ │ ├── .vuepress/ │ │ ├── config.ts │ │ ├── redirects │ │ └── styles/ │ │ └── index.styl │ ├── axes/ │ │ ├── _common.md │ │ ├── _common_ticks.md │ │ ├── cartesian/ │ │ │ ├── _common.md │ │ │ ├── _common_ticks.md │ │ │ ├── category.md │ │ │ ├── index.md │ │ │ ├── linear.md │ │ │ ├── logarithmic.md │ │ │ ├── time.md │ │ │ └── timeseries.md │ │ ├── index.md │ │ ├── labelling.md │ │ ├── radial/ │ │ │ ├── index.md │ │ │ └── linear.md │ │ └── styling.md │ ├── charts/ │ │ ├── area.md │ │ ├── bar.md │ │ ├── bubble.md │ │ ├── doughnut.md │ │ ├── line.md │ │ ├── mixed.md │ │ ├── polar.md │ │ ├── radar.md │ │ └── scatter.md │ ├── configuration/ │ │ ├── animations.md │ │ ├── canvas-background.md │ │ ├── decimation.md │ │ ├── device-pixel-ratio.md │ │ ├── elements.md │ │ ├── index.md │ │ ├── interactions.md │ │ ├── layout.md │ │ ├── legend.md │ │ ├── locale.md │ │ ├── responsive.md │ │ ├── subtitle.md │ │ ├── title.md │ │ └── tooltip.md │ ├── developers/ │ │ ├── api.md │ │ ├── axes.md │ │ ├── charts.md │ │ ├── contributing.md │ │ ├── index.md │ │ ├── plugin_flowcharts.drawio │ │ ├── plugins.md │ │ ├── publishing.md │ │ └── updates.md │ ├── general/ │ │ ├── accessibility.md │ │ ├── colors.md │ │ ├── data-structures.md │ │ ├── fonts.md │ │ ├── options.md │ │ ├── padding.md │ │ └── performance.md │ ├── getting-started/ │ │ ├── index.md │ │ ├── installation.md │ │ ├── integration.md │ │ ├── usage.md │ │ └── using-from-node-js.md │ ├── index.md │ ├── migration/ │ │ ├── v3-migration.md │ │ └── v4-migration.md │ ├── package.json │ ├── samples/ │ │ ├── .eslintrc.yml │ │ ├── advanced/ │ │ │ ├── data-decimation.md │ │ │ ├── derived-axis-type.md │ │ │ ├── derived-chart-type.md │ │ │ ├── linear-gradient.md │ │ │ ├── programmatic-events.md │ │ │ ├── progress-bar.md │ │ │ └── radial-gradient.md │ │ ├── animations/ │ │ │ ├── delay.md │ │ │ ├── drop.md │ │ │ ├── loop.md │ │ │ ├── progressive-line-easing.md │ │ │ └── progressive-line.md │ │ ├── area/ │ │ │ ├── line-boundaries.md │ │ │ ├── line-datasets.md │ │ │ ├── line-drawtime.md │ │ │ ├── line-stacked.md │ │ │ └── radar.md │ │ ├── bar/ │ │ │ ├── border-radius.md │ │ │ ├── floating.md │ │ │ ├── horizontal.md │ │ │ ├── stacked-groups.md │ │ │ ├── stacked.md │ │ │ └── vertical.md │ │ ├── information.md │ │ ├── legend/ │ │ │ ├── events.md │ │ │ ├── html.md │ │ │ ├── point-style.md │ │ │ ├── position.md │ │ │ └── title.md │ │ ├── line/ │ │ │ ├── interpolation.md │ │ │ ├── line.md │ │ │ ├── multi-axis.md │ │ │ ├── point-styling.md │ │ │ ├── segments.md │ │ │ ├── stepped.md │ │ │ └── styling.md │ │ ├── other-charts/ │ │ │ ├── bubble.md │ │ │ ├── combo-bar-line.md │ │ │ ├── doughnut.md │ │ │ ├── multi-series-pie.md │ │ │ ├── pie.md │ │ │ ├── polar-area-center-labels.md │ │ │ ├── polar-area.md │ │ │ ├── radar-skip-points.md │ │ │ ├── radar.md │ │ │ ├── scatter-multi-axis.md │ │ │ ├── scatter.md │ │ │ └── stacked-bar-line.md │ │ ├── plugins/ │ │ │ ├── chart-area-border.md │ │ │ ├── doughnut-empty-state.md │ │ │ └── quadrants.md │ │ ├── scale-options/ │ │ │ ├── center.md │ │ │ ├── grid.md │ │ │ ├── ticks.md │ │ │ └── titles.md │ │ ├── scales/ │ │ │ ├── linear-min-max-suggested.md │ │ │ ├── linear-min-max.md │ │ │ ├── linear-step-size.md │ │ │ ├── log.md │ │ │ ├── stacked.md │ │ │ ├── time-combo.md │ │ │ ├── time-line.md │ │ │ └── time-max-span.md │ │ ├── scriptable/ │ │ │ ├── bar.md │ │ │ ├── bubble.md │ │ │ ├── line.md │ │ │ ├── pie.md │ │ │ ├── polar.md │ │ │ └── radar.md │ │ ├── subtitle/ │ │ │ └── basic.md │ │ ├── title/ │ │ │ └── alignment.md │ │ ├── tooltip/ │ │ │ ├── content.md │ │ │ ├── html.md │ │ │ ├── interactions.md │ │ │ ├── point-style.md │ │ │ └── position.md │ │ └── utils.md │ └── scripts/ │ ├── analyzer.js │ ├── components.js │ ├── derived-bubble.js │ ├── helpers.js │ ├── log2.js │ ├── register.js │ └── utils.js ├── helpers/ │ ├── helpers.cjs │ ├── helpers.d.ts │ ├── helpers.js │ └── package.json ├── karma.conf.cjs ├── package.json ├── pnpm-workspace.yaml ├── rollup.config.js ├── scripts/ │ ├── deploy-docs.sh │ ├── docs-config.sh │ ├── publish.sh │ ├── sample-redirect-template.html │ └── utils.sh ├── src/ │ ├── controllers/ │ │ ├── controller.bar.js │ │ ├── controller.bubble.js │ │ ├── controller.doughnut.js │ │ ├── controller.line.js │ │ ├── controller.pie.js │ │ ├── controller.polarArea.js │ │ ├── controller.radar.js │ │ ├── controller.scatter.js │ │ └── index.js │ ├── core/ │ │ ├── core.adapters.ts │ │ ├── core.animation.js │ │ ├── core.animations.defaults.js │ │ ├── core.animations.js │ │ ├── core.animator.js │ │ ├── core.config.js │ │ ├── core.controller.js │ │ ├── core.datasetController.js │ │ ├── core.defaults.js │ │ ├── core.element.ts │ │ ├── core.interaction.js │ │ ├── core.layouts.defaults.js │ │ ├── core.layouts.js │ │ ├── core.plugins.js │ │ ├── core.registry.js │ │ ├── core.scale.autoskip.js │ │ ├── core.scale.defaults.js │ │ ├── core.scale.js │ │ ├── core.ticks.js │ │ ├── core.typedRegistry.js │ │ └── index.ts │ ├── elements/ │ │ ├── element.arc.ts │ │ ├── element.bar.js │ │ ├── element.line.js │ │ ├── element.point.ts │ │ └── index.js │ ├── helpers/ │ │ ├── helpers.canvas.ts │ │ ├── helpers.collection.ts │ │ ├── helpers.color.ts │ │ ├── helpers.config.ts │ │ ├── helpers.config.types.ts │ │ ├── helpers.core.ts │ │ ├── helpers.curve.ts │ │ ├── helpers.dataset.ts │ │ ├── helpers.dom.ts │ │ ├── helpers.easing.ts │ │ ├── helpers.extras.ts │ │ ├── helpers.interpolation.ts │ │ ├── helpers.intl.ts │ │ ├── helpers.math.ts │ │ ├── helpers.options.ts │ │ ├── helpers.rtl.ts │ │ ├── helpers.segment.js │ │ └── index.ts │ ├── index.ts │ ├── index.umd.ts │ ├── platform/ │ │ ├── index.js │ │ ├── platform.base.js │ │ ├── platform.basic.js │ │ └── platform.dom.js │ ├── plugins/ │ │ ├── index.js │ │ ├── plugin.colors.ts │ │ ├── plugin.decimation.js │ │ ├── plugin.filler/ │ │ │ ├── filler.drawing.js │ │ │ ├── filler.helper.js │ │ │ ├── filler.options.js │ │ │ ├── filler.segment.js │ │ │ ├── filler.target.js │ │ │ ├── filler.target.stack.js │ │ │ ├── index.js │ │ │ └── simpleArc.js │ │ ├── plugin.legend.js │ │ ├── plugin.subtitle.js │ │ ├── plugin.title.js │ │ └── plugin.tooltip.js │ ├── scales/ │ │ ├── index.js │ │ ├── scale.category.js │ │ ├── scale.linear.js │ │ ├── scale.linearbase.js │ │ ├── scale.logarithmic.js │ │ ├── scale.radialLinear.js │ │ ├── scale.time.js │ │ └── scale.timeseries.js │ ├── types/ │ │ ├── animation.d.ts │ │ ├── basic.d.ts │ │ ├── color.d.ts │ │ ├── geometric.d.ts │ │ ├── index.d.ts │ │ ├── layout.d.ts │ │ └── utils.d.ts │ └── types.ts ├── test/ │ ├── .eslintrc.yml │ ├── BasicChartWebWorker.js │ ├── fixtures/ │ │ ├── controller.bar/ │ │ │ ├── aligned-pixels.js │ │ │ ├── backgroundColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── loopable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── bar-animation-hide-show.js │ │ │ ├── bar-base-value.js │ │ │ ├── bar-default-begin-at-zero.js │ │ │ ├── bar-thickness-absolute.json │ │ │ ├── bar-thickness-flex-offset.json │ │ │ ├── bar-thickness-flex-single-reverse.json │ │ │ ├── bar-thickness-flex-single.json │ │ │ ├── bar-thickness-flex.json │ │ │ ├── bar-thickness-max.json │ │ │ ├── bar-thickness-min-interval-multi.json │ │ │ ├── bar-thickness-min-interval.json │ │ │ ├── bar-thickness-multiple.json │ │ │ ├── bar-thickness-no-overlap.json │ │ │ ├── bar-thickness-offset.json │ │ │ ├── bar-thickness-per-dataset-stacked.json │ │ │ ├── bar-thickness-per-dataset.json │ │ │ ├── bar-thickness-reverse.json │ │ │ ├── bar-thickness-single-xy.json │ │ │ ├── bar-thickness-single.json │ │ │ ├── bar-thickness-stacked.json │ │ │ ├── baseLine/ │ │ │ │ ├── bottom.js │ │ │ │ ├── left.js │ │ │ │ ├── mid-x.js │ │ │ │ ├── mid-y.js │ │ │ │ ├── right.js │ │ │ │ ├── top.js │ │ │ │ ├── value-x.js │ │ │ │ └── value-y.js │ │ │ ├── borderColor/ │ │ │ │ ├── border+dpr.js │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderRadius/ │ │ │ │ ├── border-radius-stacked-number-mixed-chart.js │ │ │ │ ├── border-radius-stacked-number-with-order.js │ │ │ │ ├── border-radius-stacked-number.js │ │ │ │ ├── border-radius.js │ │ │ │ └── no-spacing.js │ │ │ ├── borderSkipped/ │ │ │ │ ├── indexable.js │ │ │ │ ├── middle.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderWidth/ │ │ │ │ ├── indexable-object.js │ │ │ │ ├── indexable.js │ │ │ │ ├── negative.js │ │ │ │ ├── object.js │ │ │ │ ├── scriptable-object.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── chart-area-clip.js │ │ │ ├── data/ │ │ │ │ ├── object-index-axis-y.js │ │ │ │ ├── object.js │ │ │ │ └── parsing.js │ │ │ ├── floatBar/ │ │ │ │ ├── data-as-objects-horizontal.js │ │ │ │ ├── data-as-objects.js │ │ │ │ ├── float-bar-horizontal.json │ │ │ │ ├── float-bar-stacked-horizontal.json │ │ │ │ ├── float-bar-stacked.json │ │ │ │ └── float-bar.json │ │ │ ├── horizontal-borders.js │ │ │ ├── minBarLength/ │ │ │ │ ├── horizontal-neg.js │ │ │ │ ├── horizontal-pos.js │ │ │ │ ├── horizontal-stacked-no-overlap.js │ │ │ │ ├── horizontal-stacked.js │ │ │ │ ├── horizontal.js │ │ │ │ ├── vertical-neg.js │ │ │ │ ├── vertical-pos.js │ │ │ │ ├── vertical-stacked-no-overlap.js │ │ │ │ ├── vertical-stacked.js │ │ │ │ └── vertical.js │ │ │ ├── not-grouped/ │ │ │ │ ├── mixed.js │ │ │ │ └── on-time.js │ │ │ ├── skipNull/ │ │ │ │ ├── bar-skip-null-object-data.js │ │ │ │ ├── bar-skip-null.js │ │ │ │ └── combinations.js │ │ │ └── stacking/ │ │ │ ├── issue-9105.js │ │ │ ├── logarithmic-strings.js │ │ │ ├── logarithmic.js │ │ │ ├── order-default.json │ │ │ ├── order-specified.json │ │ │ ├── remove-dataset.js │ │ │ ├── replace-data.js │ │ │ └── stacked-and-multiple-axis.js │ │ ├── controller.bubble/ │ │ │ ├── autoPadding-disabled.js │ │ │ ├── clip.js │ │ │ ├── hover-radius-zero.js │ │ │ ├── padding-update.js │ │ │ ├── padding.js │ │ │ ├── point-style.json │ │ │ ├── radius-data.js │ │ │ └── radius-scriptable.js │ │ ├── controller.doughnut/ │ │ │ ├── backgroundColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderAlign/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderDash/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderJoinStyle/ │ │ │ │ ├── bevel-default.js │ │ │ │ ├── miter.js │ │ │ │ └── round.js │ │ │ ├── borderRadius/ │ │ │ │ ├── scriptable.js │ │ │ │ ├── value-corners.js │ │ │ │ ├── value-large-radius.js │ │ │ │ └── value-small-number.js │ │ │ ├── borderWidth/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── doughnut-NaN.js │ │ │ ├── doughnut-animation-hide-last.js │ │ │ ├── doughnut-animation.js │ │ │ ├── doughnut-border-align-center.json │ │ │ ├── doughnut-border-align-inner.json │ │ │ ├── doughnut-circumference-over-2pi.json │ │ │ ├── doughnut-circumference-per-dataset.js │ │ │ ├── doughnut-circumference.json │ │ │ ├── doughnut-full-to-semi.js │ │ │ ├── doughnut-hidden-single.js │ │ │ ├── doughnut-hidden.js │ │ │ ├── doughnut-offset.js │ │ │ ├── doughnut-outer-radius-percent.js │ │ │ ├── doughnut-outer-radius-pixels.js │ │ │ ├── doughnut-parsing.js │ │ │ ├── doughnut-rotation-300.js │ │ │ ├── doughnut-rotation-circumference-8x8.js │ │ │ ├── doughnut-rotation-per-dataset.js │ │ │ ├── doughnut-set-active-elements.js │ │ │ ├── doughnut-spacing-and-offset.js │ │ │ ├── doughnut-spacing.js │ │ │ ├── doughnut-weight.json │ │ │ ├── event-replay.js │ │ │ ├── pie-border-align-center.json │ │ │ ├── pie-border-align-inner.json │ │ │ ├── pie-circumference.json │ │ │ ├── pie-offset.js │ │ │ ├── pie-weight.json │ │ │ ├── selfJoin/ │ │ │ │ ├── doughnut.js │ │ │ │ └── pie.js │ │ │ ├── single-slice-circumference-405.js │ │ │ ├── single-slice-offset.js │ │ │ └── single-slice-opacity.js │ │ ├── controller.line/ │ │ │ ├── backgroundColor/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderCapStyle/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderColor/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderDash/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderDashOffset/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderJoinStyle/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderWidth/ │ │ │ │ ├── scriptable.js │ │ │ │ ├── value.js │ │ │ │ └── zero.js │ │ │ ├── clip/ │ │ │ │ ├── default-x-max.json │ │ │ │ ├── default-x-min.json │ │ │ │ ├── default-x.json │ │ │ │ ├── default-y-max.json │ │ │ │ ├── default-y-min.json │ │ │ │ ├── default-y.json │ │ │ │ ├── false.js │ │ │ │ └── specified.json │ │ │ ├── cubicInterpolationMode/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── fill/ │ │ │ │ ├── no-border.js │ │ │ │ ├── order-default.js │ │ │ │ ├── order.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── issue-8902.js │ │ │ ├── non-numeric-y.json │ │ │ ├── point-style-offscreen-canvas.json │ │ │ ├── point-style.json │ │ │ ├── pointBackgroundColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointBorderColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointBorderWidth/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointStyle/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── radius/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable-to-value.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── rotation/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── segments/ │ │ │ │ ├── gap.js │ │ │ │ ├── gradient.js │ │ │ │ ├── range.js │ │ │ │ ├── single.js │ │ │ │ ├── slope.js │ │ │ │ └── spanGaps.js │ │ │ ├── showLine/ │ │ │ │ ├── dataset.js │ │ │ │ └── false.js │ │ │ └── stacking/ │ │ │ ├── bounds-data.js │ │ │ ├── order-default.js │ │ │ ├── order-specified.js │ │ │ ├── single.js │ │ │ ├── stacked-scatter.js │ │ │ └── updates.js │ │ ├── controller.polarArea/ │ │ │ ├── angle-array.json │ │ │ ├── angle-lines.json │ │ │ ├── angle-undefined.json │ │ │ ├── backgroundColor/ │ │ │ │ ├── indexable-dataset.js │ │ │ │ ├── indexable-element-options.js │ │ │ │ ├── scriptable-dataset.js │ │ │ │ ├── scriptable-element-options.js │ │ │ │ ├── value-dataset.js │ │ │ │ └── value-element-options.js │ │ │ ├── border-align-center.json │ │ │ ├── border-align-inner.json │ │ │ ├── borderAlign/ │ │ │ │ ├── indexable-dataset.js │ │ │ │ ├── indexable-element-options.js │ │ │ │ ├── scriptable-dataset.js │ │ │ │ ├── scriptable-element-options.js │ │ │ │ ├── value-dataset.js │ │ │ │ └── value-element-options.js │ │ │ ├── borderColor/ │ │ │ │ ├── indexable-dataset.js │ │ │ │ ├── indexable-element-options.js │ │ │ │ ├── scriptable-dataset.js │ │ │ │ ├── scriptable-element-options.js │ │ │ │ ├── value-dataset.js │ │ │ │ └── value-element-options.js │ │ │ ├── borderDash/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderWidth/ │ │ │ │ ├── indexable-dataset.js │ │ │ │ ├── indexable-element-options.js │ │ │ │ ├── scriptable-dataset.js │ │ │ │ ├── scriptable-element-options.js │ │ │ │ ├── value-dataset.js │ │ │ │ └── value-element-options.js │ │ │ ├── last-slice-animate.js │ │ │ ├── parse-object-data.json │ │ │ ├── pointLabels/ │ │ │ │ ├── centered-180.js │ │ │ │ ├── centered-45.js │ │ │ │ ├── centered.js │ │ │ │ ├── default-180.js │ │ │ │ ├── default-45.js │ │ │ │ ├── default.js │ │ │ │ ├── displayAuto-180.js │ │ │ │ ├── displayAuto.js │ │ │ │ ├── overlapping.js │ │ │ │ └── withTitle/ │ │ │ │ ├── bottom-centered-45.js │ │ │ │ ├── bottom-centered.js │ │ │ │ ├── left-centered-45.js │ │ │ │ ├── left-centered.js │ │ │ │ ├── right-centered-45.js │ │ │ │ ├── right-centered.js │ │ │ │ ├── top-centered-45.js │ │ │ │ ├── top-centered.js │ │ │ │ ├── top-default-45.js │ │ │ │ └── top-default.js │ │ │ ├── polar-area-animation-rotate.js │ │ │ └── polar-area-animation-scale.js │ │ ├── controller.radar/ │ │ │ ├── backgroundColor/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderCapStyle/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderColor/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderDash/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderDashOffset/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderJoinStyle/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── borderWidth/ │ │ │ │ ├── scriptable.js │ │ │ │ ├── value.js │ │ │ │ └── zero.js │ │ │ ├── fill/ │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── point-style.json │ │ │ ├── pointBackgroundColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointBorderColor/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointBorderWidth/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── pointStyle/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── radius/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── rotation/ │ │ │ │ ├── indexable.js │ │ │ │ ├── scriptable.js │ │ │ │ └── value.js │ │ │ ├── showLine/ │ │ │ │ └── value.js │ │ │ └── startAngle/ │ │ │ ├── 135.js │ │ │ ├── 180.js │ │ │ ├── 225.js │ │ │ ├── 270.js │ │ │ ├── 315.js │ │ │ ├── 45.js │ │ │ ├── 90.js │ │ │ └── default.js │ │ ├── controller.scatter/ │ │ │ └── showLine/ │ │ │ ├── changed.js │ │ │ ├── true.js │ │ │ └── undefined.js │ │ ├── core.datasetController/ │ │ │ └── stacked-initial-render.js │ │ ├── core.interaction/ │ │ │ ├── drawActiveElementsOnTop-false.js │ │ │ ├── nearest-partial-bar.js │ │ │ └── nearest-point-behind-scale.js │ │ ├── core.layouts/ │ │ │ ├── hidden-vertical-boxes.js │ │ │ ├── long-labels.js │ │ │ ├── no-boxes-all-padding.js │ │ │ ├── refit-vertical-boxes.js │ │ │ ├── scriptable.js │ │ │ ├── stacked-boxes-max-index-without-clip.js │ │ │ ├── stacked-boxes-max-index.js │ │ │ ├── stacked-boxes-max-without-clip.js │ │ │ ├── stacked-boxes-max.js │ │ │ ├── stacked-boxes-with-weight.js │ │ │ └── stacked-boxes.js │ │ ├── core.scale/ │ │ │ ├── autoSkip/ │ │ │ │ ├── fit-after.js │ │ │ │ ├── no-offset.js │ │ │ │ └── offset.js │ │ │ ├── backgroundColor.js │ │ │ ├── border-behind-elements.js │ │ │ ├── cartesian-axis-border-settings.json │ │ │ ├── crossAlignment/ │ │ │ │ ├── cross-align-bottom-center.js │ │ │ │ ├── cross-align-bottom-far.js │ │ │ │ ├── cross-align-bottom-near.js │ │ │ │ ├── cross-align-left-center.js │ │ │ │ ├── cross-align-left-far-clipped.js │ │ │ │ ├── cross-align-left-far.js │ │ │ │ ├── cross-align-left-near.js │ │ │ │ ├── cross-align-right-center.js │ │ │ │ ├── cross-align-right-far-clipped.js │ │ │ │ ├── cross-align-right-far.js │ │ │ │ ├── cross-align-right-near.js │ │ │ │ ├── cross-align-top-center.js │ │ │ │ ├── cross-align-top-far.js │ │ │ │ ├── cross-align-top-near.js │ │ │ │ ├── mirror-cross-align-left-center.js │ │ │ │ ├── mirror-cross-align-left-far.js │ │ │ │ ├── mirror-cross-align-left-near.js │ │ │ │ ├── mirror-cross-align-right-center.js │ │ │ │ ├── mirror-cross-align-right-far.js │ │ │ │ └── mirror-cross-align-right-near.js │ │ │ ├── grid/ │ │ │ │ ├── border-over-grid.js │ │ │ │ ├── colors.js │ │ │ │ └── scriptable-borderDash.js │ │ │ ├── label-align-center.js │ │ │ ├── label-align-end.js │ │ │ ├── label-align-inner-onlyX.js │ │ │ ├── label-align-inner-reverse.js │ │ │ ├── label-align-inner-rotate.js │ │ │ ├── label-align-inner.js │ │ │ ├── label-align-start.js │ │ │ ├── label-offset-vertical-axes.json │ │ │ ├── tick-backdrop-alignment-inner.js │ │ │ ├── tick-backdrop-rotation.js │ │ │ ├── tick-backdrop.js │ │ │ ├── tick-drawing.json │ │ │ ├── tick-override-styles.json │ │ │ ├── ticks/ │ │ │ │ ├── rotated-long.js │ │ │ │ ├── rotated-multi-line.js │ │ │ │ └── skip-by-callback.js │ │ │ ├── ticks-mirror-x.js │ │ │ ├── ticks-mirror.js │ │ │ ├── title/ │ │ │ │ ├── align-end.js │ │ │ │ ├── align-start.js │ │ │ │ ├── default.js │ │ │ │ ├── horizontal-center.js │ │ │ │ ├── horizontal-value.js │ │ │ │ ├── multi-line/ │ │ │ │ │ ├── align-end.js │ │ │ │ │ ├── align-start.js │ │ │ │ │ └── default.js │ │ │ │ ├── vertical-center.js │ │ │ │ └── vertical-value.js │ │ │ ├── x-axis-position-center.json │ │ │ ├── x-axis-position-dynamic-margin.js │ │ │ ├── x-axis-position-dynamic.json │ │ │ ├── y-axis-position-center.json │ │ │ └── y-axis-position-dynamic.json │ │ ├── element.line/ │ │ │ ├── cubicInterpolationMode/ │ │ │ │ ├── monotone-horizontal.js │ │ │ │ └── monotone-vertical.js │ │ │ ├── default.js │ │ │ ├── skip/ │ │ │ │ ├── all.js │ │ │ │ ├── first-span.js │ │ │ │ ├── first.js │ │ │ │ ├── last-span.js │ │ │ │ ├── last.js │ │ │ │ ├── middle-span.js │ │ │ │ └── middle.js │ │ │ ├── stepped/ │ │ │ │ ├── after.js │ │ │ │ ├── before.js │ │ │ │ ├── default.js │ │ │ │ └── middle.js │ │ │ └── tension/ │ │ │ ├── default.js │ │ │ ├── one.js │ │ │ └── zero.js │ │ ├── element.point/ │ │ │ ├── point-style-circle.json │ │ │ ├── point-style-cross-rot.json │ │ │ ├── point-style-cross.json │ │ │ ├── point-style-dash.json │ │ │ ├── point-style-image.js │ │ │ ├── point-style-line.json │ │ │ ├── point-style-rect-rot.json │ │ │ ├── point-style-rect-rounded.json │ │ │ ├── point-style-rect.json │ │ │ ├── point-style-star.json │ │ │ ├── point-style-triangle.json │ │ │ └── rotation.js │ │ ├── mixed/ │ │ │ ├── bar+line-stacked.js │ │ │ └── bar+line.js │ │ ├── plugin.colors/ │ │ │ ├── bar.js │ │ │ ├── bubble.js │ │ │ ├── chart-options-colors.js │ │ │ ├── doughnut.js │ │ │ ├── dynamic-datasets-default.js │ │ │ ├── dynamic-datasets-force-override.js │ │ │ ├── line.js │ │ │ ├── mixed.js │ │ │ ├── pie.js │ │ │ ├── polarArea.js │ │ │ ├── radar.js │ │ │ └── scatter.js │ │ ├── plugin.filler/ │ │ │ ├── line/ │ │ │ │ ├── above-below-vertical-linechart.js │ │ │ │ ├── before-dataset-draw.js │ │ │ │ ├── before-datasets-draw.js │ │ │ │ ├── boundary/ │ │ │ │ │ ├── above-below-line-null-start.json │ │ │ │ │ ├── above-below-line-null.json │ │ │ │ │ ├── end-span.json │ │ │ │ │ ├── end.json │ │ │ │ │ ├── origin-span-dual.json │ │ │ │ │ ├── origin-span.json │ │ │ │ │ ├── origin-spline-above.json │ │ │ │ │ ├── origin-spline-span.json │ │ │ │ │ ├── origin-spline.json │ │ │ │ │ ├── origin-stepped-span.json │ │ │ │ │ ├── origin-stepped.json │ │ │ │ │ ├── origin.json │ │ │ │ │ ├── start-span.json │ │ │ │ │ └── start.json │ │ │ │ ├── dataset/ │ │ │ │ │ ├── border.json │ │ │ │ │ ├── clip-bounds-x-off.js │ │ │ │ │ ├── clip-bounds-x.js │ │ │ │ │ ├── clip-bounds-y-off.js │ │ │ │ │ ├── clip-bounds-y.js │ │ │ │ │ ├── dual.json │ │ │ │ │ ├── interpolated.js │ │ │ │ │ ├── no-border.json │ │ │ │ │ ├── span-dual.json │ │ │ │ │ ├── span.json │ │ │ │ │ ├── spline-span-above.json │ │ │ │ │ ├── spline-span-below.json │ │ │ │ │ ├── spline-span.json │ │ │ │ │ ├── spline.json │ │ │ │ │ └── stepped.json │ │ │ │ ├── drawTimeFillFalse/ │ │ │ │ │ ├── beforeDatasetDraw.js │ │ │ │ │ ├── beforeDatasetsDraw.js │ │ │ │ │ └── beforeDraw.js │ │ │ │ ├── points-outside-canvas-initial.js │ │ │ │ ├── points-outside-canvas-update.js │ │ │ │ ├── segments/ │ │ │ │ │ ├── alignToPixels.js │ │ │ │ │ ├── gap.js │ │ │ │ │ └── slope.js │ │ │ │ ├── shape.js │ │ │ │ ├── stack-multiple-scales.js │ │ │ │ ├── stack.json │ │ │ │ ├── value.json │ │ │ │ └── vertical.js │ │ │ └── radar/ │ │ │ ├── beforeDraw.js │ │ │ ├── boundary/ │ │ │ │ ├── end-circular.json │ │ │ │ ├── end-span.json │ │ │ │ ├── end.json │ │ │ │ ├── origin-circular.json │ │ │ │ ├── origin-span.json │ │ │ │ ├── origin-spline-span.json │ │ │ │ ├── origin-spline.json │ │ │ │ ├── origin.json │ │ │ │ ├── start-circular.json │ │ │ │ ├── start-span.json │ │ │ │ └── start.json │ │ │ ├── dataset/ │ │ │ │ ├── border.json │ │ │ │ ├── default.json │ │ │ │ ├── order.js │ │ │ │ ├── span.json │ │ │ │ └── spline.json │ │ │ └── value.json │ │ ├── plugin.legend/ │ │ │ ├── borderRadius/ │ │ │ │ └── legend-border-radius.js │ │ │ ├── horizontal-rtl-hitbox.js │ │ │ ├── label-textAlign/ │ │ │ │ ├── center.js │ │ │ │ ├── horizontal-left.js │ │ │ │ ├── horizontal-right.js │ │ │ │ ├── horizontal-rtl-left.js │ │ │ │ ├── horizontal-rtl-right.js │ │ │ │ ├── left.js │ │ │ │ ├── right.js │ │ │ │ ├── rtl-center.js │ │ │ │ ├── rtl-left.js │ │ │ │ └── rtl-right.js │ │ │ ├── legend-doughnut-bottom-center-mulitiline.json │ │ │ ├── legend-doughnut-bottom-center-single.json │ │ │ ├── legend-doughnut-bottom-end-mulitiline.json │ │ │ ├── legend-doughnut-bottom-start-mulitiline.json │ │ │ ├── legend-doughnut-left-center-mulitiline.json │ │ │ ├── legend-doughnut-left-center-single.json │ │ │ ├── legend-doughnut-left-default-center.json │ │ │ ├── legend-doughnut-left-end-mulitiline.json │ │ │ ├── legend-doughnut-left-start-mulitiline.json │ │ │ ├── legend-doughnut-point-style.json │ │ │ ├── legend-doughnut-right-center-mulitiline-labels.json │ │ │ ├── legend-doughnut-right-center-mulitiline.json │ │ │ ├── legend-doughnut-right-center-single.json │ │ │ ├── legend-doughnut-right-default-center.json │ │ │ ├── legend-doughnut-right-end-mulitiline.json │ │ │ ├── legend-doughnut-right-start-mulitiline.json │ │ │ ├── legend-doughnut-top-center-mulitiline.json │ │ │ ├── legend-doughnut-top-center-single.json │ │ │ ├── legend-doughnut-top-end-mulitiline.json │ │ │ ├── legend-doughnut-top-start-mulitiline.json │ │ │ ├── legend-line-chart-area.json │ │ │ ├── maxWidth/ │ │ │ │ ├── infinity.js │ │ │ │ ├── undefined.js │ │ │ │ └── value.js │ │ │ ├── padding/ │ │ │ │ ├── 2cols-with-padding.js │ │ │ │ └── add-column.js │ │ │ ├── pointStyle-width/ │ │ │ │ ├── legend-pointStyle-width-default.json │ │ │ │ └── legend-pointStyle-width.json │ │ │ └── title/ │ │ │ ├── bottom-center-center.js │ │ │ ├── bottom-end-end.js │ │ │ ├── bottom-start-start.js │ │ │ ├── left-center-center.js │ │ │ ├── left-end-end.js │ │ │ ├── left-start-start.js │ │ │ ├── right-center-center.js │ │ │ ├── right-end-end.js │ │ │ ├── right-start-start.js │ │ │ ├── top-center-center.js │ │ │ ├── top-end-end.js │ │ │ └── top-start-start.js │ │ ├── plugin.subtitle/ │ │ │ └── basic.js │ │ ├── plugin.title/ │ │ │ └── scriptable-options.js │ │ ├── plugin.tooltip/ │ │ │ ├── box-padding.js │ │ │ ├── caret-position.js │ │ │ ├── color-box-border-dash.js │ │ │ ├── color-box-border-radius.js │ │ │ ├── corner-radius.js │ │ │ ├── opacity.js │ │ │ ├── point-style.js │ │ │ └── positioning.js │ │ ├── scale.category/ │ │ │ ├── invalid-data.js │ │ │ ├── max-ticks-limit-a.js │ │ │ ├── max-ticks-limit-b.js │ │ │ ├── max-ticks-limit-norotation.js │ │ │ └── ticks-from-data.js │ │ ├── scale.linear/ │ │ │ ├── grace/ │ │ │ │ ├── grace-10%.js │ │ │ │ ├── grace-beginAtZero.js │ │ │ │ ├── grace-neg.js │ │ │ │ ├── grace-pos.js │ │ │ │ ├── grace.js │ │ │ │ └── issue-8912.js │ │ │ ├── issue-8806.js │ │ │ ├── min-max-skip/ │ │ │ │ ├── edge-case-1.js │ │ │ │ ├── edge-case-2.js │ │ │ │ ├── edge-case-3.js │ │ │ │ ├── edge-case-4.js │ │ │ │ ├── includeBounds.js │ │ │ │ ├── min-max-skip.js │ │ │ │ ├── no-collision.js │ │ │ │ ├── rotated-case-1.js │ │ │ │ ├── rotated-case-2.js │ │ │ │ ├── rotated-case-3.js │ │ │ │ └── rotated-case-4.js │ │ │ ├── rotated-45.js │ │ │ ├── rotated-5.js │ │ │ ├── rotated-85.js │ │ │ ├── tick-count-data-limits.js │ │ │ ├── tick-count-min-max-not-aligned.js │ │ │ ├── tick-count-min-max-not-int.js │ │ │ ├── tick-count-min-max.js │ │ │ ├── tick-step-min-max-step-fp.js │ │ │ ├── tick-step-min-max.js │ │ │ └── tiny-numbers.js │ │ ├── scale.logarithmic/ │ │ │ ├── large-range.js │ │ │ ├── large-values-small-range.js │ │ │ ├── med-range.js │ │ │ ├── min-max.js │ │ │ ├── null-values.js │ │ │ └── small-range.js │ │ ├── scale.radialLinear/ │ │ │ ├── anglelines-disable.json │ │ │ ├── anglelines-indexable.js │ │ │ ├── anglelines-reverse-scale.js │ │ │ ├── anglelines-scriptable.js │ │ │ ├── backgroundColor.js │ │ │ ├── border-dash.json │ │ │ ├── circular-backgroundColor.js │ │ │ ├── circular-border-dash.json │ │ │ ├── gridlines-disable.json │ │ │ ├── gridlines-no-z.json │ │ │ ├── gridlines-scriptable.js │ │ │ ├── gridlines-z.json │ │ │ ├── indexable-gridlines.json │ │ │ ├── pointLabels/ │ │ │ │ ├── background.js │ │ │ │ ├── border-radius.js │ │ │ │ ├── no-more-than-half-radius.js │ │ │ │ ├── padding.js │ │ │ │ └── scriptable-color-small.js │ │ │ └── ticks-below-zero.js │ │ ├── scale.time/ │ │ │ ├── autoskip-major.js │ │ │ ├── bar-large-gap-between-data.js │ │ │ ├── custom-parser.js │ │ │ ├── data-ty.js │ │ │ ├── data-xy.js │ │ │ ├── invalid-data.js │ │ │ ├── labels-date.js │ │ │ ├── labels-strings.js │ │ │ ├── labels.js │ │ │ ├── negative-times.js │ │ │ ├── offset-auto-skip-ticks.js │ │ │ ├── offset-with-1-tick.js │ │ │ ├── offset-with-2-ticks.js │ │ │ ├── offset-with-no-ticks.js │ │ │ ├── skip-null-gridlines.js │ │ │ ├── skip-undefined-gridlines.js │ │ │ ├── source-auto-linear.js │ │ │ ├── source-data-linear.js │ │ │ ├── source-labels-linear-offset-min-max.js │ │ │ ├── source-labels-linear.js │ │ │ ├── ticks-capacity.js │ │ │ ├── ticks-minunit.js │ │ │ ├── ticks-reverse-linear-min-max.js │ │ │ ├── ticks-reverse-linear.js │ │ │ ├── ticks-reverse-offset.js │ │ │ ├── ticks-reverse.js │ │ │ ├── ticks-round.js │ │ │ ├── ticks-stepsize.js │ │ │ └── ticks-unit.js │ │ └── scale.timeseries/ │ │ ├── data-timestamps.js │ │ ├── financial-daily.js │ │ ├── normalize.js │ │ ├── source-auto.js │ │ ├── source-data-offset-min-max.js │ │ ├── source-data.js │ │ ├── source-labels-offset-min-max.js │ │ ├── source-labels.js │ │ ├── ticks-reverse-max.js │ │ ├── ticks-reverse-min-max.js │ │ ├── ticks-reverse-min.js │ │ └── ticks-reverse.js │ ├── index.js │ ├── integration/ │ │ ├── node/ │ │ │ ├── package.json │ │ │ ├── test.cjs │ │ │ └── test.js │ │ ├── node-commonjs/ │ │ │ ├── package.json │ │ │ ├── test-auto.js │ │ │ └── test.js │ │ ├── react-browser/ │ │ │ ├── package.json │ │ │ ├── public/ │ │ │ │ └── index.html │ │ │ ├── src/ │ │ │ │ ├── App.tsx │ │ │ │ ├── AppAuto.tsx │ │ │ │ └── index.tsx │ │ │ └── tsconfig.json │ │ ├── typescript-node/ │ │ │ ├── package.json │ │ │ ├── src/ │ │ │ │ └── index.ts │ │ │ └── tsconfig.json │ │ └── typescript-node-next/ │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── seed-reporter.cjs │ ├── specs/ │ │ ├── controller.bar.tests.js │ │ ├── controller.bubble.tests.js │ │ ├── controller.doughnut.tests.js │ │ ├── controller.line.tests.js │ │ ├── controller.polarArea.tests.js │ │ ├── controller.radar.tests.js │ │ ├── controller.scatter.tests.js │ │ ├── core.animation.tests.js │ │ ├── core.animations.tests.js │ │ ├── core.animator.tests.js │ │ ├── core.controller.tests.js │ │ ├── core.datasetController.tests.js │ │ ├── core.defaults.tests.js │ │ ├── core.element.tests.js │ │ ├── core.helpers.tests.js │ │ ├── core.interaction.tests.js │ │ ├── core.layouts.tests.js │ │ ├── core.plugin.tests.js │ │ ├── core.registry.tests.js │ │ ├── core.scale.tests.js │ │ ├── core.ticks.tests.js │ │ ├── element.arc.tests.js │ │ ├── element.bar.tests.js │ │ ├── element.line.tests.js │ │ ├── element.point.tests.js │ │ ├── global.defaults.tests.js │ │ ├── global.namespace.tests.js │ │ ├── helpers.canvas.tests.js │ │ ├── helpers.collection.tests.js │ │ ├── helpers.color.tests.js │ │ ├── helpers.config.tests.js │ │ ├── helpers.core.tests.js │ │ ├── helpers.curve.tests.js │ │ ├── helpers.dom.tests.js │ │ ├── helpers.easing.tests.js │ │ ├── helpers.interpolation.tests.js │ │ ├── helpers.math.tests.js │ │ ├── helpers.options.tests.js │ │ ├── helpers.segment.tests.js │ │ ├── mixed.tests.js │ │ ├── platform.basic.tests.js │ │ ├── platform.dom.tests.js │ │ ├── plugin.colors.tests.js │ │ ├── plugin.decimation.tests.js │ │ ├── plugin.filler.tests.js │ │ ├── plugin.legend.tests.js │ │ ├── plugin.subtitle.tests.js │ │ ├── plugin.title.tests.js │ │ ├── plugin.tooltip.tests.js │ │ ├── scale.category.tests.js │ │ ├── scale.linear.tests.js │ │ ├── scale.logarithmic.tests.js │ │ ├── scale.radialLinear.tests.js │ │ └── scale.time.tests.js │ └── types/ │ ├── .eslintrc.yml │ ├── animation.ts │ ├── autogen.js │ ├── chart_types.ts │ ├── controllers/ │ │ ├── bar_floating_data.ts │ │ ├── bubble_chart_options.ts │ │ ├── doughnut_meta_total.ts │ │ ├── doughnut_offset.ts │ │ ├── doughnut_outer_radius.ts │ │ ├── doughnut_spacing_offset.ts │ │ ├── line_scriptable_parsed_data.ts │ │ ├── line_segments.ts │ │ ├── line_span_gaps.ts │ │ ├── line_styling_array.ts │ │ └── radar_dataset_indexable_options.ts │ ├── data_types.ts │ ├── dataset_null_data.ts │ ├── date_adapter.ts │ ├── defaults.ts │ ├── elements/ │ │ └── scriptable_element_options.ts │ ├── extensions/ │ │ ├── plugin.ts │ │ └── scale.ts │ ├── helpers/ │ │ ├── dom.ts │ │ └── options.ts │ ├── interaction.ts │ ├── layout/ │ │ └── position.ts │ ├── options.ts │ ├── overrides.ts │ ├── parsed.data.type.ts │ ├── plugins/ │ │ ├── defaults.ts │ │ ├── plugin.colors/ │ │ │ └── colors.ts │ │ ├── plugin.decimation/ │ │ │ └── decimation_algorithm.ts │ │ ├── plugin.filler/ │ │ │ └── fill_target_true.ts │ │ └── plugin.tooltip/ │ │ ├── chart.tooltip.ts │ │ ├── tooltip_dataset_type.ts │ │ ├── tooltip_parsed_data.ts │ │ ├── tooltip_parsed_data_chart_defaults.ts │ │ └── tooltip_scriptable_background_color.ts │ ├── register.ts │ ├── scales/ │ │ ├── chart_options.ts │ │ ├── options.ts │ │ └── time_string_max.ts │ ├── scriptable.ts │ ├── scriptable_core_chart_options.ts │ ├── test_instance_assignment.ts │ ├── ticks/ │ │ └── ticks.ts │ └── tsconfig.json └── tsconfig.json
SYMBOL INDEX (1435 symbols across 147 files)
FILE: docs/.vuepress/config.ts
method chainWebpack (line 90) | chainWebpack(config) {
FILE: docs/scripts/derived-bubble.js
class Custom (line 3) | class Custom extends BubbleController {
method draw (line 4) | draw() {
FILE: docs/scripts/log2.js
class Log2Axis (line 3) | class Log2Axis extends Scale {
method constructor (line 4) | constructor(cfg) {
method parse (line 10) | parse(raw, index) {
method determineDataLimits (line 15) | determineDataLimits() {
method buildTicks (line 21) | buildTicks() {
method configure (line 39) | configure() {
method getPixelForValue (line 48) | getPixelForValue(value) {
method getValueForPixel (line 57) | getValueForPixel(pixel) {
FILE: docs/scripts/utils.js
function srand (line 9) | function srand(seed) {
function rand (line 13) | function rand(min, max) {
function numbers (line 20) | function numbers(config) {
function points (line 44) | function points(config) {
function bubbles (line 50) | function bubbles(config) {
function labels (line 57) | function labels(config) {
constant MONTHS (line 76) | const MONTHS = [
function months (line 91) | function months(config) {
constant COLORS (line 106) | const COLORS = [
function color (line 118) | function color(index) {
function transparentize (line 122) | function transparentize(value, opacity) {
constant CHART_COLORS (line 127) | const CHART_COLORS = {
constant NAMED_COLORS (line 137) | const NAMED_COLORS = [
function namedColor (line 147) | function namedColor(index) {
function newDate (line 151) | function newDate(days) {
function newDateString (line 155) | function newDateString(days) {
function parseISODate (line 159) | function parseISODate(str) {
FILE: src/controllers/controller.bar.js
function getAllScaleValues (line 7) | function getAllScaleValues(scale, type) {
function computeMinSampleSize (line 24) | function computeMinSampleSize(meta) {
function computeFitCategoryTraits (line 61) | function computeFitCategoryTraits(index, ruler, options, stackCount) {
function computeFlexCategoryTraits (line 89) | function computeFlexCategoryTraits(index, ruler, options, stackCount) {
function parseFloatBar (line 117) | function parseFloatBar(entry, item, vScale, i) {
function parseValue (line 144) | function parseValue(entry, item, vScale, i) {
function parseArrayOrPrimitive (line 153) | function parseArrayOrPrimitive(meta, data, start, count) {
function isFloatBar (line 170) | function isFloatBar(custom) {
function barSign (line 174) | function barSign(size, vScale, actualBase) {
function borderProps (line 181) | function borderProps(properties) {
function setBorderSkipped (line 202) | function setBorderSkipped(properties, options, stack, index) {
function parseEdge (line 234) | function parseEdge(edge, a, b, reverse) {
function swap (line 244) | function swap(orig, v1, v2) {
function startEnd (line 248) | function startEnd(v, start, end) {
function setInflateAmount (line 252) | function setInflateAmount(properties, {inflateAmount}, ratio) {
class BarController (line 258) | class BarController extends DatasetController {
method parsePrimitiveData (line 306) | parsePrimitiveData(meta, data, start, count) {
method parseArrayData (line 315) | parseArrayData(meta, data, start, count) {
method parseObjectData (line 324) | parseObjectData(meta, data, start, count) {
method updateRangeFromParsed (line 343) | updateRangeFromParsed(range, scale, parsed, stack) {
method getMaxOverflow (line 357) | getMaxOverflow() {
method getLabelAndValue (line 364) | getLabelAndValue(index) {
method initialize (line 379) | initialize() {
method update (line 388) | update(mode) {
method updateElements (line 393) | updateElements(bars, start, count, mode) {
method _getStacks (line 434) | _getStacks(last, dataIndex) {
method _getStackCount (line 485) | _getStackCount(index) {
method _getAxisCount (line 489) | _getAxisCount() {
method getFirstScaleIdForIndexAxis (line 493) | getFirstScaleIdForIndexAxis() {
method _getAxis (line 499) | _getAxis() {
method _getStackIndex (line 518) | _getStackIndex(datasetIndex, name, dataIndex) {
method _getRuler (line 532) | _getRuler() {
method _calculateBarValuePixels (line 563) | _calculateBarValuePixels(index) {
method _calculateBarIndexPixels (line 636) | _calculateBarIndexPixels(index, ruler) {
method draw (line 668) | draw() {
FILE: src/controllers/controller.bubble.js
class BubbleController (line 4) | class BubbleController extends DatasetController {
method initialize (line 37) | initialize() {
method parsePrimitiveData (line 46) | parsePrimitiveData(meta, data, start, count) {
method parseArrayData (line 58) | parseArrayData(meta, data, start, count) {
method parseObjectData (line 71) | parseObjectData(meta, data, start, count) {
method getMaxOverflow (line 83) | getMaxOverflow() {
method getLabelAndValue (line 96) | getLabelAndValue(index) {
method update (line 111) | update(mode) {
method updateElements (line 118) | updateElements(points, start, count, mode) {
method resolveDataElementOptions (line 151) | resolveDataElementOptions(index, mode) {
FILE: src/controllers/controller.doughnut.js
function getRatioAndOffset (line 10) | function getRatioAndOffset(rotation, circumference, cutout) {
class DoughnutController (line 37) | class DoughnutController extends DatasetController {
method generateLabels (line 92) | generateLabels(chart) {
method onClick (line 122) | onClick(e, legendItem, legend) {
method constructor (line 130) | constructor(chart, datasetIndex) {
method linkScales (line 140) | linkScales() {}
method parse (line 145) | parse(start, count) {
method _getRotation (line 169) | _getRotation() {
method _getCircumference (line 176) | _getCircumference() {
method _getRotationExtents (line 184) | _getRotationExtents() {
method update (line 208) | update(mode) {
method _circumference (line 243) | _circumference(i, reset) {
method updateElements (line 253) | updateElements(arcs, start, count, mode) {
method calculateTotal (line 293) | calculateTotal() {
method calculateCircumference (line 309) | calculateCircumference(value) {
method getLabelAndValue (line 317) | getLabelAndValue(index) {
method getMaxBorderWidth (line 329) | getMaxBorderWidth(arcs) {
method getMaxOffset (line 359) | getMaxOffset(arcs) {
method _getRingWeightOffset (line 373) | _getRingWeightOffset(datasetIndex) {
method _getRingWeight (line 388) | _getRingWeight(datasetIndex) {
method _getVisibleDatasetWeightTotal (line 396) | _getVisibleDatasetWeightTotal() {
FILE: src/controllers/controller.line.js
class LineController (line 6) | class LineController extends DatasetController {
method initialize (line 35) | initialize() {
method update (line 41) | update(mode) {
method updateElements (line 76) | updateElements(points, start, count, mode) {
method getMaxOverflow (line 125) | getMaxOverflow() {
method draw (line 138) | draw() {
FILE: src/controllers/controller.pie.js
class PieController (line 4) | class PieController extends DoughnutController {
FILE: src/controllers/controller.polarArea.js
class PolarAreaController (line 4) | class PolarAreaController extends DatasetController {
method generateLabels (line 36) | generateLabels(chart) {
method onClick (line 63) | onClick(e, legendItem, legend) {
method constructor (line 88) | constructor(chart, datasetIndex) {
method getLabelAndValue (line 95) | getLabelAndValue(index) {
method parseObjectData (line 107) | parseObjectData(meta, data, start, count) {
method update (line 111) | update(mode) {
method getMinMax (line 121) | getMinMax() {
method _updateRadius (line 145) | _updateRadius() {
method updateElements (line 159) | updateElements(arcs, start, count, mode) {
method countVisibleElements (line 206) | countVisibleElements() {
method _computeAngle (line 222) | _computeAngle(index, mode, defaultAngle) {
FILE: src/controllers/controller.radar.js
class RadarController (line 4) | class RadarController extends DatasetController {
method getLabelAndValue (line 39) | getLabelAndValue(index) {
method parseObjectData (line 49) | parseObjectData(meta, data, start, count) {
method update (line 53) | update(mode) {
method updateElements (line 81) | updateElements(points, start, count, mode) {
FILE: src/controllers/controller.scatter.js
class ScatterController (line 6) | class ScatterController extends DatasetController {
method getLabelAndValue (line 42) | getLabelAndValue(index) {
method update (line 56) | update(mode) {
method addElements (line 101) | addElements() {
method updateElements (line 111) | updateElements(points, start, count, mode) {
method getMaxOverflow (line 156) | getMaxOverflow() {
FILE: src/core/core.adapters.ts
type TimeUnit (line 10) | type TimeUnit = 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | '...
type DateAdapter (line 12) | interface DateAdapter<T extends AnyObject = AnyObject> {
function abstract (line 65) | function abstract<T = void>(): T {
class DateAdapterBase (line 75) | class DateAdapterBase implements DateAdapter {
method override (line 87) | static override<T extends AnyObject = AnyObject>(
method constructor (line 95) | constructor(options?: AnyObject) {
method init (line 100) | init() {}
method formats (line 102) | formats(): Record<TimeUnit | 'datetime', string> {
method parse (line 106) | parse(): number | null {
method format (line 110) | format(): string {
method add (line 114) | add(): number {
method diff (line 118) | diff(): number {
method startOf (line 122) | startOf(): number {
method endOf (line 126) | endOf(): number {
FILE: src/core/core.animation.js
method boolean (line 7) | boolean(from, to, factor) {
method color (line 15) | color(from, to, factor) {
method number (line 22) | number(from, to, factor) {
class Animation (line 27) | class Animation {
method constructor (line 28) | constructor(cfg, target, prop, to) {
method active (line 47) | active() {
method update (line 51) | update(cfg, to, date) {
method cancel (line 67) | cancel() {
method tick (line 76) | tick(date) {
method wait (line 105) | wait() {
method _notify (line 112) | _notify(resolved) {
FILE: src/core/core.animations.defaults.js
function applyAnimationsDefaults (line 4) | function applyAnimationsDefaults(defaults) {
FILE: src/core/core.animations.js
class Animations (line 6) | class Animations {
method constructor (line 7) | constructor(chart, config) {
method configure (line 13) | configure(config) {
method _animateOptions (line 43) | _animateOptions(target, values) {
method _createAnimations (line 68) | _createAnimations(target, values) {
method update (line 118) | update(target, values) {
function awaitAll (line 134) | function awaitAll(animations, properties) {
function resolveTargetOptions (line 147) | function resolveTargetOptions(target, newOptions) {
FILE: src/core/core.animator.js
class Animator (line 12) | class Animator {
method constructor (line 13) | constructor() {
method _notify (line 23) | _notify(chart, anims, date, type) {
method _refresh (line 38) | _refresh() {
method _update (line 57) | _update(date = Date.now()) {
method _getAnims (line 112) | _getAnims(chart) {
method listen (line 135) | listen(chart, event, cb) {
method add (line 144) | add(chart, items) {
method has (line 155) | has(chart) {
method start (line 163) | start(chart) {
method running (line 174) | running(chart) {
method stop (line 189) | stop(chart) {
method remove (line 208) | remove(chart) {
FILE: src/core/core.config.js
function getIndexAxis (line 5) | function getIndexAxis(type, options) {
function getAxisFromDefaultScaleID (line 11) | function getAxisFromDefaultScaleID(id, indexAxis) {
function getDefaultScaleIDFromAxis (line 21) | function getDefaultScaleIDFromAxis(axis, indexAxis) {
function idMatchesAxis (line 25) | function idMatchesAxis(id) {
function axisFromPosition (line 31) | function axisFromPosition(position) {
function determineAxis (line 40) | function determineAxis(id, ...scaleOptions) {
function getAxisFromDataset (line 55) | function getAxisFromDataset(id, axis, dataset) {
function retrieveAxisFromDatasets (line 61) | function retrieveAxisFromDatasets(id, config) {
function mergeScaleConfig (line 71) | function mergeScaleConfig(config, options) {
function initOptions (line 115) | function initOptions(config) {
function initData (line 122) | function initData(data) {
function initConfig (line 129) | function initConfig(config) {
function cachedKeys (line 141) | function cachedKeys(cacheKey, generate) {
class Config (line 158) | class Config {
method constructor (line 159) | constructor(config) {
method platform (line 165) | get platform() {
method type (line 169) | get type() {
method type (line 173) | set type(type) {
method data (line 177) | get data() {
method data (line 181) | set data(data) {
method options (line 185) | get options() {
method options (line 189) | set options(options) {
method plugins (line 193) | get plugins() {
method update (line 197) | update() {
method clearCache (line 203) | clearCache() {
method datasetScopeKeys (line 214) | datasetScopeKeys(datasetType) {
method datasetAnimationScopeKeys (line 229) | datasetAnimationScopeKeys(datasetType, transition) {
method datasetElementScopeKeys (line 252) | datasetElementScopeKeys(datasetType, elementType) {
method pluginScopeKeys (line 267) | pluginScopeKeys(plugin) {
method _cachedScopes (line 280) | _cachedScopes(mainScope, resetCache) {
method getOptionScopes (line 296) | getOptionScopes(mainScope, keyLists, resetCache) {
method chartOptionScopes (line 331) | chartOptionScopes() {
method resolveNamedOptions (line 351) | resolveNamedOptions(scopes, names, context, prefixes = ['']) {
method createResolver (line 375) | createResolver(scopes, context, prefixes = [''], descriptorDefaults) {
function getResolver (line 383) | function getResolver(resolverCache, scopes, prefixes) {
function needContext (line 405) | function needContext(proxy, names) {
FILE: src/core/core.controller.js
constant KNOWN_POSITIONS (line 20) | const KNOWN_POSITIONS = ['top', 'bottom', 'left', 'right', 'chartArea'];
function positionIsHorizontal (line 21) | function positionIsHorizontal(position, axis) {
function compare2Level (line 25) | function compare2Level(l1, l2) {
function onAnimationsComplete (line 33) | function onAnimationsComplete(context) {
function onAnimationProgress (line 41) | function onAnimationProgress(context) {
function getCanvas (line 51) | function getCanvas(item) {
function moveNumericKeys (line 72) | function moveNumericKeys(obj, start, move) {
function determineLastEvent (line 93) | function determineLastEvent(e, lastEvent, inChartArea, isClick) {
class Chart (line 103) | class Chart {
method register (line 112) | static register(...items) {
method unregister (line 117) | static unregister(...items) {
method constructor (line 123) | constructor(item, userConfig) {
method aspectRatio (line 197) | get aspectRatio() {
method data (line 213) | get data() {
method data (line 217) | set data(data) {
method options (line 221) | get options() {
method options (line 225) | set options(options) {
method registry (line 229) | get registry() {
method _initialize (line 236) | _initialize() {
method clear (line 254) | clear() {
method stop (line 259) | stop() {
method resize (line 269) | resize(width, height) {
method _resize (line 277) | _resize(width, height) {
method ensureScalesHaveIDs (line 304) | ensureScalesHaveIDs() {
method buildOrUpdateScales (line 316) | buildOrUpdateScales() {
method _updateMetasets (line 385) | _updateMetasets() {
method _removeUnreferencedMetasets (line 403) | _removeUnreferencedMetasets() {
method buildOrUpdateControllers (line 415) | buildOrUpdateControllers() {
method _resetElements (line 461) | _resetElements() {
method reset (line 470) | reset() {
method update (line 475) | update(mode) {
method _updateScales (line 542) | _updateScales() {
method _checkEventBindings (line 554) | _checkEventBindings() {
method _updateHiddenIndices (line 569) | _updateHiddenIndices() {
method _getUniformDataChanges (line 581) | _getUniformDataChanges() {
method _updateLayout (line 611) | _updateLayout(minPadding) {
method _updateDatasets (line 648) | _updateDatasets(mode) {
method _updateDataset (line 669) | _updateDataset(index, mode) {
method render (line 683) | render() {
method draw (line 698) | draw() {
method _getSortedDatasetMetas (line 737) | _getSortedDatasetMetas(filterVisible) {
method getSortedVisibleDatasetMetas (line 756) | getSortedVisibleDatasetMetas() {
method _drawDatasets (line 765) | _drawDatasets() {
method _drawDataset (line 783) | _drawDataset(meta) {
method isPointInArea (line 816) | isPointInArea(point) {
method getElementsAtEventForMode (line 820) | getElementsAtEventForMode(e, mode, options, useFinalPosition) {
method getDatasetMeta (line 829) | getDatasetMeta(datasetIndex) {
method getContext (line 855) | getContext() {
method getVisibleDatasetCount (line 859) | getVisibleDatasetCount() {
method isDatasetVisible (line 863) | isDatasetVisible(datasetIndex) {
method setDatasetVisibility (line 876) | setDatasetVisibility(datasetIndex, visible) {
method toggleDataVisibility (line 881) | toggleDataVisibility(index) {
method getDataVisibility (line 885) | getDataVisibility(index) {
method _updateVisibility (line 892) | _updateVisibility(datasetIndex, dataIndex, visible) {
method hide (line 908) | hide(datasetIndex, dataIndex) {
method show (line 912) | show(datasetIndex, dataIndex) {
method _destroyDatasetMeta (line 919) | _destroyDatasetMeta(datasetIndex) {
method _stop (line 927) | _stop() {
method destroy (line 937) | destroy() {
method toBase64Image (line 957) | toBase64Image(...args) {
method bindEvents (line 964) | bindEvents() {
method bindUserEvents (line 976) | bindUserEvents() {
method bindResponsiveEvents (line 997) | bindResponsiveEvents() {
method unbindEvents (line 1054) | unbindEvents() {
method updateHoverStyle (line 1066) | updateHoverStyle(items, mode, enabled) {
method getActiveElements (line 1088) | getActiveElements() {
method setActiveElements (line 1096) | setActiveElements(activeElements) {
method notifyPlugins (line 1129) | notifyPlugins(hook, args, filter) {
method isPluginEnabled (line 1138) | isPluginEnabled(pluginId) {
method _updateHoverStyles (line 1145) | _updateHoverStyles(active, lastActive, replay) {
method _eventHandler (line 1163) | _eventHandler(e, replay) {
method _handleEvent (line 1196) | _handleEvent(e, replay, inChartArea) {
method _getActiveElements (line 1249) | _getActiveElements(e, lastActive, inChartArea, useFinalPosition) {
function invalidatePlugins (line 1265) | function invalidatePlugins() {
FILE: src/core/core.datasetController.js
function scaleClip (line 12) | function scaleClip(scale, allowedOverflow) {
function defaultClip (line 23) | function defaultClip(xScale, yScale, allowedOverflow) {
function toClip (line 38) | function toClip(value) {
function getSortedDatasetIndices (line 59) | function getSortedDatasetIndices(chart, filterVisible) {
function applyStack (line 70) | function applyStack(stack, value, dsIndex, options = {}) {
function convertObjectDataToArray (line 102) | function convertObjectDataToArray(data, meta) {
function isStacked (line 119) | function isStacked(scale, meta) {
function getStackKey (line 124) | function getStackKey(indexScale, valueScale, meta) {
function getUserBounds (line 128) | function getUserBounds(scale) {
function getOrCreateStack (line 136) | function getOrCreateStack(stacks, stackKey, indexValue) {
function getLastIndexInStack (line 141) | function getLastIndexInStack(stack, vScale, positive, type) {
function updateStacks (line 152) | function updateStacks(controller, parsed) {
function getFirstScaleId (line 177) | function getFirstScaleId(chart, axis) {
function createDatasetContext (line 182) | function createDatasetContext(parent, index) {
function createDataContext (line 195) | function createDataContext(parent, index, element) {
function clearStacks (line 208) | function clearStacks(meta, items) {
class DatasetController (line 234) | class DatasetController {
method constructor (line 255) | constructor(chart, datasetIndex) {
method initialize (line 280) | initialize() {
method updateIndex (line 292) | updateIndex(datasetIndex) {
method linkScales (line 299) | linkScales() {
method getDataset (line 319) | getDataset() {
method getMeta (line 323) | getMeta() {
method getScaleForId (line 331) | getScaleForId(scaleID) {
method _getOtherScale (line 338) | _getOtherScale(scale) {
method reset (line 345) | reset() {
method _destroy (line 352) | _destroy() {
method _dataCheck (line 365) | _dataCheck() {
method addElements (line 394) | addElements() {
method buildOrUpdateElements (line 404) | buildOrUpdateElements(resetNewElements) {
method configure (line 438) | configure() {
method parse (line 451) | parse(start, count) {
method parsePrimitiveData (line 502) | parsePrimitiveData(meta, data, start, count) {
method parseArrayData (line 532) | parseArrayData(meta, data, start, count) {
method parseObjectData (line 559) | parseObjectData(meta, data, start, count) {
method getParsed (line 579) | getParsed(index) {
method getDataElement (line 586) | getDataElement(index) {
method applyStack (line 593) | applyStack(scale, parsed, mode) {
method updateRangeFromParsed (line 607) | updateRangeFromParsed(range, scale, parsed, stack) {
method getMinMax (line 622) | getMinMax(scale, canStack) {
method getAllParsedValues (line 662) | getAllParsedValues(scale) {
method getMaxOverflow (line 680) | getMaxOverflow() {
method getLabelAndValue (line 687) | getLabelAndValue(index) {
method _update (line 701) | _update(mode) {
method update (line 710) | update(mode) {}
method draw (line 712) | draw() {
method getStyle (line 752) | getStyle(index, active) {
method getContext (line 762) | getContext(index, active, mode) {
method resolveDatasetElementOptions (line 788) | resolveDatasetElementOptions(mode) {
method resolveDataElementOptions (line 797) | resolveDataElementOptions(index, mode) {
method _resolveElementOptions (line 804) | _resolveElementOptions(elementType, mode = 'default', index) {
method _resolveAnimations (line 841) | _resolveAnimations(index, transition, active) {
method getSharedOptions (line 867) | getSharedOptions(options) {
method includeOptions (line 878) | includeOptions(mode, sharedOptions) {
method _getSharedOptions (line 885) | _getSharedOptions(start, mode) {
method updateElement (line 898) | updateElement(element, index, properties, mode) {
method updateSharedOptions (line 910) | updateSharedOptions(sharedOptions, mode, newOptions) {
method _setStyle (line 919) | _setStyle(element, index, mode, active) {
method removeHoverStyle (line 929) | removeHoverStyle(element, datasetIndex, index) {
method setHoverStyle (line 933) | setHoverStyle(element, datasetIndex, index) {
method _removeDatasetHoverStyle (line 940) | _removeDatasetHoverStyle() {
method _setDatasetHoverStyle (line 951) | _setDatasetHoverStyle() {
method _resyncElements (line 962) | _resyncElements(resetNewElements) {
method _insertElements (line 994) | _insertElements(start, count, resetNewElements = true) {
method updateElements (line 1022) | updateElements(element, start, count, mode) {}
method _removeElements (line 1027) | _removeElements(start, count) {
method _sync (line 1041) | _sync(args) {
method _onDataPush (line 1051) | _onDataPush() {
method _onDataPop (line 1056) | _onDataPop() {
method _onDataShift (line 1060) | _onDataShift() {
method _onDataSplice (line 1064) | _onDataSplice(start, count) {
method _onDataUnshift (line 1074) | _onDataUnshift() {
FILE: src/core/core.defaults.js
function getScope (line 15) | function getScope(node, key) {
function set (line 27) | function set(root, scope, values) {
class Defaults (line 38) | class Defaults {
method constructor (line 39) | constructor(_descriptors, _appliers) {
method set (line 90) | set(scope, values) {
method get (line 97) | get(scope) {
method describe (line 105) | describe(scope, values) {
method override (line 109) | override(scope, values) {
method route (line 130) | route(scope, name, targetScope, targetName) {
method apply (line 159) | apply(appliers) {
FILE: src/core/core.element.ts
class Element (line 6) | class Element<T = AnyObject, O = AnyObject> {
method tooltipPosition (line 17) | tooltipPosition(useFinalPosition: boolean): Point {
method hasValue (line 22) | hasValue() {
method getProps (line 33) | getProps(props: string[], final?: boolean): Partial<Record<string, unk...
FILE: src/core/core.interaction.js
function binarySearch (line 22) | function binarySearch(metaset, axis, value, intersect) {
function evaluateInteractionItems (line 74) | function evaluateInteractionItems(chart, axis, position, handler, inters...
function getDistanceMetricForAxis (line 94) | function getDistanceMetricForAxis(axis) {
function getIntersectItems (line 114) | function getIntersectItems(chart, position, axis, useFinalPosition, incl...
function getNearestRadialItems (line 142) | function getNearestRadialItems(chart, position, axis, useFinalPosition) {
function getNearestCartesianItems (line 168) | function getNearestCartesianItems(chart, position, axis, intersect, useF...
function getNearestItems (line 209) | function getNearestItems(chart, position, axis, intersect, useFinalPosit...
function getAxisItems (line 228) | function getAxisItems(chart, position, axis, intersect, useFinalPosition) {
method index (line 269) | index(chart, e, options, useFinalPosition) {
method dataset (line 306) | dataset(chart, e, options, useFinalPosition) {
method point (line 336) | point(chart, e, options, useFinalPosition) {
method nearest (line 352) | nearest(chart, e, options, useFinalPosition) {
method x (line 368) | x(chart, e, options, useFinalPosition) {
method y (line 382) | y(chart, e, options, useFinalPosition) {
FILE: src/core/core.layouts.defaults.js
function applyLayoutsDefaults (line 1) | function applyLayoutsDefaults(defaults) {
FILE: src/core/core.layouts.js
constant STATIC_POSITIONS (line 8) | const STATIC_POSITIONS = ['left', 'top', 'right', 'bottom'];
function filterByPosition (line 10) | function filterByPosition(array, position) {
function filterDynamicPositionByAxis (line 14) | function filterDynamicPositionByAxis(array, axis) {
function sortByWeight (line 18) | function sortByWeight(array, reverse) {
function wrapBoxes (line 28) | function wrapBoxes(boxes) {
function buildStacks (line 48) | function buildStacks(layouts) {
function setLayoutDims (line 65) | function setLayoutDims(layouts, params) {
function buildLayoutBoxes (line 85) | function buildLayoutBoxes(boxes) {
function getCombinedMax (line 105) | function getCombinedMax(maxPadding, chartArea, a, b) {
function updateMaxPadding (line 109) | function updateMaxPadding(maxPadding, boxPadding) {
function updateDims (line 116) | function updateDims(chartArea, params, layout, stacks) {
function handleMaxPadding (line 149) | function handleMaxPadding(chartArea) {
function getMargins (line 163) | function getMargins(horizontal, chartArea) {
function fitBoxes (line 179) | function fitBoxes(boxes, chartArea, params, stacks) {
function setBoxDims (line 209) | function setBoxDims(box, left, top, width, height) {
function placeBoxes (line 218) | function placeBoxes(boxes, chartArea, params, stacks) {
method addBox (line 291) | addBox(chart, item) {
method removeBox (line 318) | removeBox(chart, layoutItem) {
method configure (line 331) | configure(chart, item, options) {
method update (line 345) | update(chart, width, height, minPadding) {
FILE: src/core/core.plugins.js
class PluginService (line 20) | class PluginService {
method constructor (line 21) | constructor() {
method notify (line 35) | notify(chart, hook, args, filter) {
method _notify (line 59) | _notify(descriptors, chart, hook, args) {
method invalidate (line 73) | invalidate() {
method _descriptors (line 89) | _descriptors(chart) {
method _createDescriptors (line 101) | _createDescriptors(chart, all) {
method _notifyStateChanges (line 113) | _notifyStateChanges(chart) {
function allPlugins (line 125) | function allPlugins(config) {
function getOpts (line 146) | function getOpts(options, all) {
function createDescriptors (line 156) | function createDescriptors(chart, {plugins, localIds}, options, all) {
function pluginOpts (line 175) | function pluginOpts(config, {plugin, local}, opts, context) {
FILE: src/core/core.registry.js
class Registry (line 11) | class Registry {
method constructor (line 12) | constructor() {
method add (line 25) | add(...args) {
method remove (line 29) | remove(...args) {
method addControllers (line 36) | addControllers(...args) {
method addElements (line 43) | addElements(...args) {
method addPlugins (line 50) | addPlugins(...args) {
method addScales (line 57) | addScales(...args) {
method getController (line 65) | getController(id) {
method getElement (line 73) | getElement(id) {
method getPlugin (line 81) | getPlugin(id) {
method getScale (line 89) | getScale(id) {
method removeControllers (line 96) | removeControllers(...args) {
method removeElements (line 103) | removeElements(...args) {
method removePlugins (line 110) | removePlugins(...args) {
method removeScales (line 117) | removeScales(...args) {
method _each (line 124) | _each(method, args, typedRegistry) {
method _exec (line 151) | _exec(method, registry, component) {
method _getRegistryForType (line 161) | _getRegistryForType(type) {
method _get (line 175) | _get(id, typedRegistry, type) {
FILE: src/core/core.scale.autoskip.js
function autoSkip (line 17) | function autoSkip(scale, ticks) {
function determineMaxTicks (line 49) | function determineMaxTicks(scale) {
function calculateSpacing (line 62) | function calculateSpacing(majorIndices, ticks, ticksLimit) {
function getMajorIndices (line 85) | function getMajorIndices(ticks) {
function skipMajors (line 102) | function skipMajors(ticks, newTicks, majorIndices, spacing) {
function skip (line 124) | function skip(ticks, newTicks, spacing, majorStart, majorEnd) {
function getEvenSpacing (line 156) | function getEvenSpacing(arr) {
FILE: src/core/core.scale.defaults.js
function applyScaleDefaults (line 3) | function applyScaleDefaults(defaults) {
FILE: src/core/core.scale.js
function sample (line 23) | function sample(arr, numItems) {
function getPixelForGridLine (line 40) | function getPixelForGridLine(scale, index, offsetGridLines) {
function garbageCollect (line 71) | function garbageCollect(caches, length) {
function getTickMarkLength (line 88) | function getTickMarkLength(options) {
function getTitleHeight (line 95) | function getTitleHeight(options, fallback) {
function createScaleContext (line 107) | function createScaleContext(parent, scale) {
function createTickContext (line 114) | function createTickContext(parent, index, tick) {
function titleAlign (line 122) | function titleAlign(align, position, reverse) {
function titleArgs (line 131) | function titleArgs(scale, offset, position, align) {
class Scale (line 168) | class Scale extends Element {
method constructor (line 171) | constructor(cfg) {
method init (line 256) | init(options) {
method parse (line 274) | parse(raw, index) { // eslint-disable-line no-unused-vars
method getUserBounds (line 283) | getUserBounds() {
method getMinMax (line 303) | getMinMax(canStack) {
method getPadding (line 337) | getPadding() {
method getTicks (line 351) | getTicks() {
method getLabels (line 358) | getLabels() {
method getLabelItems (line 366) | getLabelItems(chartArea = this.chart.chartArea) {
method beforeLayout (line 372) | beforeLayout() {
method beforeUpdate (line 381) | beforeUpdate() {
method update (line 393) | update(maxWidth, maxHeight, margins) {
method configure (line 480) | configure() {
method afterUpdate (line 500) | afterUpdate() {
method beforeSetDimensions (line 506) | beforeSetDimensions() {
method setDimensions (line 509) | setDimensions() {
method afterSetDimensions (line 530) | afterSetDimensions() {
method _callHooks (line 534) | _callHooks(name) {
method beforeDataLimits (line 540) | beforeDataLimits() {
method determineDataLimits (line 543) | determineDataLimits() {}
method afterDataLimits (line 544) | afterDataLimits() {
method beforeBuildTicks (line 549) | beforeBuildTicks() {
method buildTicks (line 555) | buildTicks() {
method afterBuildTicks (line 558) | afterBuildTicks() {
method beforeTickToLabelConversion (line 562) | beforeTickToLabelConversion() {
method generateTickLabels (line 569) | generateTickLabels(ticks) {
method afterTickToLabelConversion (line 577) | afterTickToLabelConversion() {
method beforeCalculateLabelRotation (line 583) | beforeCalculateLabelRotation() {
method calculateLabelRotation (line 586) | calculateLabelRotation() {
method afterCalculateLabelRotation (line 624) | afterCalculateLabelRotation() {
method afterAutoSkip (line 627) | afterAutoSkip() {}
method beforeFit (line 631) | beforeFit() {
method fit (line 634) | fit() {
method _calculatePadding (line 689) | _calculatePadding(first, last, sin, cos) {
method _handleMargins (line 743) | _handleMargins() {
method afterFit (line 752) | afterFit() {
method isHorizontal (line 760) | isHorizontal() {
method isFullSize (line 767) | isFullSize() {
method _convertTicksToLabels (line 775) | _convertTicksToLabels(ticks) {
method _getLabelSizes (line 797) | _getLabelSizes() {
method _computeLabelSizes (line 819) | _computeLabelSizes(ticks, length, maxTicksLimit) {
method getLabelForValue (line 877) | getLabelForValue(value) {
method getPixelForValue (line 888) | getPixelForValue(value, index) { // eslint-disable-line no-unused-vars
method getValueForPixel (line 898) | getValueForPixel(pixel) {}
method getPixelForTick (line 906) | getPixelForTick(index) {
method getPixelForDecimal (line 920) | getPixelForDecimal(decimal) {
method getDecimalForPixel (line 933) | getDecimalForPixel(pixel) {
method getBasePixel (line 943) | getBasePixel() {
method getBaseValue (line 950) | getBaseValue() {
method getContext (line 961) | getContext(index) {
method _tickSize (line 977) | _tickSize() {
method _isVisible (line 1000) | _isVisible() {
method _computeGridLineItems (line 1013) | _computeGridLineItems(chartArea) {
method _computeLabelItems (line 1147) | _computeLabelItems(chartArea) {
method _getXAxisLabelAlignment (line 1331) | _getXAxisLabelAlignment() {
method _getYAxisLabelAlignment (line 1352) | _getYAxisLabelAlignment(tl) {
method _computeLabelArea (line 1423) | _computeLabelArea() {
method drawBackground (line 1441) | drawBackground() {
method getLineWidthForValue (line 1451) | getLineWidthForValue(value) {
method drawGrid (line 1468) | drawGrid(chartArea) {
method drawBorder (line 1522) | drawBorder() {
method drawLabels (line 1557) | drawLabels(chartArea) {
method drawTitle (line 1588) | drawTitle() {
method draw (line 1623) | draw(chartArea) {
method _layers (line 1639) | _layers() {
method getMatchingVisibleMetas (line 1680) | getMatchingVisibleMetas(type) {
method _resolveTickFontOptions (line 1700) | _resolveTickFontOptions(index) {
method _maxDigits (line 1708) | _maxDigits() {
FILE: src/core/core.ticks.js
method values (line 16) | values(value) {
method numeric (line 28) | numeric(tickValue, index, ticks) {
method logarithmic (line 71) | logarithmic(tickValue, index, ticks) {
function calculateDelta (line 85) | function calculateDelta(tickValue, ticks) {
FILE: src/core/core.typedRegistry.js
class TypedRegistry (line 8) | class TypedRegistry {
method constructor (line 9) | constructor(type, scope, override) {
method isForType (line 16) | isForType(type) {
method register (line 24) | register(item) {
method get (line 59) | get(id) {
method unregister (line 66) | unregister(item) {
function registerDefaults (line 84) | function registerDefaults(item, scope, parentScope) {
function routeDefaults (line 103) | function routeDefaults(scope, routes) {
function isIChartComponent (line 115) | function isIChartComponent(proto) {
FILE: src/elements/element.arc.ts
function clipSelf (line 7) | function clipSelf(ctx: CanvasRenderingContext2D, element: ArcElement, en...
function clipArc (line 41) | function clipArc(ctx: CanvasRenderingContext2D, element: ArcElement, end...
function toRadiusCorners (line 59) | function toRadiusCorners(value) {
function parseBorderRadius (line 66) | function parseBorderRadius(arc: ArcElement, innerRadius: number, outerRa...
function rThetaToXY (line 94) | function rThetaToXY(r: number, theta: number, x: number, y: number) {
function pathArc (line 116) | function pathArc(
function drawArc (line 218) | function drawArc(
function drawBorder (line 241) | function drawBorder(
type ArcProps (line 292) | interface ArcProps extends Point {
class ArcElement (line 300) | class ArcElement extends Element<ArcProps, ArcOptions> {
method constructor (line 336) | constructor(cfg) {
method inRange (line 353) | inRange(chartX: number, chartY: number, useFinalPosition: boolean) {
method getCenterPoint (line 372) | getCenterPoint(useFinalPosition: boolean) {
method tooltipPosition (line 390) | tooltipPosition(useFinalPosition: boolean) {
method draw (line 394) | draw(ctx: CanvasRenderingContext2D) {
FILE: src/elements/element.bar.js
function getBarBounds (line 15) | function getBarBounds(bar, useFinalPosition) {
function skipOrLimit (line 37) | function skipOrLimit(skip, value, min, max) {
function parseBorderWidth (line 41) | function parseBorderWidth(bar, maxW, maxH) {
function parseBorderRadius (line 54) | function parseBorderRadius(bar, maxW, maxH) {
function boundingRects (line 73) | function boundingRects(bar) {
function inRange (line 103) | function inRange(bar, x, y, useFinalPosition) {
function hasRadius (line 114) | function hasRadius(radius) {
function addNormalRectPath (line 123) | function addNormalRectPath(ctx, rect) {
function inflateRect (line 127) | function inflateRect(rect, amount, refRect = {}) {
class BarElement (line 141) | class BarElement extends Element {
method constructor (line 164) | constructor(cfg) {
method draw (line 179) | draw(ctx) {
method inRange (line 203) | inRange(mouseX, mouseY, useFinalPosition) {
method inXRange (line 207) | inXRange(mouseX, useFinalPosition) {
method inYRange (line 211) | inYRange(mouseY, useFinalPosition) {
method getCenterPoint (line 215) | getCenterPoint(useFinalPosition) {
method getRange (line 223) | getRange(axis) {
FILE: src/elements/element.line.js
function setStyle (line 12) | function setStyle(ctx, options, style = options) {
function lineTo (line 21) | function lineTo(ctx, previous, target) {
function getLineMethod (line 28) | function getLineMethod(options) {
function pathVars (line 40) | function pathVars(points, segment, params = {}) {
function pathSegment (line 71) | function pathSegment(ctx, line, segment, params) {
function fastPathSegment (line 118) | function fastPathSegment(ctx, line, segment, params) {
function _getSegmentMethod (line 185) | function _getSegmentMethod(line) {
function _getInterpolationMethod (line 195) | function _getInterpolationMethod(options) {
function strokePathWithCache (line 207) | function strokePathWithCache(ctx, line, start, count) {
function strokePathDirect (line 219) | function strokePathDirect(ctx, line, start, count) {
function draw (line 235) | function draw(ctx, line, start, count) {
class LineElement (line 243) | class LineElement extends Element {
method constructor (line 279) | constructor(cfg) {
method updateControlPoints (line 299) | updateControlPoints(chartArea, indexAxis) {
method points (line 308) | set points(points) {
method points (line 315) | get points() {
method segments (line 319) | get segments() {
method first (line 327) | first() {
method last (line 337) | last() {
method interpolate (line 351) | interpolate(point, property) {
method pathSegment (line 394) | pathSegment(ctx, segment, params) {
method path (line 406) | path(ctx, start, count) {
method draw (line 427) | draw(ctx, chartArea, start, count) {
FILE: src/elements/element.point.ts
function inRange (line 11) | function inRange(el: PointElement, pos: number, axis: 'x' | 'y', useFina...
type PointProps (line 18) | type PointProps = Point
class PointElement (line 20) | class PointElement extends Element<PointProps, PointOptions & PointHover...
method constructor (line 49) | constructor(cfg) {
method inRange (line 62) | inRange(mouseX: number, mouseY: number, useFinalPosition?: boolean) {
method inXRange (line 68) | inXRange(mouseX: number, useFinalPosition?: boolean) {
method inYRange (line 72) | inYRange(mouseY: number, useFinalPosition?: boolean) {
method getCenterPoint (line 76) | getCenterPoint(useFinalPosition?: boolean) {
method size (line 81) | size(options?: Partial<PointOptions & PointHoverOptions>) {
method draw (line 89) | draw(ctx: CanvasRenderingContext2D, area: ChartArea) {
method getRange (line 102) | getRange() {
FILE: src/helpers/helpers.canvas.ts
function toFontString (line 25) | function toFontString(font: FontSpec) {
function _measureText (line 39) | function _measureText(
type Thing (line 57) | type Thing = string | undefined | null
type Things (line 58) | type Things = (Thing | Thing[])[]
function _longestText (line 64) | function _longestText(
function _alignPixel (line 125) | function _alignPixel(chart: Chart, pixel: number, width: number) {
function clearCanvas (line 134) | function clearCanvas(canvas?: HTMLCanvasElement, ctx?: CanvasRenderingCo...
type DrawPointOptions (line 149) | interface DrawPointOptions {
function drawPoint (line 156) | function drawPoint(
function drawPointLegend (line 167) | function drawPointLegend(
function _isPointInArea (line 317) | function _isPointInArea(
function clipArea (line 328) | function clipArea(ctx: CanvasRenderingContext2D, area: TRBL) {
function unclipArea (line 335) | function unclipArea(ctx: CanvasRenderingContext2D) {
function _steppedLineTo (line 342) | function _steppedLineTo(
function _bezierCurveTo (line 367) | function _bezierCurveTo(
function setRenderOpts (line 385) | function setRenderOpts(ctx: CanvasRenderingContext2D, opts: RenderTextOp...
function decorateText (line 407) | function decorateText(
function drawBackdrop (line 438) | function drawBackdrop(ctx: CanvasRenderingContext2D, opts: BackdropOptio...
function renderText (line 449) | function renderText(
function addRoundedRectPath (line 498) | function addRoundedRectPath(
FILE: src/helpers/helpers.collection.ts
function _lookup (line 20) | function _lookup(
function _filterBetween (line 84) | function _filterBetween(values: number[], min: number, max: number) {
type ArrayListener (line 102) | interface ArrayListener<T> {
function listenArrayEvents (line 116) | function listenArrayEvents(array, listener) {
function unlistenArrayEvents (line 158) | function unlistenArrayEvents(array, listener) {
function _arrayUnique (line 184) | function _arrayUnique<T>(items: T[]) {
FILE: src/helpers/helpers.color.ts
function isPatternOrGradient (line 3) | function isPatternOrGradient(value: unknown): value is CanvasPattern | C...
function color (line 21) | function color(value) {
function getHoverColor (line 28) | function getHoverColor(value) {
FILE: src/helpers/helpers.config.ts
function _createResolver (line 27) | function _createResolver<
function _attachContext (line 118) | function _attachContext<
function _descriptors (line 200) | function _descriptors(
function _cached (line 218) | function _cached(
function _resolveWithContext (line 233) | function _resolveWithContext(
function _resolveScriptable (line 255) | function _resolveScriptable(
function _resolveArray (line 275) | function _resolveArray(
function resolveFallback (line 298) | function resolveFallback(
function addScopes (line 309) | function addScopes(
function createSubResolver (line 335) | function createSubResolver(
function addScopesFromKey (line 360) | function addScopesFromKey(
function subGetTarget (line 373) | function subGetTarget(
function _resolveWithPrefixes (line 390) | function _resolveWithPrefixes(
function _resolve (line 407) | function _resolve(key: string, scopes: AnyObject[]) {
function getKeysFromAllScopes (line 419) | function getKeysFromAllScopes(target: ResolverCache) {
function resolveKeysFromAllScopes (line 427) | function resolveKeysFromAllScopes(scopes: AnyObject[]) {
function _parseObjectDataRadialScale (line 437) | function _parseObjectDataRadialScale(
FILE: src/helpers/helpers.config.types.ts
type ResolverObjectKey (line 4) | type ResolverObjectKey = string | boolean;
type ResolverCache (line 6) | interface ResolverCache<
type ResolverProxy (line 24) | type ResolverProxy<
type DescriptorDefaults (line 29) | interface DescriptorDefaults {
type Descriptor (line 35) | interface Descriptor {
type ContextCache (line 43) | interface ContextCache<
type ContextProxy (line 57) | type ContextProxy<
FILE: src/helpers/helpers.core.ts
function noop (line 11) | function noop() {
function isNullOrUndef (line 28) | function isNullOrUndef(value: unknown): value is null | undefined {
function isArray (line 37) | function isArray<T = unknown>(value: unknown): value is T[] {
function isObject (line 53) | function isObject(value: unknown): value is AnyObject {
function isNumberFinite (line 61) | function isNumberFinite(value: unknown): value is number {
function finiteOrDefault (line 73) | function finiteOrDefault(value: unknown, defaultValue: number) {
function valueOrDefault (line 82) | function valueOrDefault<T>(value: T | undefined, defaultValue: T) {
function callback (line 103) | function callback<T extends (this: TA, ...restArgs: unknown[]) => R, TA,...
function each (line 134) | function each<T, TA>(
function _elementsEqual (line 167) | function _elementsEqual(a0: ActiveDataPoint[], a1: ActiveDataPoint[]) {
function clone (line 190) | function clone<T>(source: T): T {
function isValidKey (line 211) | function isValidKey(key: string) {
function _merger (line 220) | function _merger(key: string, target: AnyObject, source: AnyObject, opti...
type MergeOptions (line 236) | interface MergeOptions {
function merge (line 260) | function merge<T>(target: T, source: AnyObject[], options?: MergeOptions...
function mergeIf (line 301) | function mergeIf<T>(target: T, source: AnyObject[]): AnyObject {
function _mergerIf (line 310) | function _mergerIf(key: string, target: AnyObject, source: AnyObject) {
function _deprecated (line 328) | function _deprecated(scope: string, value: unknown, previous: string, cu...
function _splitKey (line 347) | function _splitKey(key: string) {
function _getKeyResolver (line 363) | function _getKeyResolver(key: string) {
function resolveObjectKey (line 378) | function resolveObjectKey(obj: AnyObject, key: string): any {
function _capitalize (line 386) | function _capitalize(str: string) {
function _isClickEvent (line 414) | function _isClickEvent(e: ChartEvent) {
FILE: src/helpers/helpers.curve.ts
constant EPSILON (line 6) | const EPSILON = Number.EPSILON || 1e-14;
type OptionalSplinePoint (line 8) | type OptionalSplinePoint = SplinePoint | false
function splineCurve (line 12) | function splineCurve(
function monotoneAdjust (line 57) | function monotoneAdjust(points: SplinePoint[], deltaK: number[], mK: num...
function monotoneCompute (line 87) | function monotoneCompute(points: SplinePoint[], mK: number[], indexAxis:...
function splineCurveMonotone (line 122) | function splineCurveMonotone(points: SplinePoint[], indexAxis: 'x' | 'y'...
function capControlPoint (line 157) | function capControlPoint(pt: number, min: number, max: number) {
function capBezierPoints (line 161) | function capBezierPoints(points: SplinePoint[], area: ChartArea) {
function _updateBezierControlPoints (line 186) | function _updateBezierControlPoints(
FILE: src/helpers/helpers.dataset.ts
function getSizeForArea (line 3) | function getSizeForArea(scale: Scale, chartArea: ChartArea, field: keyof...
function getDatasetArea (line 7) | function getDatasetArea(meta: ChartMeta, chartArea: ChartArea): TRBL {
function getDatasetClipArea (line 20) | function getDatasetClipArea(chart: Chart, meta: ChartMeta): TRBL | false {
FILE: src/helpers/helpers.dom.ts
function _isDomSupported (line 9) | function _isDomSupported(): boolean {
function _getParentNode (line 16) | function _getParentNode(domNode: HTMLCanvasElement): HTMLCanvasElement {
function parseMaxStyle (line 29) | function parseMaxStyle(styleValue: string | number, node: HTMLElement, p...
function getStyle (line 48) | function getStyle(el: HTMLElement, property: string): string {
function getPositionedStyle (line 53) | function getPositionedStyle(styles: CSSStyleDeclaration, style: string, ...
function getCanvasPosition (line 73) | function getCanvasPosition(
function getRelativePosition (line 105) | function getRelativePosition(
function getContainerSize (line 133) | function getContainerSize(canvas: HTMLCanvasElement, width: number, heig...
function getMaximumSize (line 163) | function getMaximumSize(
function retinaScale (line 208) | function retinaScale(
method passive (line 253) | get passive() { // This function will be called when the browser attempt...
function readUsedSize (line 279) | function readUsedSize(
FILE: src/helpers/helpers.easing.ts
method easeInOutElastic (line 73) | easeInOutElastic(t: number) {
method easeInBack (line 82) | easeInBack(t: number) {
method easeOutBack (line 87) | easeOutBack(t: number) {
method easeInOutBack (line 92) | easeInOutBack(t: number) {
method easeOutBounce (line 102) | easeOutBounce(t: number) {
type EasingFunction (line 122) | type EasingFunction = keyof typeof effects
FILE: src/helpers/helpers.extras.ts
function fontString (line 7) | function fontString(pixelSize: number, fontStyle: string, fontFamily: st...
function throttled (line 27) | function throttled<TArgs extends Array<any>>(
function debounce (line 50) | function debounce<TArgs extends Array<any>>(fn: (...args: TArgs) => void...
function _getStartAndCountOfVisiblePoints (line 88) | function _getStartAndCountOfVisiblePoints(meta: ChartMeta<'line' | 'scat...
function _scaleRangesChanged (line 144) | function _scaleRangesChanged(meta) {
FILE: src/helpers/helpers.interpolation.ts
function _pointInLine (line 6) | function _pointInLine(p1: Point, p2: Point, t: number, mode?) { // eslin...
function _steppedInterpolation (line 16) | function _steppedInterpolation(
function _bezierInterpolation (line 32) | function _bezierInterpolation(p1: SplinePoint, p2: SplinePoint, t: numbe...
FILE: src/helpers/helpers.intl.ts
function getNumberFormat (line 4) | function getNumberFormat(locale: string, options?: Intl.NumberFormatOpti...
function formatNumber (line 15) | function formatNumber(num: number, locale: string, options?: Intl.Number...
FILE: src/helpers/helpers.math.ts
constant TAU (line 10) | const TAU = 2 * PI;
constant PITAU (line 11) | const PITAU = TAU + PI;
constant INFINITY (line 12) | const INFINITY = Number.POSITIVE_INFINITY;
constant RAD_PER_DEG (line 13) | const RAD_PER_DEG = PI / 180;
constant HALF_PI (line 14) | const HALF_PI = PI / 2;
constant QUARTER_PI (line 15) | const QUARTER_PI = PI / 4;
constant TWO_THIRDS_PI (line 16) | const TWO_THIRDS_PI = PI * 2 / 3;
function almostEquals (line 21) | function almostEquals(x: number, y: number, epsilon: number) {
function niceNum (line 28) | function niceNum(range: number) {
function _factorize (line 41) | function _factorize(value: number) {
function isNonPrimitive (line 63) | function isNonPrimitive(n: unknown) {
function isNumber (line 67) | function isNumber(n: unknown): n is number {
function almostWhole (line 71) | function almostWhole(x: number, epsilon: number) {
function _setMinAndMaxByKey (line 79) | function _setMinAndMaxByKey(
function toRadians (line 95) | function toRadians(degrees: number) {
function toDegrees (line 99) | function toDegrees(radians: number) {
function _decimalPlaces (line 110) | function _decimalPlaces(x: number) {
function getAngleFromPoint (line 124) | function getAngleFromPoint(
function distanceBetweenPoints (line 144) | function distanceBetweenPoints(pt1: Point, pt2: Point) {
function _angleDiff (line 152) | function _angleDiff(a: number, b: number) {
function _normalizeAngle (line 160) | function _normalizeAngle(a: number) {
function _angleBetween (line 167) | function _angleBetween(angle: number, start: number, end: number, sameAn...
function _limitValue (line 186) | function _limitValue(value: number, min: number, max: number) {
function _int16Range (line 194) | function _int16Range(value: number) {
function _isBetween (line 205) | function _isBetween(value: number, start: number, end: number, epsilon =...
FILE: src/helpers/helpers.options.ts
constant LINE_HEIGHT (line 7) | const LINE_HEIGHT = /^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/;
constant FONT_STYLE (line 8) | const FONT_STYLE = /^(normal|italic|initial|inherit|unset|(oblique( -?[0...
function toLineHeight (line 22) | function toLineHeight(value: number | string, size: number): number {
function _readValueToProps (line 51) | function _readValueToProps(value: number | Record<string, number>, props...
function toTRBL (line 75) | function toTRBL(value: number | TRBL | Point) {
function toTRBLCorners (line 86) | function toTRBLCorners(value: number | TRBLCorners) {
function toPadding (line 98) | function toPadding(value?: number | TRBL): ChartArea {
function toFont (line 115) | function toFont(options: Partial<FontSpec>, fallback?: Partial<FontSpec>) {
function resolve (line 154) | function resolve(inputs: Array<unknown>, context?: object, index?: numbe...
function _addGrace (line 186) | function _addGrace(minmax: { min: number; max: number; }, grace: number ...
function createContext (line 204) | function createContext(parentContext: object, context: object) {
FILE: src/helpers/helpers.rtl.ts
type RTLAdapter (line 1) | interface RTLAdapter {
method x (line 11) | x(x) {
method setWidth (line 14) | setWidth(w) {
method textAlign (line 17) | textAlign(align) {
method xPlus (line 23) | xPlus(x, value) {
method leftForLtr (line 26) | leftForLtr(x, itemWidth) {
method x (line 34) | x(x) {
method setWidth (line 37) | setWidth(w) { // eslint-disable-line no-unused-vars
method textAlign (line 39) | textAlign(align) {
method xPlus (line 42) | xPlus(x, value) {
method leftForLtr (line 45) | leftForLtr(x, _itemWidth) { // eslint-disable-line @typescript-eslint/no...
function getRtlAdapter (line 51) | function getRtlAdapter(rtl: boolean, rectX: number, width: number) {
function overrideTextDirection (line 55) | function overrideTextDirection(ctx: CanvasRenderingContext2D, direction:...
function restoreTextDirection (line 69) | function restoreTextDirection(ctx: CanvasRenderingContext2D, original?: ...
FILE: src/helpers/helpers.segment.js
function propertyFn (line 11) | function propertyFn(property) {
function normalizeSegment (line 26) | function normalizeSegment({start, end, count, loop, style}) {
function getSegment (line 35) | function getSegment(segment, points, bounds) {
function _boundSegment (line 77) | function _boundSegment(segment, points, bounds) {
function _boundSegments (line 141) | function _boundSegments(line, bounds) {
function findStartAndEnd (line 157) | function findStartAndEnd(points, count, loop, spanGaps) {
function solidSegments (line 198) | function solidSegments(points, start, max, loop) {
function _computeSegments (line 238) | function _computeSegments(line, segmentOptions) {
function splitByStyles (line 265) | function splitByStyles(line, segments, points, segmentOptions) {
function doSplitByStyles (line 279) | function doSplitByStyles(line, segments, points, segmentOptions) {
function readStyle (line 337) | function readStyle(options) {
function styleChanged (line 349) | function styleChanged(style, prevStyle) {
FILE: src/platform/index.js
function _detectPlatform (line 6) | function _detectPlatform(canvas) {
FILE: src/platform/platform.base.js
class BasePlatform (line 9) | class BasePlatform {
method acquireContext (line 16) | acquireContext(canvas, aspectRatio) {}
method releaseContext (line 24) | releaseContext(context) { // eslint-disable-line no-unused-vars
method addEventListener (line 35) | addEventListener(chart, type, listener) {}
method removeEventListener (line 43) | removeEventListener(chart, type, listener) {}
method getDevicePixelRatio (line 48) | getDevicePixelRatio() {
method getMaximumSize (line 59) | getMaximumSize(element, width, height, aspectRatio) {
method isAttached (line 72) | isAttached(canvas) { // eslint-disable-line no-unused-vars
method updateConfig (line 80) | updateConfig(config) { // eslint-disable-line no-unused-vars
FILE: src/platform/platform.basic.js
class BasicPlatform (line 13) | class BasicPlatform extends BasePlatform {
method acquireContext (line 14) | acquireContext(item) {
method updateConfig (line 20) | updateConfig(config) {
FILE: src/platform/platform.dom.js
constant EXPANDO_KEY (line 14) | const EXPANDO_KEY = '$chartjs';
constant EVENT_TYPES (line 21) | const EVENT_TYPES = {
function initCanvas (line 41) | function initCanvas(canvas, aspectRatio) {
function addListener (line 97) | function addListener(node, type, listener) {
function removeListener (line 103) | function removeListener(chart, type, listener) {
function fromNativeEvent (line 109) | function fromNativeEvent(event, chart) {
function nodeListContains (line 121) | function nodeListContains(nodeList, canvas) {
function createAttachObserver (line 129) | function createAttachObserver(chart, type, listener) {
function createDetachObserver (line 145) | function createDetachObserver(chart, type, listener) {
function onWindowResize (line 164) | function onWindowResize() {
function listenDevicePixelRatioChanges (line 177) | function listenDevicePixelRatioChanges(chart, resize) {
function unlistenDevicePixelRatioChanges (line 184) | function unlistenDevicePixelRatioChanges(chart) {
function createResizeObserver (line 191) | function createResizeObserver(chart, type, listener) {
function releaseObserver (line 231) | function releaseObserver(chart, type, observer) {
function createProxyAndListen (line 240) | function createProxyAndListen(chart, type, listener) {
class DomPlatform (line 260) | class DomPlatform extends BasePlatform {
method acquireContext (line 267) | acquireContext(canvas, aspectRatio) {
method releaseContext (line 293) | releaseContext(context) {
method addEventListener (line 331) | addEventListener(chart, type, listener) {
method removeEventListener (line 350) | removeEventListener(chart, type) {
method getDevicePixelRatio (line 368) | getDevicePixelRatio() {
method getMaximumSize (line 378) | getMaximumSize(canvas, width, height, aspectRatio) {
method isAttached (line 385) | isAttached(canvas) {
FILE: src/plugins/plugin.colors.ts
type ColorsPluginOptions (line 4) | interface ColorsPluginOptions {
type ColorsDescriptor (line 9) | interface ColorsDescriptor {
constant BORDER_COLORS (line 14) | const BORDER_COLORS = [
constant BACKGROUND_COLORS (line 25) | const BACKGROUND_COLORS = /* #__PURE__ */ BORDER_COLORS.map(color => col...
function getBorderColor (line 27) | function getBorderColor(i: number) {
function getBackgroundColor (line 31) | function getBackgroundColor(i: number) {
function colorizeDefaultDataset (line 35) | function colorizeDefaultDataset(dataset: ChartDataset, i: number) {
function colorizeDoughnutDataset (line 42) | function colorizeDoughnutDataset(dataset: ChartDataset, i: number) {
function colorizePolarAreaDataset (line 48) | function colorizePolarAreaDataset(dataset: ChartDataset, i: number) {
function getColorizer (line 54) | function getColorizer(chart: Chart) {
function containsColorsDefinitions (line 70) | function containsColorsDefinitions(
function containsColorsDefinition (line 84) | function containsColorsDefinition(
function containsDefaultColorsDefenitions (line 90) | function containsDefaultColorsDefenitions() {
method beforeLayout (line 102) | beforeLayout(chart: Chart, _args, options: ColorsPluginOptions) {
FILE: src/plugins/plugin.decimation.js
function lttbDecimation (line 3) | function lttbDecimation(data, start, count, availableWidth, options) {
function minMaxDecimation (line 82) | function minMaxDecimation(data, start, count, availableWidth) {
function cleanDecimatedDataset (line 156) | function cleanDecimatedDataset(dataset) {
function cleanDecimatedData (line 170) | function cleanDecimatedData(chart) {
function getStartAndCountOfVisiblePointsSimplified (line 176) | function getStartAndCountOfVisiblePointsSimplified(meta, points) {
method destroy (line 284) | destroy(chart) {
FILE: src/plugins/plugin.filler/filler.drawing.js
function _drawfill (line 5) | function _drawfill(ctx, source, area) {
function doFill (line 21) | function doFill(ctx, cfg) {
function clipVertical (line 49) | function clipVertical(ctx, target, clipY) {
function clipHorizontal (line 79) | function clipHorizontal(ctx, target, clipX) {
function fill (line 109) | function fill(ctx, cfg) {
function clipBounds (line 148) | function clipBounds(ctx, scale, clip, bounds) {
function interpolatedLineTo (line 181) | function interpolatedLineTo(ctx, target, point, property) {
FILE: src/plugins/plugin.filler/filler.helper.js
function _createBoundaryLine (line 16) | function _createBoundaryLine(boundary, line) {
function _shouldApplyFill (line 36) | function _shouldApplyFill(source) {
FILE: src/plugins/plugin.filler/filler.options.js
function _resolveTarget (line 10) | function _resolveTarget(sources, index, propagate) {
function _decodeFill (line 46) | function _decodeFill(line, index, count) {
function decodeTargetIndex (line 63) | function decodeTargetIndex(firstCh, index, target, count) {
function _getTargetPixel (line 80) | function _getTargetPixel(fill, scale) {
function _getTargetValue (line 101) | function _getTargetValue(fill, scale, startValue) {
function parseFillOption (line 120) | function parseFillOption(line) {
FILE: src/plugins/plugin.filler/filler.segment.js
function _segments (line 3) | function _segments(line, target, property) {
function _getBounds (line 51) | function _getBounds(property, first, last, loop) {
function _pointsFromSegments (line 65) | function _pointsFromSegments(boundary, line) {
function _findSegmentEnd (line 84) | function _findSegmentEnd(start, end, points) {
function _getEdge (line 94) | function _getEdge(a, b, prop, fn) {
FILE: src/plugins/plugin.filler/filler.target.js
function _getTarget (line 13) | function _getTarget(source) {
function getLineByIndex (line 41) | function getLineByIndex(chart, index) {
function computeBoundary (line 47) | function computeBoundary(source) {
function computeLinearBoundary (line 57) | function computeLinearBoundary(source) {
function computeCircularBoundary (line 73) | function computeCircularBoundary(source) {
FILE: src/plugins/plugin.filler/filler.target.stack.js
function _buildStackLine (line 15) | function _buildStackLine(source) {
function getLinesBelow (line 37) | function getLinesBelow(scale, index) {
function addPointsBelow (line 58) | function addPointsBelow(points, sourcePoint, linesBelow) {
function findPoint (line 87) | function findPoint(line, sourcePoint, property) {
FILE: src/plugins/plugin.filler/index.js
method afterDatasetsUpdate (line 15) | afterDatasetsUpdate(chart, _args, options) {
method beforeDraw (line 51) | beforeDraw(chart, _args, options) {
method beforeDatasetsDraw (line 68) | beforeDatasetsDraw(chart, _args, options) {
method beforeDatasetDraw (line 83) | beforeDatasetDraw(chart, args, options) {
FILE: src/plugins/plugin.filler/simpleArc.js
class simpleArc (line 4) | class simpleArc {
method constructor (line 5) | constructor(opts) {
method pathSegment (line 11) | pathSegment(ctx, bounds, opts) {
method interpolate (line 18) | interpolate(point) {
FILE: src/plugins/plugin.legend.js
class Legend (line 41) | class Legend extends Element {
method constructor (line 46) | constructor(config) {
method update (line 82) | update(maxWidth, maxHeight, margins) {
method setDimensions (line 92) | setDimensions() {
method buildLabels (line 104) | buildLabels() {
method fit (line 123) | fit() {
method _fitRows (line 160) | _fitRows(titleHeight, fontSize, boxWidth, itemHeight) {
method _fitCols (line 191) | _fitCols(titleHeight, labelFont, boxWidth, _itemHeight) {
method adjustHitBoxes (line 230) | adjustHitBoxes() {
method isHorizontal (line 265) | isHorizontal() {
method draw (line 269) | draw() {
method _draw (line 283) | _draw() {
method drawTitle (line 443) | drawTitle() {
method _computeTitleHeight (line 493) | _computeTitleHeight() {
method _getLegendItemAt (line 503) | _getLegendItemAt(x, y) {
method handleEvent (line 528) | handleEvent(e) {
function calculateItemSize (line 555) | function calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHe...
function calculateItemWidth (line 561) | function calculateItemWidth(legendItem, boxWidth, labelFont, ctx) {
function calculateItemHeight (line 569) | function calculateItemHeight(_itemHeight, legendItem, fontLineHeight) {
function calculateLegendItemHeight (line 577) | function calculateLegendItemHeight(legendItem, fontLineHeight) {
function isListened (line 582) | function isListened(type, opts) {
method start (line 601) | start(chart, _args, options) {
method stop (line 607) | stop(chart) {
method beforeUpdate (line 615) | beforeUpdate(chart, _args, options) {
method afterUpdate (line 623) | afterUpdate(chart) {
method afterEvent (line 630) | afterEvent(chart, args) {
method onClick (line 645) | onClick(e, legendItem, legend) {
method generateLabels (line 675) | generateLabels(chart) {
FILE: src/plugins/plugin.subtitle.js
method start (line 9) | start(chart, _args, options) {
method stop (line 21) | stop(chart) {
method beforeUpdate (line 26) | beforeUpdate(chart, _args, options) {
FILE: src/plugins/plugin.title.js
class Title (line 7) | class Title extends Element {
method constructor (line 11) | constructor(config) {
method update (line 29) | update(maxWidth, maxHeight) {
method isHorizontal (line 54) | isHorizontal() {
method _drawArgs (line 59) | _drawArgs(offset) {
method draw (line 84) | draw() {
function createTitle (line 108) | function createTitle(chart, titleOpts) {
method start (line 129) | start(chart, _args, options) {
method stop (line 133) | stop(chart) {
method beforeUpdate (line 139) | beforeUpdate(chart, _args, options) {
FILE: src/plugins/plugin.tooltip.js
method average (line 21) | average(items) {
method nearest (line 57) | nearest(items, eventPosition) {
function pushOrConcat (line 94) | function pushOrConcat(base, toPush) {
function splitNewlines (line 113) | function splitNewlines(str) {
function createTooltipItem (line 127) | function createTooltipItem(chart, item) {
function getTooltipSize (line 148) | function getTooltipSize(tooltip, options) {
function determineYAlign (line 223) | function determineYAlign(chart, size) {
function doesNotFitWithAlign (line 234) | function doesNotFitWithAlign(xAlign, chart, options, size) {
function determineXAlign (line 246) | function determineXAlign(chart, options, size, yAlign) {
function determineAlignment (line 269) | function determineAlignment(chart, options, size) {
function alignX (line 278) | function alignX(size, xAlign) {
function alignY (line 288) | function alignY(size, yAlign, paddingAndSize) {
function getBackgroundPoint (line 304) | function getBackgroundPoint(options, size, alignment, chart) {
function getAlignedX (line 331) | function getAlignedX(tooltip, align, options) {
function getBeforeAfterBodyLines (line 344) | function getBeforeAfterBodyLines(callback) {
function createTooltipContext (line 348) | function createTooltipContext(parent, tooltip, tooltipItems) {
function overrideCallbacks (line 356) | function overrideCallbacks(callbacks, context) {
method title (line 364) | title(tooltipItems) {
method label (line 388) | label(tooltipItem) {
method labelColor (line 404) | labelColor(tooltipItem) {
method labelTextColor (line 416) | labelTextColor() {
method labelPointStyle (line 419) | labelPointStyle(tooltipItem) {
function invokeCallbackWithFallback (line 447) | function invokeCallbackWithFallback(callbacks, name, ctx, arg) {
class Tooltip (line 457) | class Tooltip extends Element {
method constructor (line 464) | constructor(config) {
method initialize (line 498) | initialize(options) {
method _resolveAnimations (line 507) | _resolveAnimations() {
method getContext (line 528) | getContext() {
method getTitle (line 533) | getTitle(context, options) {
method getBeforeBody (line 548) | getBeforeBody(tooltipItems, options) {
method getBody (line 554) | getBody(tooltipItems, options) {
method getAfterBody (line 575) | getAfterBody(tooltipItems, options) {
method getFooter (line 582) | getFooter(tooltipItems, options) {
method _createItems (line 600) | _createItems(options) {
method update (line 638) | update(changed, replay) {
method drawCaret (line 691) | drawCaret(tooltipPoint, ctx, size, options) {
method getCaretPosition (line 699) | getCaretPosition(tooltipPoint, size, options) {
method drawTitle (line 756) | drawTitle(pt, ctx, options) {
method _drawColorBox (line 789) | _drawColorBox(ctx, pt, i, rtlHelper, options) {
method drawBody (line 871) | drawBody(pt, ctx, options) {
method drawFooter (line 935) | drawFooter(pt, ctx, options) {
method drawBackground (line 961) | drawBackground(pt, ctx, tooltipSize, options) {
method _updateAnimationTarget (line 1006) | _updateAnimationTarget(options) {
method _willRender (line 1036) | _willRender() {
method draw (line 1040) | draw(ctx) {
method getActiveElements (line 1097) | getActiveElements() {
method setActiveElements (line 1106) | setActiveElements(activeElements, eventPosition) {
method handleEvent (line 1139) | handleEvent(e, replay, inChartArea = true) {
method _getActiveElements (line 1183) | _getActiveElements(e, lastActive, replay, inChartArea) {
method _positionChanged (line 1216) | _positionChanged(active, e) {
method afterInit (line 1228) | afterInit(chart, _args, options) {
method beforeUpdate (line 1234) | beforeUpdate(chart, _args, options) {
method reset (line 1240) | reset(chart, _args, options) {
method afterDraw (line 1246) | afterDraw(chart) {
method afterEvent (line 1264) | afterEvent(chart, args) {
FILE: src/scales/scale.category.js
function findOrAddLabel (line 14) | function findOrAddLabel(labels, raw, index, addedLabels) {
function _getLabelForValue (line 25) | function _getLabelForValue(value) {
class CategoryScale (line 34) | class CategoryScale extends Scale {
method constructor (line 47) | constructor(cfg) {
method init (line 56) | init(scaleOptions) {
method parse (line 70) | parse(raw, index) {
method determineDataLimits (line 80) | determineDataLimits() {
method buildTicks (line 97) | buildTicks() {
method getLabelForValue (line 116) | getLabelForValue(value) {
method configure (line 123) | configure() {
method getPixelForValue (line 133) | getPixelForValue(value) {
method getPixelForTick (line 143) | getPixelForTick(index) {
method getValueForPixel (line 151) | getValueForPixel(pixel) {
method getBasePixel (line 155) | getBasePixel() {
FILE: src/scales/scale.linear.js
class LinearScale (line 6) | class LinearScale extends LinearScaleBase {
method determineDataLimits (line 20) | determineDataLimits() {
method computeTickLimit (line 34) | computeTickLimit() {
method getPixelForValue (line 44) | getPixelForValue(value) {
method getValueForPixel (line 48) | getValueForPixel(pixel) {
FILE: src/scales/scale.linearbase.js
function generateTicks (line 25) | function generateTicks(generationOptions, dataRange) {
function relativeLabelSize (line 147) | function relativeLabelSize(value, minSpacing, {horizontal, minRotation}) {
class LinearScaleBase (line 154) | class LinearScaleBase extends Scale {
method constructor (line 156) | constructor(cfg) {
method parse (line 170) | parse(raw, index) { // eslint-disable-line no-unused-vars
method handleTickRangeOptions (line 181) | handleTickRangeOptions() {
method getTickLimit (line 213) | getTickLimit() {
method computeTickLimit (line 240) | computeTickLimit() {
method buildTicks (line 244) | buildTicks() {
method configure (line 293) | configure() {
method getLabelForValue (line 310) | getLabelForValue(value) {
FILE: src/scales/scale.logarithmic.js
function isMajor (line 11) | function isMajor(tickVal) {
function steps (line 16) | function steps(min, max, rangeExp) {
function startExp (line 23) | function startExp(min, max) {
function generateTicks (line 42) | function generateTicks(generationOptions, {min, max}) {
class LogarithmicScale (line 74) | class LogarithmicScale extends Scale {
method constructor (line 91) | constructor(cfg) {
method parse (line 103) | parse(raw, index) {
method determineDataLimits (line 112) | determineDataLimits() {
method handleTickRangeOptions (line 131) | handleTickRangeOptions() {
method buildTicks (line 160) | buildTicks() {
method getLabelForValue (line 192) | getLabelForValue(value) {
method configure (line 201) | configure() {
method getPixelForValue (line 210) | getPixelForValue(value) {
method getValueForPixel (line 222) | getValueForPixel(pixel) {
FILE: src/scales/scale.radialLinear.js
function getTickBackdropHeight (line 9) | function getTickBackdropHeight(opts) {
function measureLabelSize (line 19) | function measureLabelSize(ctx, font, label) {
function determineLimits (line 27) | function determineLimits(angle, pos, size, min, max) {
function fitWithPointLabels (line 49) | function fitWithPointLabels(scale) {
function updateLimits (line 118) | function updateLimits(limits, orig, angle, hLimits, vLimits) {
function createPointLabelItem (line 139) | function createPointLabelItem(scale, index, itemOpts) {
function isNotOverlapped (line 166) | function isNotOverlapped(item, area) {
function buildPointLabelItems (line 176) | function buildPointLabelItems(scale, labelSizes, padding) {
function getTextAlignForAngle (line 203) | function getTextAlignForAngle(angle) {
function leftForTextAlign (line 213) | function leftForTextAlign(x, w, align) {
function yForAngle (line 222) | function yForAngle(y, h, angle) {
function drawPointLabelBox (line 231) | function drawPointLabelBox(ctx, opts, item) {
function drawPointLabels (line 261) | function drawPointLabels(scale, labelCount) {
function pathRadiusLine (line 290) | function pathRadiusLine(scale, radius, circular, labelCount) {
function drawRadiusLine (line 307) | function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderO...
function createPointLabelContext (line 330) | function createPointLabelContext(parent, index, label) {
class RadialLinearScale (line 338) | class RadialLinearScale extends LinearScaleBase {
method callback (line 388) | callback(label) {
method constructor (line 412) | constructor(cfg) {
method setDimensions (line 426) | setDimensions() {
method determineDataLimits (line 436) | determineDataLimits() {
method computeTickLimit (line 450) | computeTickLimit() {
method generateTickLabels (line 454) | generateTickLabels(ticks) {
method fit (line 466) | fit() {
method setCenterPoint (line 476) | setCenterPoint(leftMovement, rightMovement, topMovement, bottomMovemen...
method getIndexAngle (line 482) | getIndexAngle(index) {
method getDistanceFromCenterForValue (line 489) | getDistanceFromCenterForValue(value) {
method getValueForDistanceFromCenter (line 502) | getValueForDistanceFromCenter(distance) {
method getPointLabelContext (line 511) | getPointLabelContext(index) {
method getPointPosition (line 520) | getPointPosition(index, distanceFromCenter, additionalAngle = 0) {
method getPointPositionForValue (line 529) | getPointPositionForValue(index, value) {
method getBasePosition (line 533) | getBasePosition(index) {
method getPointLabelPosition (line 537) | getPointLabelPosition(index) {
method drawBackground (line 550) | drawBackground() {
method drawGrid (line 567) | drawGrid() {
method drawBorder (line 624) | drawBorder() {}
method drawLabels (line 629) | drawLabels() {
method drawTitle (line 683) | drawTitle() {}
FILE: src/scales/scale.time.js
constant INTERVALS (line 16) | const INTERVALS = {
constant UNITS (line 31) | const UNITS = /** @type Unit[] */ /* #__PURE__ */ (Object.keys(INTERVALS));
function sorter (line 37) | function sorter(a, b) {
function parse (line 46) | function parse(scale, input) {
function determineUnitForAutoTicks (line 87) | function determineUnitForAutoTicks(minUnit, min, max, capacity) {
function determineUnitForFormatting (line 111) | function determineUnitForFormatting(scale, numTicks, minUnit, min, max) {
function determineMajorUnit (line 126) | function determineMajorUnit(unit) {
function addTick (line 139) | function addTick(ticks, time, timestamps) {
function setMajorTicks (line 156) | function setMajorTicks(scale, ticks, map, majorUnit) {
function ticksFromTimestamps (line 177) | function ticksFromTimestamps(scale, values, majorUnit) {
class TimeScale (line 199) | class TimeScale extends Scale {
method constructor (line 247) | constructor(props) {
method init (line 266) | init(scaleOpts, opts = {}) {
method parse (line 295) | parse(raw, index) { // eslint-disable-line no-unused-vars
method beforeLayout (line 302) | beforeLayout() {
method determineDataLimits (line 311) | determineDataLimits() {
method _getLabelBounds (line 353) | _getLabelBounds() {
method buildTicks (line 368) | buildTicks() {
method afterAutoSkip (line 401) | afterAutoSkip() {
method initOffsets (line 417) | initOffsets(timestamps = []) {
method _generate (line 450) | _generate() {
method getLabelForValue (line 495) | getLabelForValue(value) {
method format (line 510) | format(value, format) {
method _tickFormatFunction (line 527) | _tickFormatFunction(time, index, ticks, format) {
method generateTickLabels (line 549) | generateTickLabels(ticks) {
method getDecimalForValue (line 562) | getDecimalForValue(value) {
method getPixelForValue (line 570) | getPixelForValue(value) {
method getValueForPixel (line 580) | getValueForPixel(pixel) {
method _getLabelSize (line 591) | _getLabelSize(label) {
method _getLabelCapacity (line 610) | _getLabelCapacity(exampleTime) {
method getDataTimestamps (line 627) | getDataTimestamps() {
method getLabelTimestamps (line 651) | getLabelTimestamps() {
method normalize (line 671) | normalize(values) {
FILE: src/scales/scale.timeseries.js
function interpolate (line 12) | function interpolate(table, val, reverse) {
class TimeSeriesScale (line 34) | class TimeSeriesScale extends TimeScale {
method constructor (line 46) | constructor(props) {
method initOffsets (line 60) | initOffsets() {
method buildLookupTable (line 79) | buildLookupTable(timestamps) {
method _generate (line 119) | _generate() {
method _getTimestampsForTable (line 137) | _getTimestampsForTable() {
method getDecimalForValue (line 162) | getDecimalForValue(value) {
method getValueForPixel (line 170) | getValueForPixel(pixel) {
FILE: src/types/animation.d.ts
class Animation (line 4) | class Animation {
type AnimationEvent (line 13) | interface AnimationEvent {
class Animator (line 20) | class Animator {
class Animations (line 30) | class Animations {
FILE: src/types/basic.d.ts
type AnyObject (line 2) | type AnyObject = Record<string, any>;
type EmptyObject (line 3) | type EmptyObject = Record<string, never>;
FILE: src/types/color.d.ts
type Color (line 1) | type Color = string | CanvasGradient | CanvasPattern;
FILE: src/types/geometric.d.ts
type ChartArea (line 1) | interface ChartArea {
type Point (line 10) | interface Point {
type TRBL (line 15) | type TRBL = {
type TRBLCorners (line 22) | type TRBLCorners = {
type CornerRadius (line 29) | type CornerRadius = number | Partial<TRBLCorners>;
type RoundedRect (line 31) | type RoundedRect = {
type Padding (line 39) | type Padding = Partial<TRBL> | number | Point;
type SplinePoint (line 41) | interface SplinePoint {
FILE: src/types/index.d.ts
type ScriptableContext (line 23) | interface ScriptableContext<TType extends ChartType> {
type ScriptableLineSegmentContext (line 35) | interface ScriptableLineSegmentContext {
type Scriptable (line 44) | type Scriptable<T, TContext> = T | ((ctx: TContext, options: AnyObject) ...
type ScriptableOptions (line 45) | type ScriptableOptions<T, TContext> = { [P in keyof T]: Scriptable<T[P],...
type ScriptableAndScriptableOptions (line 46) | type ScriptableAndScriptableOptions<T, TContext> = Scriptable<T, TContex...
type ScriptableAndArray (line 47) | type ScriptableAndArray<T, TContext> = readonly T[] | Scriptable<T, TCon...
type ScriptableAndArrayOptions (line 48) | type ScriptableAndArrayOptions<T, TContext> = { [P in keyof T]: Scriptab...
type ParsingOptions (line 50) | interface ParsingOptions {
type ControllerDatasetOptions (line 66) | interface ControllerDatasetOptions extends ParsingOptions {
type BarControllerDatasetOptions (line 96) | interface BarControllerDatasetOptions
type BarControllerChartOptions (line 149) | interface BarControllerChartOptions {
type BarController (line 156) | type BarController = DatasetController
type BubbleControllerDatasetOptions (line 162) | interface BubbleControllerDatasetOptions
type BubbleDataPoint (line 176) | interface BubbleDataPoint extends Point {
type BubbleController (line 183) | type BubbleController = DatasetController
type LineControllerDatasetOptions (line 189) | interface LineControllerDatasetOptions
type LineControllerChartOptions (line 216) | interface LineControllerChartOptions {
type LineController (line 229) | type LineController = DatasetController
type ScatterControllerDatasetOptions (line 235) | type ScatterControllerDatasetOptions = LineControllerDatasetOptions;
type ScatterDataPoint (line 237) | type ScatterDataPoint = Point
type ScatterControllerChartOptions (line 239) | type ScatterControllerChartOptions = LineControllerChartOptions;
type ScatterController (line 241) | type ScatterController = LineController
type DoughnutControllerDatasetOptions (line 247) | interface DoughnutControllerDatasetOptions
type DoughnutAnimationOptions (line 284) | interface DoughnutAnimationOptions extends AnimationSpec<'doughnut'> {
type DoughnutControllerChartOptions (line 298) | interface DoughnutControllerChartOptions {
type DoughnutDataPoint (line 338) | type DoughnutDataPoint = number;
type DoughnutController (line 340) | interface DoughnutController extends DatasetController {
type DoughnutMetaExtensions (line 355) | interface DoughnutMetaExtensions {
type PieControllerDatasetOptions (line 359) | type PieControllerDatasetOptions = DoughnutControllerDatasetOptions;
type PieControllerChartOptions (line 360) | type PieControllerChartOptions = DoughnutControllerChartOptions;
type PieAnimationOptions (line 361) | type PieAnimationOptions = DoughnutAnimationOptions;
type PieDataPoint (line 363) | type PieDataPoint = DoughnutDataPoint;
type PieMetaExtensions (line 364) | type PieMetaExtensions = DoughnutMetaExtensions;
type PieController (line 366) | type PieController = DoughnutController
type PolarAreaControllerDatasetOptions (line 372) | interface PolarAreaControllerDatasetOptions extends DoughnutControllerDa...
type PolarAreaAnimationOptions (line 380) | type PolarAreaAnimationOptions = DoughnutAnimationOptions;
type PolarAreaControllerChartOptions (line 382) | interface PolarAreaControllerChartOptions {
type PolarAreaController (line 392) | interface PolarAreaController extends DoughnutController {
type RadarControllerDatasetOptions (line 400) | interface RadarControllerDatasetOptions
type RadarControllerChartOptions (line 425) | type RadarControllerChartOptions = LineControllerChartOptions;
type RadarController (line 427) | type RadarController = DatasetController
type ChartMetaClip (line 433) | interface ChartMetaClip {
type ChartMetaCommon (line 441) | interface ChartMetaCommon<TElement extends Element = Element, TDatasetEl...
type ChartMeta (line 477) | type ChartMeta<
type ActiveDataPoint (line 485) | interface ActiveDataPoint {
type ActiveElement (line 490) | interface ActiveElement extends ActiveDataPoint {
class Chart (line 494) | class Chart<
type ChartItem (line 573) | type ChartItem =
type UpdateModeEnum (line 580) | enum UpdateModeEnum {
type UpdateMode (line 590) | type UpdateMode = keyof typeof UpdateModeEnum;
class DatasetController (line 592) | class DatasetController<
type DatasetControllerChartComponent (line 669) | interface DatasetControllerChartComponent extends ChartComponent {
type Defaults (line 676) | interface Defaults extends CoreChartOptions<ChartType>, ElementChartOpti...
type Overrides (line 710) | type Overrides = {
type InteractionOptions (line 721) | interface InteractionOptions {
type InteractionItem (line 727) | interface InteractionItem {
type InteractionModeFunction (line 733) | type InteractionModeFunction = (
type InteractionModeMap (line 740) | interface InteractionModeMap {
type InteractionMode (line 771) | type InteractionMode = keyof InteractionModeMap;
type Plugin (line 826) | interface Plugin<TType extends ChartType = ChartType, O = AnyObject> ext...
type ChartComponentLike (line 1136) | type ChartComponentLike = ChartComponent | ChartComponent[] | { [key: st...
type Registry (line 1142) | interface Registry {
type Tick (line 1164) | interface Tick {
type CoreScaleOptions (line 1170) | interface CoreScaleOptions {
type Scale (line 1273) | interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends E...
class Scale (line 1385) | class Scale {
type ScriptableScaleContext (line 1389) | interface ScriptableScaleContext {
type ScriptableScalePointLabelContext (line 1396) | interface ScriptableScalePointLabelContext {
type RenderTextOpts (line 1404) | interface RenderTextOpts {
type BackdropOptions (line 1473) | interface BackdropOptions {
type LabelItem (line 1500) | interface LabelItem {
type TypedRegistry (line 1534) | interface TypedRegistry<T> {
type ChartEvent (line 1544) | interface ChartEvent {
type ChartComponent (line 1562) | interface ChartComponent {
type InteractionAxis (line 1573) | type InteractionAxis = 'x' | 'y' | 'xy' | 'r';
type CoreInteractionOptions (line 1575) | interface CoreInteractionOptions {
type CoreChartOptions (line 1599) | interface CoreChartOptions<TType extends ChartType> extends ParsingOptio...
type AnimationSpec (line 1711) | type AnimationSpec<TType extends ChartType> = {
type AnimationsSpec (line 1736) | type AnimationsSpec<TType extends ChartType> = {
type TransitionSpec (line 1758) | type TransitionSpec<TType extends ChartType> = {
type TransitionsSpec (line 1763) | type TransitionsSpec<TType extends ChartType> = {
type AnimationOptions (line 1767) | type AnimationOptions<TType extends ChartType> = {
type FontSpec (line 1782) | interface FontSpec {
type CanvasFontSpec (line 1809) | interface CanvasFontSpec extends FontSpec {
type TextAlign (line 1813) | type TextAlign = 'left' | 'center' | 'right';
type Align (line 1814) | type Align = 'start' | 'center' | 'end';
type VisualElement (line 1816) | interface VisualElement {
type CommonElementOptions (line 1825) | interface CommonElementOptions {
type CommonHoverOptions (line 1831) | interface CommonHoverOptions {
type Segment (line 1837) | interface Segment {
type ArcBorderRadius (line 1843) | interface ArcBorderRadius {
type ArcOptions (line 1850) | interface ArcOptions extends CommonElementOptions {
type ArcHoverOptions (line 1899) | interface ArcHoverOptions extends CommonHoverOptions {
type LineProps (line 1905) | interface LineProps {
type LineOptions (line 1909) | interface LineOptions extends CommonElementOptions {
type LineHoverOptions (line 1970) | interface LineHoverOptions extends CommonHoverOptions {
type LineElement (line 1977) | interface LineElement<T extends LineProps = LineProps, O extends LineOpt...
type PointStyle (line 1995) | type PointStyle =
type PointOptions (line 2010) | interface PointOptions extends CommonElementOptions {
type PointHoverOptions (line 2038) | interface PointHoverOptions extends CommonHoverOptions {
type PointPrefixedOptions (line 2046) | interface PointPrefixedOptions {
type PointPrefixedHoverOptions (line 2077) | interface PointPrefixedHoverOptions {
type BarProps (line 2096) | interface BarProps extends Point {
type BarOptions (line 2103) | interface BarOptions extends Omit<CommonElementOptions, 'borderWidth'> {
type BorderRadius (line 2135) | interface BorderRadius {
type BarHoverOptions (line 2142) | interface BarHoverOptions extends CommonHoverOptions {
type BarElement (line 2146) | interface BarElement<
type ElementOptionsByType (line 2156) | interface ElementOptionsByType<TType extends ChartType> {
type ElementChartOptions (line 2163) | type ElementChartOptions<TType extends ChartType = ChartType> = {
class BasePlatform (line 2167) | class BasePlatform {
class BasicPlatform (line 2224) | class BasicPlatform extends BasePlatform {}
class DomPlatform (line 2225) | class DomPlatform extends BasePlatform {}
type DecimationAlgorithm (line 2229) | const enum DecimationAlgorithm {
type BaseDecimationOptions (line 2233) | interface BaseDecimationOptions {
type LttbDecimationOptions (line 2238) | interface LttbDecimationOptions extends BaseDecimationOptions {
type MinMaxDecimationOptions (line 2243) | interface MinMaxDecimationOptions extends BaseDecimationOptions {
type DecimationOptions (line 2247) | type DecimationOptions = LttbDecimationOptions | MinMaxDecimationOptions;
type FillerOptions (line 2250) | interface FillerOptions {
type FillTarget (line 2255) | type FillTarget = number | string | { value: number } | 'start' | 'end' ...
type ComplexFillTarget (line 2257) | interface ComplexFillTarget {
type FillerControllerDatasetOptions (line 2272) | interface FillerControllerDatasetOptions {
type LegendItem (line 2281) | interface LegendItem {
type LegendElement (line 2369) | interface LegendElement<TType extends ChartType> extends Element<AnyObje...
type LegendOptions (line 2377) | interface LegendOptions<TType extends ChartType> {
type TitleOptions (line 2534) | interface TitleOptions {
type TooltipXAlignment (line 2573) | type TooltipXAlignment = 'left' | 'center' | 'right';
type TooltipYAlignment (line 2574) | type TooltipYAlignment = 'top' | 'center' | 'bottom';
type TooltipLabelStyle (line 2575) | interface TooltipLabelStyle {
type TooltipModel (line 2603) | interface TooltipModel<TType extends ChartType> extends Element<AnyObjec...
type TooltipPosition (line 2657) | interface TooltipPosition extends Point {
type TooltipPositionerFunction (line 2662) | type TooltipPositionerFunction<TType extends ChartType> = (
type TooltipPositionerMap (line 2668) | interface TooltipPositionerMap {
type TooltipPositioner (line 2673) | type TooltipPositioner = keyof TooltipPositionerMap;
type Tooltip (line 2675) | interface Tooltip extends Plugin {
type TooltipDatasetCallbacks (line 2681) | interface TooltipDatasetCallbacks<
type TooltipCallbacks (line 2694) | interface TooltipCallbacks<
type ExtendedPlugin (line 2719) | interface ExtendedPlugin<
type ScriptableTooltipContext (line 2744) | interface ScriptableTooltipContext<TType extends ChartType> {
type TooltipOptions (line 2750) | interface TooltipOptions<TType extends ChartType = ChartType> extends Co...
type TooltipDatasetOptions (line 2929) | interface TooltipDatasetOptions<TType extends ChartType = ChartType> {
type TooltipItem (line 2933) | interface TooltipItem<TType extends ChartType> {
type PluginDatasetOptionsByType (line 2980) | interface PluginDatasetOptionsByType<TType extends ChartType> {
type PluginOptionsByType (line 2984) | interface PluginOptionsByType<TType extends ChartType> {
type PluginChartOptions (line 2993) | interface PluginChartOptions<TType extends ChartType> {
type BorderOptions (line 2997) | interface BorderOptions {
type GridLineOptions (line 3015) | interface GridLineOptions {
type TickOptions (line 3070) | interface TickOptions {
type CartesianTickOptions (line 3134) | type CartesianTickOptions = TickOptions & {
type ScriptableCartesianScaleContext (line 3202) | interface ScriptableCartesianScaleContext {
type ScriptableChartContext (line 3207) | interface ScriptableChartContext {
type CartesianScaleOptions (line 3212) | interface CartesianScaleOptions extends CoreScaleOptions {
type CategoryScaleOptions (line 3299) | type CategoryScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
type CategoryScale (line 3305) | type CategoryScale<O extends CategoryScaleOptions = CategoryScaleOptions...
type LinearScaleOptions (line 3311) | type LinearScaleOptions = CartesianScaleOptions & {
type LinearScale (line 3354) | type LinearScale<O extends LinearScaleOptions = LinearScaleOptions> = Sc...
type LogarithmicScaleOptions (line 3360) | type LogarithmicScaleOptions = CartesianScaleOptions & {
type LogarithmicScale (line 3378) | type LogarithmicScale<O extends LogarithmicScaleOptions = LogarithmicSca...
type TimeScaleTimeOptions (line 3384) | type TimeScaleTimeOptions = {
type TimeScaleTickOptions (line 3421) | type TimeScaleTickOptions = {
type TimeScaleOptions (line 3439) | type TimeScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
type TimeScale (line 3472) | interface TimeScale<O extends TimeScaleOptions = TimeScaleOptions> exten...
type TimeSeriesScale (line 3484) | type TimeSeriesScale<O extends TimeScaleOptions = TimeScaleOptions> = Ti...
type RadialTickOptions (line 3490) | type RadialTickOptions = TickOptions & {
type RadialLinearScaleOptions (line 3518) | type RadialLinearScaleOptions = CoreScaleOptions & {
type RadialLinearScale (line 3631) | interface RadialLinearScale<O extends RadialLinearScaleOptions = RadialL...
type CartesianScaleTypeRegistry (line 3649) | interface CartesianScaleTypeRegistry {
type RadialScaleTypeRegistry (line 3667) | interface RadialScaleTypeRegistry {
type ScaleTypeRegistry (line 3673) | interface ScaleTypeRegistry extends CartesianScaleTypeRegistry, RadialSc...
type ScaleType (line 3676) | type ScaleType = keyof ScaleTypeRegistry;
type CartesianParsedData (line 3678) | interface CartesianParsedData extends Point {
type BarParsedData (line 3689) | interface BarParsedData extends CartesianParsedData {
type BubbleParsedData (line 3701) | interface BubbleParsedData extends CartesianParsedData {
type RadialParsedData (line 3706) | interface RadialParsedData {
type ChartTypeRegistry (line 3710) | interface ChartTypeRegistry {
type ChartType (line 3777) | type ChartType = keyof ChartTypeRegistry;
type ScaleOptionsByType (line 3779) | type ScaleOptionsByType<TScale extends ScaleType = ScaleType> =
type ScaleOptions (line 3784) | type ScaleOptions<TScale extends ScaleType = ScaleType> = DeepPartial<Sc...
type DatasetChartOptions (line 3786) | type DatasetChartOptions<TType extends ChartType = ChartType> = {
type ScaleChartOptions (line 3792) | type ScaleChartOptions<TType extends ChartType = ChartType> = {
type ChartOptions (line 3798) | type ChartOptions<TType extends ChartType = ChartType> = Exclude<
type DefaultDataPoint (line 3810) | type DefaultDataPoint<TType extends ChartType> = DistributiveArray<Chart...
type ParsedDataType (line 3812) | type ParsedDataType<TType extends ChartType = ChartType> = ChartTypeRegi...
type ChartDatasetProperties (line 3814) | interface ChartDatasetProperties<TType extends ChartType, TData> {
type ChartDatasetPropertiesCustomTypesPerDataset (line 3819) | interface ChartDatasetPropertiesCustomTypesPerDataset<TType extends Char...
type ChartDataset (line 3824) | type ChartDataset<
type ChartDatasetCustomTypesPerDataset (line 3833) | type ChartDatasetCustomTypesPerDataset<
type ChartData (line 3847) | interface ChartData<
type ChartDataCustomTypesPerDataset (line 3858) | interface ChartDataCustomTypesPerDataset<
type ChartConfiguration (line 3869) | interface ChartConfiguration<
type ChartConfigurationCustomTypesPerDataset (line 3881) | interface ChartConfigurationCustomTypesPerDataset<
FILE: src/types/layout.d.ts
type LayoutPosition (line 3) | type LayoutPosition = 'left' | 'top' | 'right' | 'bottom' | 'center' | '...
type LayoutItem (line 5) | interface LayoutItem {
FILE: src/types/utils.d.ts
type DeepPartial (line 6) | type DeepPartial<T> = T extends Function
type _DeepPartialArray (line 14) | type _DeepPartialArray<T> = Array<DeepPartial<T>>
type _DeepPartialObject (line 15) | type _DeepPartialObject<T> = { [P in keyof T]?: DeepPartial<T[P]> };
type DistributiveArray (line 17) | type DistributiveArray<T> = [T] extends [unknown] ? Array<T> : never
type UnionToIntersection (line 20) | type UnionToIntersection<U> = (U extends unknown ? (k: U) => void : neve...
type AllKeys (line 22) | type AllKeys<T> = T extends any ? keyof T : never;
type PickType (line 24) | type PickType<T, K extends AllKeys<T>> = T extends { [k in K]?: any }
type Merge (line 28) | type Merge<T extends object> = {
FILE: test/fixtures/controller.bar/stacking/issue-9105.js
method run (line 44) | run(chart) {
FILE: test/fixtures/controller.bar/stacking/remove-dataset.js
method run (line 97) | run(chart) {
FILE: test/fixtures/controller.bar/stacking/replace-data.js
method run (line 41) | run(chart) {
FILE: test/fixtures/controller.bubble/hover-radius-zero.js
method run (line 39) | run(chart) {
FILE: test/fixtures/controller.bubble/padding-update.js
method run (line 20) | run(chart) {
FILE: test/fixtures/controller.doughnut/doughnut-animation.js
method afterInit (line 45) | afterInit(chart) {
FILE: test/fixtures/controller.doughnut/doughnut-full-to-semi.js
method run (line 28) | run(chart) {
FILE: test/fixtures/controller.doughnut/doughnut-hidden-single.js
method run (line 37) | run(chart) {
FILE: test/fixtures/controller.doughnut/doughnut-hidden.js
method afterInit (line 36) | afterInit(chart) {
FILE: test/fixtures/controller.doughnut/doughnut-set-active-elements.js
method run (line 22) | run(chart) {
FILE: test/fixtures/controller.doughnut/event-replay.js
function drawMousePoint (line 1) | function drawMousePoint(ctx, center) {
method run (line 29) | async run(chart) {
FILE: test/fixtures/controller.line/fill/no-border.js
method run (line 37) | run() {
FILE: test/fixtures/controller.line/segments/range.js
function x (line 1) | function x(ctx, {min = -Infinity, max = Infinity}) {
function y (line 5) | function y(ctx, {min = -Infinity, max = Infinity}) {
function xy (line 9) | function xy(ctx, xr, yr) {
FILE: test/fixtures/controller.line/segments/slope.js
function slope (line 1) | function slope({p0, p1}) {
FILE: test/fixtures/controller.line/stacking/updates.js
method run (line 35) | run(chart) {
FILE: test/fixtures/controller.scatter/showLine/changed.js
method run (line 29) | run(chart) {
FILE: test/fixtures/core.interaction/drawActiveElementsOnTop-false.js
method run (line 36) | async run(chart) {
FILE: test/fixtures/core.interaction/nearest-partial-bar.js
method run (line 34) | async run(chart) {
FILE: test/fixtures/core.interaction/nearest-point-behind-scale.js
method run (line 40) | async run(chart) {
FILE: test/fixtures/core.scale/ticks/rotated-long.js
method afterDraw (line 31) | afterDraw(chart) {
FILE: test/fixtures/core.scale/ticks/rotated-multi-line.js
method afterDraw (line 31) | afterDraw(chart) {
FILE: test/fixtures/plugin.colors/dynamic-datasets-default.js
method run (line 34) | run(chart) {
FILE: test/fixtures/plugin.colors/dynamic-datasets-force-override.js
method run (line 35) | run(chart) {
FILE: test/fixtures/plugin.filler/line/points-outside-canvas-update.js
method run (line 29) | run(chart) {
FILE: test/fixtures/plugin.filler/line/segments/slope.js
function slope (line 1) | function slope({p0, p1}) {
FILE: test/fixtures/plugin.legend/horizontal-rtl-hitbox.js
method afterDraw (line 30) | afterDraw(chart) {
FILE: test/fixtures/plugin.legend/padding/add-column.js
method run (line 33) | run(chart) {
FILE: test/fixtures/plugin.tooltip/point-style.js
function newDataset (line 3) | function newDataset(pointStyle, i) {
FILE: test/fixtures/scale.time/data-ty.js
function newDateFromRef (line 1) | function newDateFromRef(days) {
FILE: test/fixtures/scale.time/data-xy.js
function newDateFromRef (line 1) | function newDateFromRef(days) {
FILE: test/fixtures/scale.time/labels-date.js
function newDateFromRef (line 1) | function newDateFromRef(days) {
FILE: test/integration/react-browser/src/App.tsx
function App (line 7) | function App() {
FILE: test/integration/react-browser/src/AppAuto.tsx
function AppAuto (line 5) | function AppAuto() {
FILE: test/specs/controller.bar.tests.js
function unevenChart (line 1703) | function unevenChart() {
FILE: test/specs/controller.line.tests.js
function createChart (line 47) | function createChart() {
function createChart (line 926) | function createChart() {
FILE: test/specs/core.animator.tests.js
method afterDraw (line 29) | afterDraw() {
FILE: test/specs/core.controller.tests.js
function createChart (line 28) | function createChart() {
function createChart (line 206) | function createChart() {
method onResize (line 635) | onResize(chart, newSize) {
function iterateOptions (line 1943) | function iterateOptions() {
FILE: test/specs/core.datasetController.tests.js
function createAndUpdateChart (line 44) | function createAndUpdateChart() {
function createChart (line 90) | function createChart() {
function createChart (line 116) | function createChart() {
function createChart (line 142) | function createChart() {
function animationsExpectations (line 1069) | function animationsExpectations(anims, props) {
FILE: test/specs/core.layouts.tests.js
function getLabels (line 1) | function getLabels(scale) {
FILE: test/specs/core.registry.tests.js
class CustomController (line 3) | class CustomController extends Chart.DatasetController {}
class CustomScale (line 27) | class CustomScale extends Chart.Scale {}
class CustomElement (line 46) | class CustomElement extends Chart.Element {}
class CustomPlugin (line 65) | class CustomPlugin {}
class FaultyPlugin (line 88) | class FaultyPlugin {}
class customExtension (line 102) | class customExtension {}
class custom (line 170) | class custom {}
class testController (line 210) | class testController extends Chart.DatasetController {}
class test1 (line 225) | class test1 extends Chart.DatasetController {}
class test2 (line 227) | class test2 extends Chart.Scale {}
FILE: test/specs/core.scale.tests.js
function getLabels (line 1) | function getLabels(scale) {
function getChart (line 21) | function getChart(data) {
function getChartBigData (line 37) | function getChartBigData(maxTicksLimit) {
function lastTick (line 59) | function lastTick(chart) {
function createChart (line 485) | function createChart() {
class CustomScale (line 514) | class CustomScale extends Chart.Scale {
method draw (line 515) | draw() {}
method convertTicksToLabels (line 516) | convertTicksToLabels() {
class CustomScale1 (line 547) | class CustomScale1 extends Chart.Scale {
method draw (line 548) | draw() {}
method convertTicksToLabels (line 549) | convertTicksToLabels() {
class CustomScale2 (line 580) | class CustomScale2 extends Chart.Scale {
method draw (line 581) | draw() {}
function createChart (line 587) | function createChart() {
function getChartWithScaleTitleStroke (line 821) | function getChartWithScaleTitleStroke() {
function getChartWithoutScaleTitleStroke (line 851) | function getChartWithoutScaleTitleStroke() {
FILE: test/specs/core.ticks.tests.js
function getLabels (line 1) | function getLabels(scale) {
FILE: test/specs/helpers.canvas.tests.js
function createAndClearChart (line 26) | function createAndClearChart() {
FILE: test/specs/helpers.color.tests.js
function isColorInstance (line 4) | function isColorInstance(obj) {
FILE: test/specs/helpers.config.tests.js
class Options (line 71) | class Options {
method constructor (line 72) | constructor() {
method getter (line 75) | get getter() {
method constructor (line 727) | constructor() {
method getter (line 730) | get getter() {
function create (line 103) | function create() {
function set (line 516) | function set() {
class Options (line 726) | class Options {
method constructor (line 72) | constructor() {
method getter (line 75) | get getter() {
method constructor (line 727) | constructor() {
method getter (line 730) | get getter() {
class MyClass (line 797) | class MyClass {
method constructor (line 798) | constructor() {
method method (line 801) | method(arg) {
FILE: test/specs/helpers.easing.tests.js
function generate (line 41) | function generate(method) {
FILE: test/specs/plugin.decimation.tests.js
function createChart (line 189) | function createChart() {
FILE: test/specs/plugin.filler.tests.js
function decodedFillValues (line 3) | function decodedFillValues(chart) {
FILE: test/specs/plugin.legend.tests.js
method onClick (line 922) | onClick() { }
FILE: test/specs/plugin.tooltip.tests.js
function testSlice (line 1192) | async function testSlice(slice, count) {
method beforeTitle (line 1873) | beforeTitle() {
method title (line 1876) | title() {
method afterTitle (line 1879) | afterTitle() {
method beforeBody (line 1882) | beforeBody() {
method beforeLabel (line 1885) | beforeLabel() {
method label (line 1888) | label() {
method afterLabel (line 1891) | afterLabel() {
method afterBody (line 1894) | afterBody() {
method beforeFooter (line 1897) | beforeFooter() {
method footer (line 1900) | footer() {
method afterFooter (line 1903) | afterFooter() {
method labelTextColor (line 1906) | labelTextColor() {
method labelPointStyle (line 1909) | labelPointStyle() {
FILE: test/specs/scale.category.tests.js
function getLabels (line 1) | function getLabels(scale) {
FILE: test/specs/scale.linear.tests.js
function getLabels (line 1) | function getLabels(scale) {
function createChart (line 1373) | function createChart() {
FILE: test/specs/scale.logarithmic.tests.js
function getLabels (line 1) | function getLabels(scale) {
FILE: test/specs/scale.radialLinear.tests.js
function getLabels (line 1) | function getLabels(scale) {
FILE: test/specs/scale.time.tests.js
function createScale (line 5) | function createScale(data, options, dimensions) {
function getLabels (line 27) | function getLabels(scale) {
method init (line 1287) | init(options) {
method callback (line 1324) | callback(value) {
FILE: test/types/date_adapter.ts
method init (line 4) | init() {
method format (line 11) | format(timestamp) {
FILE: test/types/extensions/scale.ts
type TestScaleOptions (line 4) | type TestScaleOptions = CartesianScaleOptions & {
class TestScale (line 8) | class TestScale<O extends TestScaleOptions = TestScaleOptions> extends S...
method getBasePixel (line 11) | getBasePixel(): number {
method testMethod (line 15) | testMethod(): void {
type CartesianScaleTypeRegistry (line 21) | interface CartesianScaleTypeRegistry {
FILE: test/types/interaction.ts
type Item (line 10) | type Item = {
FILE: test/types/parsed.data.type.ts
type test (line 3) | interface test {
FILE: test/types/scales/options.ts
method callback (line 34) | callback(tickValue) {
function makeChartScale (line 44) | function makeChartScale(range: number): ScaleOptions<'linear'> {
FILE: test/types/scriptable.ts
type test (line 3) | interface test {
FILE: test/types/test_instance_assignment.ts
type Context (line 14) | interface Context {
Condensed preview — 1068 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,862K chars).
[
{
"path": ".browserslistrc",
"chars": 58,
"preview": "defaults\nnot IE 11\nnot IE_Mob 11\nmaintained node versions\n"
},
{
"path": ".codeclimate.yml",
"chars": 354,
"preview": "version: \"2\"\nplugins:\n duplication:\n enabled: true\n config:\n languages:\n - javascript\n fixme:\n en"
},
{
"path": ".editorconfig",
"chars": 219,
"preview": "# https://editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_t"
},
{
"path": ".eslintignore",
"chars": 40,
"preview": "dist/*\ntest/integration/react-browser/*\n"
},
{
"path": ".eslintrc.yml",
"chars": 1579,
"preview": "extends:\n - chartjs\n - plugin:es/restrict-to-es2018\n - plugin:markdown/recommended\n\nsettings:\n es:\n aggressive: t"
},
{
"path": ".github/ISSUE_TEMPLATE/bug.yml",
"chars": 3336,
"preview": "name: Bug Report\ndescription: Something went awry\nlabels: [\"type: bug\"]\nbody:\n - type: markdown\n attributes:\n v"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 233,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Support, Help, and Advice\n url: https://stackoverflow.com/questi"
},
{
"path": ".github/ISSUE_TEMPLATE/docs.yml",
"chars": 1256,
"preview": "name: Documentation\ndescription: Are the docs lacking or missing something?\nlabels: [\"type: documentation\"]\nbody:\n - ty"
},
{
"path": ".github/ISSUE_TEMPLATE/feature.yml",
"chars": 1008,
"preview": "name: Feature Request\ndescription: Suggest an idea\nlabels: [\"type: enhancement\"]\nbody:\n - type: markdown\n attributes"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 540,
"preview": "<!--\n Need help or support? Don't open an issue!\n Head to https://stackoverflow.com/questions/tagged/chart.js\n\n Ahoy!"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 383,
"preview": "<!--\nPlease consider the following before submitting a pull request:\n\nGuidelines for contributing: https://github.com/ch"
},
{
"path": ".github/dependabot.yml",
"chars": 118,
"preview": "version: 2\nupdates:\n - package-ecosystem: \"github-actions\"\n directory: \"/\"\n schedule:\n interval: \"weekly\"\n"
},
{
"path": ".github/release-drafter.yml",
"chars": 1303,
"preview": "name-template: 'v$RESOLVED_VERSION'\ntag-template: 'v$RESOLVED_VERSION'\ncategories:\n - title: 'Breaking Changes'\n lab"
},
{
"path": ".github/workflows/ci.yml",
"chars": 3132,
"preview": "name: CI\n\non:\n push:\n branches:\n - master\n - \"2.9\"\n pull_request:\n branches:\n - master\n - \"2"
},
{
"path": ".github/workflows/compressed-size.yml",
"chars": 639,
"preview": "name: Compressed Size\n\non: [pull_request]\n\npermissions:\n contents: read\n\njobs:\n build:\n\n permissions:\n checks:"
},
{
"path": ".github/workflows/deploy-docs.yml",
"chars": 1017,
"preview": "# This workflow publishes new documentation to https://chartjs.org/docs/master after every commit\nname: Deploy docs\n\non:"
},
{
"path": ".github/workflows/release-drafter.yml",
"chars": 708,
"preview": "name: Release Drafter\n\non:\n push:\n branches:\n - master\n workflow_dispatch:\n\npermissions:\n contents: read\n\njob"
},
{
"path": ".github/workflows/release.yml",
"chars": 3010,
"preview": "name: Release\n\non:\n release:\n types: [published]\n\npermissions:\n contents: read\n\njobs:\n setup:\n permissions:\n "
},
{
"path": ".gitignore",
"chars": 387,
"preview": "# Deployment\n/coverage\n/custom\n/dist\n/gh-pages\n\n# Node.js\nnode_modules/\nnpm-debug.log*\n\n# Docs\n.cache-loader\nbuild/\n\n# G"
},
{
"path": ".htmllintrc",
"chars": 318,
"preview": "{\n\t\"indent-style\": \"tabs\",\n\t\"line-end-style\": false,\n\t\"attr-quote-style\": \"double\",\n\t\"spec-char-escape\": false,\n\t\"attr-b"
},
{
"path": "LICENSE.md",
"chars": 1093,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2014-2024 Chart.js Contributors\n\nPermission is hereby granted, free of charge, to a"
},
{
"path": "MAINTAINING.md",
"chars": 1520,
"preview": "# Maintaining\n\n## Release Process\n\nChart.js relies on [Travis CI](https://travis-ci.org/) to automate the library [relea"
},
{
"path": "README.md",
"chars": 2605,
"preview": "<p align=\"center\">\n <a href=\"https://www.chartjs.org/\" target=\"_blank\">\n <img src=\"https://www.chartjs.org/media/log"
},
{
"path": "auto/auto.cjs",
"chars": 170,
"preview": "const chartjs = require('../dist/chart.cjs');\nconst {Chart, registerables} = chartjs;\n\nChart.register(...registerables);"
},
{
"path": "auto/auto.d.ts",
"chars": 97,
"preview": "import {Chart} from '../dist/types.js';\n\nexport * from '../dist/types.js';\nexport default Chart;\n"
},
{
"path": "auto/auto.js",
"chars": 147,
"preview": "import {Chart, registerables} from '../dist/chart.js';\n\nChart.register(...registerables);\n\nexport * from '../dist/chart."
},
{
"path": "auto/package.json",
"chars": 393,
"preview": "{\n \"name\": \"chart.js-auto\",\n \"private\": true,\n \"description\": \"Auto registering package. Exists to support bund"
},
{
"path": "composer.json",
"chars": 548,
"preview": "{\n \"name\": \"nnnick/chartjs\",\n \"type\": \"library\",\n \"description\": \"Simple HTML5 charts using the canvas element."
},
{
"path": "docs/.vuepress/config.ts",
"chars": 10686,
"preview": "import * as path from 'path';\nimport markdownItInclude from 'markdown-it-include';\nimport { DefaultThemeConfig, defineCo"
},
{
"path": "docs/.vuepress/redirects",
"chars": 163,
"preview": "/charts/ /charts/line.html\n/general/ /general/data-structures.html\n/samples/ /samples/information.html\n/getting-started/"
},
{
"path": "docs/.vuepress/styles/index.styl",
"chars": 989,
"preview": "@require '~vuepress-plugin-tabs/dist/themes/default.styl'\n\n.theme-default-content\n &:not(.custom)\n max-width: unset\n"
},
{
"path": "docs/axes/_common.md",
"chars": 1842,
"preview": "### Common options to all axes\n\nNamespace: `options.scales[scaleId]`\n\n| Name | Type | Default | Description\n| ---- | ---"
},
{
"path": "docs/axes/_common_ticks.md",
"chars": 1503,
"preview": "### Common tick options to all axes\n\nNamespace: `options.scales[scaleId].ticks`\n\n| Name | Type | Scriptable | Default | "
},
{
"path": "docs/axes/cartesian/_common.md",
"chars": 1190,
"preview": "### Common options to all cartesian axes\n\nNamespace: `options.scales[scaleId]`\n\n| Name | Type | Default | Description\n| "
},
{
"path": "docs/axes/cartesian/_common_ticks.md",
"chars": 2353,
"preview": "### Common tick options to all cartesian axes\n\nNamespace: `options.scales[scaleId].ticks`\n\n| Name | Type | Default | Des"
},
{
"path": "docs/axes/cartesian/category.md",
"chars": 2613,
"preview": "# Category Axis\n\nIf the global configuration is used, labels are drawn from one of the label arrays included in the char"
},
{
"path": "docs/axes/cartesian/index.md",
"chars": 9054,
"preview": "# Cartesian Axes\n\nAxes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar"
},
{
"path": "docs/axes/cartesian/linear.md",
"chars": 3023,
"preview": "# Linear Axis\n\nThe linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter"
},
{
"path": "docs/axes/cartesian/logarithmic.md",
"chars": 864,
"preview": "# Logarithmic Axis\n\nThe logarithmic scale is used to chart numerical data. It can be placed on either the x or y-axis. A"
},
{
"path": "docs/axes/cartesian/time.md",
"chars": 6487,
"preview": "# Time Cartesian Axis\n\nThe time scale is used to display times and dates. Data are spread according to the amount of tim"
},
{
"path": "docs/axes/cartesian/timeseries.md",
"chars": 490,
"preview": "# Time Series Axis\n\nThe time series scale extends from the time scale and supports all the same options. However, for th"
},
{
"path": "docs/axes/index.md",
"chars": 6663,
"preview": "# Axes\n\nAxes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In"
},
{
"path": "docs/axes/labelling.md",
"chars": 3161,
"preview": "# Labeling Axes\n\nWhen creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to "
},
{
"path": "docs/axes/radial/index.md",
"chars": 3361,
"preview": "# Radial Axes\n\nRadial axes are used specifically for the radar and polar area chart types. These axes overlay the chart "
},
{
"path": "docs/axes/radial/linear.md",
"chars": 9258,
"preview": "# Linear Radial Axis\n\nThe linear radial scale is used to chart numerical data. As the name suggests, linear interpolatio"
},
{
"path": "docs/axes/styling.md",
"chars": 3960,
"preview": "# Styling\n\nThere are a number of options to allow styling an axis. There are settings to control [grid lines](#grid-line"
},
{
"path": "docs/charts/area.md",
"chars": 3632,
"preview": "# Area Chart\n\nBoth [line](./line.md) and [radar](./radar.md) charts support a `fill` option on the dataset object which "
},
{
"path": "docs/charts/bar.md",
"chars": 14694,
"preview": "# Bar Chart\n\nA bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to sho"
},
{
"path": "docs/charts/bubble.md",
"chars": 5285,
"preview": "# Bubble Chart\n\nA bubble chart is used to display three dimensions of data at the same time. The location of the bubble "
},
{
"path": "docs/charts/doughnut.md",
"chars": 9397,
"preview": "# Doughnut and Pie Charts\n\nPie and doughnut charts are probably the most commonly used charts. They are divided into seg"
},
{
"path": "docs/charts/line.md",
"chars": 12424,
"preview": "# Line Chart\n\nA line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comp"
},
{
"path": "docs/charts/mixed.md",
"chars": 2603,
"preview": "# Mixed Chart Types\n\nWith Chart.js, it is possible to create mixed charts that are a combination of two or more differen"
},
{
"path": "docs/charts/polar.md",
"chars": 7030,
"preview": "# Polar Area Chart\n\nPolar area charts are similar to pie charts, but each segment has the same angle - the radius of the"
},
{
"path": "docs/charts/radar.md",
"chars": 8850,
"preview": "# Radar Chart\n\nA radar chart is a way of showing multiple data points and the variation between them.\n\nThey are often us"
},
{
"path": "docs/charts/scatter.md",
"chars": 1925,
"preview": "# Scatter Chart\n\nScatter charts are based on basic line charts with the x-axis changed to a linear axis. To use a scatte"
},
{
"path": "docs/configuration/animations.md",
"chars": 8785,
"preview": "# Animations\n\nChart.js animates charts out of the box. A number of options are provided to configure how the animation l"
},
{
"path": "docs/configuration/canvas-background.md",
"chars": 2990,
"preview": "# Canvas background\n\nIn some use cases you would want a background image or color over the whole canvas. There is no bui"
},
{
"path": "docs/configuration/decimation.md",
"chars": 2578,
"preview": "# Data Decimation\n\nThe decimation plugin can be used with line charts to automatically decimate data at the start of the"
},
{
"path": "docs/configuration/device-pixel-ratio.md",
"chars": 834,
"preview": "# Device Pixel Ratio\n\nBy default, the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a highe"
},
{
"path": "docs/configuration/elements.md",
"chars": 6430,
"preview": "# Elements\n\nWhile chart types provide settings to configure the styling of each dataset, you sometimes want to style **a"
},
{
"path": "docs/configuration/index.md",
"chars": 3331,
"preview": "# Configuration\n\nThe configuration is used to change how the chart behaves. There are properties to control styling, fon"
},
{
"path": "docs/configuration/interactions.md",
"chars": 9182,
"preview": "# Interactions\n\nNamespace: `options.interaction`, the global interaction configuration is at `Chart.defaults.interaction"
},
{
"path": "docs/configuration/layout.md",
"chars": 471,
"preview": "# Layout\n\nNamespace: `options.layout`, the global options for the chart layout is defined in `Chart.defaults.layout`.\n\n|"
},
{
"path": "docs/configuration/legend.md",
"chars": 9131,
"preview": "# Legend\n\nThe chart legend displays data about the datasets that are appearing on the chart.\n\n## Configuration options\n\n"
},
{
"path": "docs/configuration/locale.md",
"chars": 1084,
"preview": "# Locale\n\nFor applications where the numbers of ticks on scales must be formatted accordingly with a language sensitive "
},
{
"path": "docs/configuration/responsive.md",
"chars": 4792,
"preview": "# Responsive Charts\n\nWhen it comes to changing the chart size based on the window size, a major limitation is that the c"
},
{
"path": "docs/configuration/subtitle.md",
"chars": 803,
"preview": "# Subtitle\n\nSubtitle is a second title placed under the main title, by default. It has exactly the same configuration op"
},
{
"path": "docs/configuration/title.md",
"chars": 2289,
"preview": "# Title\n\nThe chart title defines text to draw at the top of the chart.\n\n## Title Configuration\n\nNamespace: `options.plug"
},
{
"path": "docs/configuration/tooltip.md",
"chars": 19840,
"preview": "# Tooltip\n\n## Tooltip Configuration\n\nNamespace: `options.plugins.tooltip`, the global options for the chart tooltips is "
},
{
"path": "docs/developers/api.md",
"chars": 9550,
"preview": "# API\n\nFor each chart, there are a set of global prototype methods on the shared chart type which you may find useful. T"
},
{
"path": "docs/developers/axes.md",
"chars": 4847,
"preview": "# New Axes\n\nAxes in Chart.js can be individually extended. Axes should always derive from `Chart.Scale` but this is not "
},
{
"path": "docs/developers/charts.md",
"chars": 4771,
"preview": "# New Charts\n\nChart.js 2.0 introduced the concept of controllers for each dataset. Like scales, new controllers can be w"
},
{
"path": "docs/developers/contributing.md",
"chars": 6718,
"preview": "# Contributing\n\nNew contributions to the library are welcome, but we ask that you please follow these guidelines:\n\n- Bef"
},
{
"path": "docs/developers/index.md",
"chars": 1722,
"preview": "# Developers\n\nDeveloper features allow extending and enhancing Chart.js in many different ways.\n\n## Latest resources\n\nTh"
},
{
"path": "docs/developers/plugin_flowcharts.drawio",
"chars": 11311,
"preview": "<mxfile host=\"app.diagrams.net\" modified=\"2022-08-02T22:40:51.791Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit"
},
{
"path": "docs/developers/plugins.md",
"chars": 6455,
"preview": "# Plugins\n\nPlugins are the most efficient way to customize or change the default behavior of a chart. They have been int"
},
{
"path": "docs/developers/publishing.md",
"chars": 1099,
"preview": "# Publishing an extension\n\nIf you are planning on publishing an extension for Chart.js, here are some pointers.\n\n## Awes"
},
{
"path": "docs/developers/updates.md",
"chars": 2910,
"preview": "# Updating Charts\n\nIt's pretty common to want to update charts after they've been created. When the chart data or option"
},
{
"path": "docs/general/accessibility.md",
"chars": 1470,
"preview": "# Accessibility\n\nChart.js charts are rendered on user provided `canvas` elements. Thus, it is up to the user to create t"
},
{
"path": "docs/general/colors.md",
"chars": 5064,
"preview": "# Colors\n\nCharts support three color options:\n* for geometric elements, you can change *background* and *border* colors;"
},
{
"path": "docs/general/data-structures.md",
"chars": 6105,
"preview": "# Data structures\n\nThe `data` property of a dataset can be passed in various formats. By default, that `data` is parsed "
},
{
"path": "docs/general/fonts.md",
"chars": 2332,
"preview": "# Fonts\n\nThere are special global settings that can change all the fonts on the chart. These options are in `Chart.defau"
},
{
"path": "docs/general/options.md",
"chars": 5296,
"preview": "# Options\n\n## Option resolution\n\nOptions are resolved from top to bottom, using a context dependent route.\n\n### Chart le"
},
{
"path": "docs/general/padding.md",
"chars": 1487,
"preview": "# Padding\n\nPadding values in Chart options can be supplied in a couple of different formats.\n\n## Number\n\nIf this value i"
},
{
"path": "docs/general/performance.md",
"chars": 7700,
"preview": "# Performance\n\nChart.js charts are rendered on `canvas` elements, which makes rendering quite fast. For large datasets o"
},
{
"path": "docs/getting-started/index.md",
"chars": 2224,
"preview": "# Getting Started\n\nLet's get started with Chart.js!\n\n* **[Follow a step-by-step guide](./usage) to get up to speed with "
},
{
"path": "docs/getting-started/installation.md",
"chars": 1540,
"preview": "# Installation\n\n## npm\n\n[](https://npmjs.c"
},
{
"path": "docs/getting-started/integration.md",
"chars": 4582,
"preview": "# Integration\n\nChart.js can be integrated with plain JavaScript or with different module loaders. The examples below sho"
},
{
"path": "docs/getting-started/usage.md",
"chars": 22331,
"preview": "# Step-by-step guide\n\nFollow this guide to get familiar with all major concepts of Chart.js: chart types and elements, d"
},
{
"path": "docs/getting-started/using-from-node-js.md",
"chars": 1005,
"preview": "# Using from Node.js\n\nYou can use Chart.js in Node.js for server-side generation of plots with help from an NPM package "
},
{
"path": "docs/index.md",
"chars": 4813,
"preview": "# Chart.js\n\nWelcome to Chart.js!\n\n* **[Get started with Chart.js](./getting-started/) — best if you're new to Chart.js**"
},
{
"path": "docs/migration/v3-migration.md",
"chars": 28936,
"preview": "# 3.x Migration Guide\n\nChart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released in April 2016. In"
},
{
"path": "docs/migration/v4-migration.md",
"chars": 3424,
"preview": "# 4.x Migration Guide\n\nChart.js 4.0 introduces a number of breaking changes. We tried keeping the amount of breaking cha"
},
{
"path": "docs/package.json",
"chars": 1009,
"preview": "{\n \"name\": \"docs\",\n \"private\": \"true\",\n \"version\": \"4.0.0-dev\",\n \"license\": \"MIT\",\n \"type\": \"module\",\n "
},
{
"path": "docs/samples/.eslintrc.yml",
"chars": 27,
"preview": "rules:\n no-console: \"off\"\n"
},
{
"path": "docs/samples/advanced/data-decimation.md",
"chars": 2737,
"preview": "# Data Decimation\n\nThis example shows how to use the built-in data decimation to reduce the number of points drawn on th"
},
{
"path": "docs/samples/advanced/derived-axis-type.md",
"chars": 991,
"preview": "# Derived Axis Type\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 12;\nconst NUMBER_CFG = {count: DATA_COUNT,"
},
{
"path": "docs/samples/advanced/derived-chart-type.md",
"chars": 931,
"preview": "# Derived Chart Type\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT,"
},
{
"path": "docs/samples/advanced/linear-gradient.md",
"chars": 2839,
"preview": "# Linear Gradient\n\n```js chart-editor\n// <block:actions:3>\nconst actions = [\n {\n name: 'Randomize',\n handler(char"
},
{
"path": "docs/samples/advanced/programmatic-events.md",
"chars": 2484,
"preview": "# Programmatic Event Triggers\n\n```js chart-editor\n// <block:hover:0>\nfunction triggerHover(chart) {\n if (chart.getActiv"
},
{
"path": "docs/samples/advanced/progress-bar.md",
"chars": 3775,
"preview": "# Animation Progress Bar\n\n## Initial animation\n\n<progress id=\"initialProgress\" max=\"1\" value=\"0\" style=\"width: 100%\"></p"
},
{
"path": "docs/samples/advanced/radial-gradient.md",
"chars": 2977,
"preview": "# Radial Gradient\n\n```js chart-editor\n// <block:setup:3>\nconst DATA_COUNT = 5;\nUtils.srand(110);\n\nconst chartColors = Ut"
},
{
"path": "docs/samples/animations/delay.md",
"chars": 1943,
"preview": "# Delay\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n "
},
{
"path": "docs/samples/animations/drop.md",
"chars": 3201,
"preview": "# Drop\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n "
},
{
"path": "docs/samples/animations/loop.md",
"chars": 3413,
"preview": "# Loop\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n "
},
{
"path": "docs/samples/animations/progressive-line-easing.md",
"chars": 4185,
"preview": "# Progressive Line With Easing\n\n```js chart-editor\n\n// <block:data:2>\nconst data = [];\nconst data2 = [];\nlet prev = 100;"
},
{
"path": "docs/samples/animations/progressive-line.md",
"chars": 2365,
"preview": "# Progressive Line\n\n```js chart-editor\n\n// <block:data:2>\nconst data = [];\nconst data2 = [];\nlet prev = 100;\nlet prev2 ="
},
{
"path": "docs/samples/area/line-boundaries.md",
"chars": 2381,
"preview": "# Line Chart Boundaries\n\n```js chart-editor\n// <block:setup:2>\nconst inputs = {\n min: -100,\n max: 100,\n count: 8,\n d"
},
{
"path": "docs/samples/area/line-datasets.md",
"chars": 3833,
"preview": "# Line Chart Datasets\n\n```js chart-editor\n// <block:setup:2>\nconst inputs = {\n min: 20,\n max: 80,\n count: 8,\n decima"
},
{
"path": "docs/samples/area/line-drawtime.md",
"chars": 2464,
"preview": "# Line Chart drawTime\n\n```js chart-editor\n// <block:setup:2>\nconst inputs = {\n min: -100,\n max: 100,\n count: 8,\n dec"
},
{
"path": "docs/samples/area/line-stacked.md",
"chars": 3995,
"preview": "# Line Chart Stacked\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Stacked: true',\n handl"
},
{
"path": "docs/samples/area/radar.md",
"chars": 3123,
"preview": "# Radar Chart Stacked\n\n```js chart-editor\n// <block:setup:1>\nconst inputs = {\n min: 8,\n max: 16,\n count: 8,\n decimal"
},
{
"path": "docs/samples/bar/border-radius.md",
"chars": 1620,
"preview": "# Bar Chart Border Radius\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n hand"
},
{
"path": "docs/samples/bar/floating.md",
"chars": 1571,
"preview": "# Floating Bars\n\nUsing `[number, number][]` as the type for `data` to define the beginning and end value for each bar. T"
},
{
"path": "docs/samples/bar/horizontal.md",
"chars": 2907,
"preview": "# Horizontal Bar Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler"
},
{
"path": "docs/samples/bar/stacked-groups.md",
"chars": 1804,
"preview": "# Stacked Bar Chart with Groups\n\nUsing the `stack` property to divide datasets into multiple stacks.\n\n```js chart-editor"
},
{
"path": "docs/samples/bar/stacked.md",
"chars": 1441,
"preview": "# Stacked Bar Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(ch"
},
{
"path": "docs/samples/bar/vertical.md",
"chars": 2631,
"preview": "# Vertical Bar Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(c"
},
{
"path": "docs/samples/information.md",
"chars": 1484,
"preview": "# Chart.js Samples\n\nYou can navigate through the samples via the sidebar.\n\nAlternatively, you can run them locally. To d"
},
{
"path": "docs/samples/legend/events.md",
"chars": 1496,
"preview": "# Events\n\nThis sample demonstrates how to use the event hooks to highlight chart elements.\n\n```js chart-editor\n\n// <bloc"
},
{
"path": "docs/samples/legend/html.md",
"chars": 4077,
"preview": "# HTML Legend\n\nThis example shows how to create a custom HTML legend using a plugin and connect it to the chart in lieu "
},
{
"path": "docs/samples/legend/point-style.md",
"chars": 1669,
"preview": "# Point Style\n\nThis sample show how to use the dataset point style in the legend instead of a rectangle to identify each"
},
{
"path": "docs/samples/legend/position.md",
"chars": 1498,
"preview": "# Position\n\nThis sample show how to change the position of the chart legend.\n\n```js chart-editor\n// <block:actions:2>\nco"
},
{
"path": "docs/samples/legend/title.md",
"chars": 1692,
"preview": "# Alignment and Title Position\n\nThis sample show how to configure the alignment and title position of the chart legend.\n"
},
{
"path": "docs/samples/line/interpolation.md",
"chars": 1667,
"preview": "# Interpolation Modes\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 12;\nconst labels = [];\nfor (let i = 0; i"
},
{
"path": "docs/samples/line/line.md",
"chars": 2603,
"preview": "# Line Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n"
},
{
"path": "docs/samples/line/multi-axis.md",
"chars": 1976,
"preview": "# Multi Axis Line Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handle"
},
{
"path": "docs/samples/line/point-styling.md",
"chars": 3139,
"preview": "# Point Styling\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'pointStyle: circle (default)',"
},
{
"path": "docs/samples/line/segments.md",
"chars": 1433,
"preview": "# Line Segment Styling\nUsing helper functions to style each segment. Gaps in the data ('skipped') are set to dashed line"
},
{
"path": "docs/samples/line/stepped.md",
"chars": 1894,
"preview": "# Stepped Line Charts\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Step: false (default)',\n"
},
{
"path": "docs/samples/line/styling.md",
"chars": 1617,
"preview": "# Line Styling\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT, min: "
},
{
"path": "docs/samples/other-charts/bubble.md",
"chars": 2451,
"preview": "# Bubble\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT, rmin: 5, rm"
},
{
"path": "docs/samples/other-charts/combo-bar-line.md",
"chars": 2722,
"preview": "# Combo bar/line\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart"
},
{
"path": "docs/samples/other-charts/doughnut.md",
"chars": 2726,
"preview": "# Doughnut\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n "
},
{
"path": "docs/samples/other-charts/multi-series-pie.md",
"chars": 2919,
"preview": "# Multi Series Pie\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 5;\nconst NUMBER_CFG = {count: DATA_COUNT, m"
},
{
"path": "docs/samples/other-charts/pie.md",
"chars": 2384,
"preview": "# Pie\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n c"
},
{
"path": "docs/samples/other-charts/polar-area-center-labels.md",
"chars": 2364,
"preview": "# Polar area centered point labels\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',"
},
{
"path": "docs/samples/other-charts/polar-area.md",
"chars": 2036,
"preview": "# Polar area\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n"
},
{
"path": "docs/samples/other-charts/radar-skip-points.md",
"chars": 2125,
"preview": "# Radar skip points\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(ch"
},
{
"path": "docs/samples/other-charts/radar.md",
"chars": 2593,
"preview": "# Radar\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n "
},
{
"path": "docs/samples/other-charts/scatter-multi-axis.md",
"chars": 3292,
"preview": "# Scatter - Multi axis\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUN"
},
{
"path": "docs/samples/other-charts/scatter.md",
"chars": 2452,
"preview": "# Scatter\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT, rmin: 1, r"
},
{
"path": "docs/samples/other-charts/stacked-bar-line.md",
"chars": 2992,
"preview": "# Stacked bar/line\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(cha"
},
{
"path": "docs/samples/plugins/chart-area-border.md",
"chars": 1597,
"preview": "# Chart Area Border\n\n```js chart-editor\n// <block:data:2>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT, m"
},
{
"path": "docs/samples/plugins/doughnut-empty-state.md",
"chars": 1695,
"preview": "# Doughnut Empty State\n\n```js chart-editor\n// <block:data:2>\nconst data = {\n labels: [],\n datasets: [\n {\n labe"
},
{
"path": "docs/samples/plugins/quadrants.md",
"chars": 2044,
"preview": "# Quadrants\n\n```js chart-editor\n// <block:data:2>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_COUNT, min: -100"
},
{
"path": "docs/samples/scale-options/center.md",
"chars": 1958,
"preview": "# Center Positioning\n\nThis sample show how to place the axis in the center of the chart area, instead of at the edges.\n\n"
},
{
"path": "docs/samples/scale-options/grid.md",
"chars": 2626,
"preview": "# Grid Configuration\n\nThis sample shows how to use scriptable grid options for an axis to control styling. In this case,"
},
{
"path": "docs/samples/scale-options/ticks.md",
"chars": 2548,
"preview": "# Tick Configuration\n\nThis sample shows how to use different tick features to control how tick labels are shown on the X"
},
{
"path": "docs/samples/scale-options/titles.md",
"chars": 2082,
"preview": "# Title Configuration\n\nThis sample shows how to configure the title of an axis including alignment, font, and color.\n\n``"
},
{
"path": "docs/samples/scales/linear-min-max-suggested.md",
"chars": 1448,
"preview": "# Linear Scale - Suggested Min-Max\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {coun"
},
{
"path": "docs/samples/scales/linear-min-max.md",
"chars": 1178,
"preview": "# Linear Scale - Min-Max\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA_CO"
},
{
"path": "docs/samples/scales/linear-step-size.md",
"chars": 3295,
"preview": "# Linear Scale - Step Size\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n han"
},
{
"path": "docs/samples/scales/log.md",
"chars": 1503,
"preview": "# Log Scale\n\n```js chart-editor\n// <block:actions:2>\nconst logNumbers = (num) => {\n const data = [];\n\n for (let i = 0;"
},
{
"path": "docs/samples/scales/stacked.md",
"chars": 1557,
"preview": "# Stacked Linear / Category\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst NUMBER_CFG = {count: DATA"
},
{
"path": "docs/samples/scales/time-combo.md",
"chars": 1891,
"preview": "# Time Scale - Combo Chart\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n han"
},
{
"path": "docs/samples/scales/time-line.md",
"chars": 2405,
"preview": "# Time Scale\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handler(chart) {\n"
},
{
"path": "docs/samples/scales/time-max-span.md",
"chars": 2811,
"preview": "# Time Scale - Max Span\n\n```js chart-editor\n// <block:actions:2>\nconst actions = [\n {\n name: 'Randomize',\n handle"
},
{
"path": "docs/samples/scriptable/bar.md",
"chars": 1530,
"preview": "# Bar Chart\nDemo selecting bar color based on the bar's y value.\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT"
},
{
"path": "docs/samples/scriptable/bubble.md",
"chars": 2355,
"preview": "# Bubble Chart\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT = 16;\nconst MIN_XY = -150;\nconst MAX_XY = 100;\nUt"
},
{
"path": "docs/samples/scriptable/line.md",
"chars": 1837,
"preview": "# Line Chart\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT = 12;\nUtils.srand(110);\n\nconst actions = [\n {\n "
},
{
"path": "docs/samples/scriptable/pie.md",
"chars": 1649,
"preview": "# Pie Chart\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT = 5;\nUtils.srand(110);\n\nconst actions = [\n {\n na"
},
{
"path": "docs/samples/scriptable/polar.md",
"chars": 1471,
"preview": "# Polar Area Chart\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT = 7;\nUtils.srand(110);\n\nconst actions = [\n {"
},
{
"path": "docs/samples/scriptable/radar.md",
"chars": 1882,
"preview": "# Radar Chart\n\n```js chart-editor\n// <block:setup:2>\nconst DATA_COUNT = 7;\nUtils.srand(110);\n\nconst actions = [\n {\n "
},
{
"path": "docs/samples/subtitle/basic.md",
"chars": 1211,
"preview": "# Basic\n\nThis sample shows basic usage of subtitle.\n\n```js chart-editor\n// <block:setup:1>\nconst DATA_COUNT = 7;\nconst N"
},
{
"path": "docs/samples/title/alignment.md",
"chars": 1435,
"preview": "# Alignment\n\nThis sample show how to configure the alignment of the chart title\n\n```js chart-editor\n// <block:actions:2>"
},
{
"path": "docs/samples/tooltip/content.md",
"chars": 1553,
"preview": "# Custom Tooltip Content\n\nThis sample shows how to use the tooltip callbacks to add additional content to the tooltip.\n\n"
},
{
"path": "docs/samples/tooltip/html.md",
"chars": 4619,
"preview": "# External HTML Tooltip\n\nThis sample shows how to use the external tooltip functionality to generate an HTML tooltip.\n\n`"
},
{
"path": "docs/samples/tooltip/interactions.md",
"chars": 3027,
"preview": "# Interaction Modes\n\nThis sample shows how to use the tooltip position mode setting.\n\n```js chart-editor\n// <block:actio"
},
{
"path": "docs/samples/tooltip/point-style.md",
"chars": 2124,
"preview": "# Point Style\n\nThis sample shows how to use the dataset point style in the tooltip instead of a rectangle to identify ea"
},
{
"path": "docs/samples/tooltip/position.md",
"chars": 2407,
"preview": "# Position\n\nThis sample shows how to use the tooltip position mode setting.\n\n```js chart-editor\n// <block:actions:3>\ncon"
},
{
"path": "docs/samples/utils.md",
"chars": 878,
"preview": "# Utils\n\n## Disclaimer\nThe Utils file contains multiple helper functions that the chart.js sample pages use to generate "
},
{
"path": "docs/scripts/analyzer.js",
"chars": 1463,
"preview": "export default {\n id: 'samples-filler-analyser',\n\n beforeInit: function(chart, args, options) {\n this.element = doc"
},
{
"path": "docs/scripts/components.js",
"chars": 131,
"preview": "// Add Chart components needed in samples here.\n// Usable through `components[name]`.\nexport {Tooltip} from '../../dist/"
},
{
"path": "docs/scripts/derived-bubble.js",
"chars": 1066,
"preview": "import {Chart, BubbleController} from 'chart.js';\n\nclass Custom extends BubbleController {\n draw() {\n // Call bubble"
},
{
"path": "docs/scripts/helpers.js",
"chars": 149,
"preview": "// Add helpers needed in samples here.\n// Usable through `helpers[name]`.\nexport {color, getHoverColor, easingEffects} f"
},
{
"path": "docs/scripts/log2.js",
"chars": 1612,
"preview": "import {Scale, LinearScale} from 'chart.js';\n\nexport default class Log2Axis extends Scale {\n constructor(cfg) {\n sup"
},
{
"path": "docs/scripts/register.js",
"chars": 238,
"preview": "import {Chart, registerables} from '../../dist/chart.js';\nimport Log2Axis from './log2';\nimport './derived-bubble';\nimpo"
},
{
"path": "docs/scripts/utils.js",
"chars": 3483,
"preview": "import colorLib from '@kurkle/color';\nimport {DateTime} from 'luxon';\nimport 'chartjs-adapter-luxon';\nimport {valueOrDef"
},
{
"path": "helpers/helpers.cjs",
"chars": 49,
"preview": "module.exports = require('../dist/helpers.cjs');\n"
},
{
"path": "helpers/helpers.d.ts",
"chars": 42,
"preview": "export * from '../dist/helpers/index.js';\n"
},
{
"path": "helpers/helpers.js",
"chars": 36,
"preview": "export * from '../dist/helpers.js';\n"
},
{
"path": "helpers/package.json",
"chars": 405,
"preview": "{\n \"name\": \"chart.js-helpers\",\n \"private\": true,\n \"description\": \"Helpers package. Exists to support bundlers w"
},
{
"path": "karma.conf.cjs",
"chars": 5084,
"preview": "/* eslint-disable global-require */\nconst jasmineSeedReporter = require('./test/seed-reporter.cjs');\nconst commonjs = re"
},
{
"path": "package.json",
"chars": 4801,
"preview": "{\n \"name\": \"chart.js\",\n \"homepage\": \"https://www.chartjs.org\",\n \"description\": \"Simple HTML5 charts using the c"
},
{
"path": "pnpm-workspace.yaml",
"chars": 46,
"preview": "packages:\n - 'docs'\n - 'test/integration/*'\n"
},
{
"path": "rollup.config.js",
"chars": 2465,
"preview": "import cleanup from 'rollup-plugin-cleanup';\nimport json from '@rollup/plugin-json';\nimport resolve from '@rollup/plugin"
},
{
"path": "scripts/deploy-docs.sh",
"chars": 1582,
"preview": "#!/bin/bash\n\nset -e\n\nsource ./scripts/utils.sh\n\nTARGET_DIR='gh-pages'\nTARGET_BRANCH='master'\nTARGET_REPO_URL=\"https://$G"
},
{
"path": "scripts/docs-config.sh",
"chars": 168,
"preview": "#!/bin/bash\n\nset -e\n\nsource ./scripts/utils.sh\n\nVERSION=$1\nMODE=$2\n\nTAG=$(tag_from_version \"$VERSION\" \"$MODE\")\n\nsed -i -"
},
{
"path": "scripts/publish.sh",
"chars": 202,
"preview": "#!/bin/bash\n\nset -e\n\nNPM_TAG=\"next\"\n\nif [[ \"$VERSION\" =~ ^[^-]+$ ]]; then\n echo \"Release tag indicates a full release"
},
{
"path": "scripts/sample-redirect-template.html",
"chars": 942,
"preview": "<!doctype html>\n<html>\n\n<head>\n <title>Chart.js | Samples</title>\n\n <link rel=\"canonical\" href=\"/docs/TAG/samples/\" />"
},
{
"path": "scripts/utils.sh",
"chars": 498,
"preview": "#!/bin/bash\n\n# tag is next|latest|master|x.x.x\n# https://www.chartjs.org/dist/$tag/\n# https://www.chartjs.org/docs/$tag/"
},
{
"path": "src/controllers/controller.bar.js",
"chars": 19523,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {\n _arrayUnique, isArray, isNullOrUndef,\n va"
},
{
"path": "src/controllers/controller.bubble.js",
"chars": 4340,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {valueOrDefault} from '../helpers/helpers.core"
},
{
"path": "src/controllers/controller.doughnut.js",
"chars": 12133,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {isObject, resolveObjectKey, toPercentage, toD"
},
{
"path": "src/controllers/controller.line.js",
"chars": 4207,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {isNullOrUndef} from '../helpers/index.js';\nim"
},
{
"path": "src/controllers/controller.pie.js",
"chars": 555,
"preview": "import DoughnutController from './controller.doughnut.js';\n\n// Pie charts are Doughnut chart with different defaults\nexp"
},
{
"path": "src/controllers/controller.polarArea.js",
"chars": 5823,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {toRadians, PI, formatNumber, _parseObjectData"
},
{
"path": "src/controllers/controller.radar.js",
"chars": 2452,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {_parseObjectDataRadialScale} from '../helpers"
},
{
"path": "src/controllers/controller.scatter.js",
"chars": 5159,
"preview": "import DatasetController from '../core/core.datasetController.js';\nimport {isNullOrUndef} from '../helpers/index.js';\nim"
}
]
// ... and 868 more files (download for full content)
About this extraction
This page contains the full source code of the chartjs/Chart.js GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 1068 files (2.5 MB), approximately 723.5k tokens, and a symbol index with 1435 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.