New contributions to the library are welcome, but we ask that you please follow these guidelines:
eslint code standards. gulp test will run both the linter and tests for you.test/ and docs/ directories respectively).function outside of a class or by prefixing it with _ and adding @private JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backwards compatibility. Private APIs allow the flexibility to address unforeseen cases.Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join here. If you think you can help, we'd love to have you!
Chart.js uses gulp to build the library into a single JavaScript file.
Firstly, we need to ensure development dependencies are installed. With node and npm installed, after cloning the Chart.js repo to a local directory, and navigating to that directory in the command line, we can run the following:
> npm install
> npm install -g gulp-cli
This will install the local development dependencies for Chart.js, along with a CLI for the JavaScript task runner gulp.
The following commands are now available from the repository root:
> gulp build // build dist files in ./dist
> gulp build --watch // build and watch for changes
> gulp unittest // run tests from ./test/specs
> gulp unittest --watch // run tests and watch for source changes
> gulp unittest --coverage // run tests and generate coverage reports in ./coverage
> gulp lint // perform code linting (ESLint)
> gulp test // perform code linting and run unit tests
> gulp docs // build the documentation in ./dist/docs
> gulp docs --watch // starts the gitbook live reloaded server
More information can be found in gulpfile.js.
Some display-related functionality is difficult to test via typical Jasmine units. For this reason, we introduced image-based tests (#3988 and #5777) to assert that a chart is drawn pixel-for-pixel matching an expected image.
Generated charts in image-based tests should be as minimal as possible and focus only on the tested feature to prevent failure if another feature breaks (e.g. disable the title and legend when testing scales).
You can create a new image-based test by following the steps below:
test/fixtures/{spec.name}/{feature-name}.json.test/specs/{spec.name}.tests.js if it doesn't exist yet.gulp unittest --watch --inputs=test/specs/{spec.name}.tests.js.test/fixtures/{spec.name}/{feature-name}.png making sure not to activate the tooltip or any hover functionalityCTRL+R): test should now passTests should pass in both browsers. In general, we've hidden all text in image tests since it's quite difficult to get them passing between different browsers. As a result, it is recommended to hide all scales in image-based tests. It is also recommended to disable animations. If tests still do not pass, adjust tolerance and/or threshold at the beginning of the JSON file keeping them as low as possible.
When a test fails, the expected and actual images are shown. If you'd like to see the images even when the tests pass, set "debug": true in the JSON file.
Please report these on the GitHub page - at github.com/chartjs/Chart.js. Please do not use issues for support requests. For help using Chart.js, please take a look at the chartjs tag on Stack Overflow.
Well structured, detailed bug reports are hugely valuable for the project.
Guidelines for reporting bugs:
master, you may reference the latest code via https://www.chartjs.org/dist/master/Chart.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.Please provide any additional details associated with the bug, if it's browser or screen density specific, or only happens with a certain configuration or data.