Technology moves fast! ⚑ Don't get left behind.🚢 Subscribe to our mailing list to keep up with latest and greatest in open source projects! πŸ†


Subscribe to our mailing list

Chart.js

Simple HTML5 Charts using the <canvas> tag

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402 (1 ratings)
Rated 5.0 out of 5
Subscribe to updates I use Chart.js


Statistics on Chart.js

Number of watchers on Github 35629
Number of open issues 424
Average time to close an issue 2 days
Main language JavaScript
Average time to merge a PR 2 days
Open pull requests 132+
Closed pull requests 70+
Last commit over 1 year ago
Repo Created over 6 years ago
Repo Last Updated over 1 year ago
Size 9.75 MB
Homepage http://www.chartj...
Organization / Authorchartjs
Latest Releasev2.7.2
Contributors115
Page Updated
Do you use Chart.js? Leave a review!
View open issues (424)
View Chart.js activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Chart.js for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Chart.js

travis coveralls codeclimate slack

Simple HTML5 Charts using the canvas element chartjs.org

Installation

You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.

To install via npm:

npm install chart.js --save

To install via bower:

bower install chart.js --save

Selecting the Correct Build

Chart.js provides two different builds for you to choose: Stand-Alone Build, Bundled Build.

Stand-Alone Build

Files:

  • dist/Chart.js
  • dist/Chart.min.js

The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.

Bundled Build

Files:

  • dist/Chart.bundle.js
  • dist/Chart.bundle.min.js

The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.

Documentation

You can find documentation at www.chartjs.org/docs. The markdown files that build the site are available under /docs. Previous version documentation is available at www.chartjs.org/docs/latest/developers/#previous-versions.

Contributing

Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support using Chart.js, please post questions with the chartjs tag on Stack Overflow.

Building

Instructions on building and testing Chart.js can be found in the documentation.

Thanks

  • BrowserStack for allowing our team to test on thousands of browsers.
  • @n8agrin for the Twitter handle donation.

License

Chart.js is available under the MIT license.

Chart.js open issues Ask a question     (View All Issues)
  • over 2 years [BUG] Broken link to global configuration section in docs
  • over 2 years chartjs 2.3 - splitted long labels overlap xAxis
  • over 2 years [BUG] Single value center position
  • over 2 years Need Export Plugin For Chartjs Graphs in PDF, XLSX, DOC format
  • over 2 years PolarArea chart - background circle color.
  • over 2 years [BUG] Retina scaling no longer working in 2.4.0 (master branch)
  • over 2 years Timeline Chart type
  • over 2 years [BUG] Can't create chart with a canvas from document.createElement
  • over 2 years Possible bug in core.helpers.cancelAnimFrame
  • over 2 years Cannot dynaically change to mixed chart type
  • over 2 years yAxis ScaleLabelPadding
  • over 2 years Leading and trialing space should be optional
  • over 2 years [BUG] Long numbers passed as string cause rendering errors
  • over 2 years offsetGridLines not working for bar chart
  • over 2 years Using Percent Sign in Scale
  • over 2 years Padding between xAxes and bar chart
  • over 2 years Clarification of fill property
  • over 2 years [BUG] scales.yAxes.ticks.stepSize ignored?
  • over 2 years Log Scale not formatting correctly
  • over 2 years Candlestick graph type
  • over 2 years How to apply "cursor: pointer" css
  • over 2 years [BUG] Hover smaller bars make them full width and others dissapear
  • over 2 years [FEATURE] Using fecha in place of moment
  • over 2 years [FEATURE] Chart.pluginService different implementation for multiple charts
  • over 2 years line chart (time scaling) tooltipFormat not working with null data
  • over 2 years [BUG] (I think) Stacked bar charts don't show borders
  • over 2 years long x-axis labels does not rotate to 90 on barcharts for version 2.3.0
  • over 2 years Adding new line to the tooltip?
  • over 2 years Where is the documentation about adding and removing Data?
  • over 2 years [BUG] Lines go back and forth when they are left to ticks.min
Chart.js open pull requests (View All Pulls)
  • Shared data between charts
  • First pass on typescript definitions for chart.js 2.0.
  • Make animation options consistent for polar area and doughnut charts
  • Prework to support panning
  • This fix tooltip text align
  • Fix #2221 by reducing graph range by one step when possible
  • Remove new tag from some features
  • HorizontalBar functionality for issue #73
  • Add scaleShowXTicks option
  • Option to skip specific x-labels.
  • add constant lines
  • Fixed a bug with time scale adding an extra tick on the end.
  • add line chart scaleLabelsStepWidth options
  • Don't draw lines outside the chart area.
  • added percentageOuterCutout to Doughnut Chart Type
  • Added ability to draw horizontal and vertical lines on graph
  • Added line-background changes.
  • Removed {% raw %}
  • Further refinements for firefox (ff on os x wasnt happy with the attribute case)
  • Add automatically generated change log file.
  • fix for 'illegal invocation' when animations are off
  • Travis GitHub Releases
  • Helpers improvements
  • Ability to pass datasetIndex as an array to toggle visibility of multiple datasets
  • Update 02-Line-Chart.md
  • Remove composer
  • This fixes #2599
  • Fixed last tick overlap for time scale
  • Fix for line chart with one data point
  • time type xAxis height crah in line chart #2622
  • Update 04-Bar-Chart.md
  • cached index and length
  • Fix for null value label/x-axis multi-tooltip bug
  • Consider left and top when determining value from pixel in category s…
  • Fix to work stacked scatter line chart (fixes #2878)
  • Non numeric y
  • Padding left and right scale
  • Fix #3379 by making the x-axis mode behave more like label mode
  • Add inline plugin support to charts.
  • Adding padding by config to chart.js
  • legendCallback improvement
  • HeatMap chart type
  • This is a more declarative way to check if the context is a jQuery el…
  • Fix for outer tick (gridLIne) not shown in radar chart when scale is reverse #3251
  • Fix tooltip hover color bug
  • Fix number of horizontal ticks when defined by callback function.
  • Respect the hover mode false - bugfix (#3181)
  • Lables on multiple lines instead of twisting
  • Initial label alignment option
  • feat(core.tooltip): add border and shadow options
  • Custom tooltip: add data points infos
  • Multiline support for axes using \n
  • Maximum bar thickness
  • Handle both string and Color as color definitions
  • Added ability to center x axis on scatter chart
  • Fixed time scale bar issues #2415 #2323
  • Fixed vertical alignment in legend text (#3387)
  • Add a function to filter items out of the legend
  • start fixing rotated labels
  • Group stacked bar charts (#2643)
  • bug #3525, added default borderWidth for stacked bars
  • Labels can get bigger when the 2nd fit happens.
  • Properly use the ticks.padding option
  • Version 2.4.0
  • Display correct tooltip labels when data contains null values
  • Add rectRounded point style
  • Better handling of axis padding
  • Fix miscalculation of Bar width.
  • Fix monotone cubic interpolation when two adjacent points are at the same X
  • Fixed tooltip labelling on Bar Chart when min is defined (#3618)
  • Adding scale background colors again (updated for v2)
  • Exception on click chart Issue resolved (#3603, #3606)
  • Add chart data property setter and unit tests
  • Axis default positions
  • Feature/tooltip border
  • Layout service supports configuring box order
  • Sometimes controller is null and has no property 'draw' which throws …
  • split radial scale lineArc setting into two settings
  • Moved docs over to new folder structure
  • Allow category scales to use locally-set labels
  • Don’t propagate clicks that are handled internally
  • Fix code climate badge and link
  • Upgrade dependencies
  • Added 'devicePixelRatio' option to override the window's DPR setting
  • Time axis ticks formatting for base and senior unit
  • Implemented aligment by senior unit in time axis.
  • Fix for #3293
  • fix #4216 when dataset empty, set scale min max to default if null
  • Fixes labelOffset not working for vertical axes
  • issue #4216
  • Version 2.6.0
  • Refactor time scale methods into a common location
  • Explicitly check if tooltip callback is undefined before ignoring value
  • Add tooltip textLabelColor callback
  • fix scale options update error
  • adding values on the bars
  • Add the ability to draw a line as legend symbol
  • Fixed an Uncaught TypeError
  • Move drawing of gridLines into separate plugin and add border functionality
  • added new condition offsetGridLines to includeOffset calculation
  • Fix inconsistent aspect ratio
  • Don't shift timescale bars on barchart
  • Avoid tooltip truncation in x axis if there is enough space
  • Enhancement: Better handling of long labels on bar chart rather than
  • iss3917
  • Add support for new tooltip callback events
  • Add check for missing update() call
  • Incorrect conversion of number to boolean
  • Don't render tooltips when they are disabled
  • Use element options for removeHoverStyle(), even when inheriting
  • Fix chart having hidden right padding
  • Fix Zero pointBorderWidth still drawing border
  • Bug: Avoid updating Chart when `responsive: true` and Chart is hidden.
  • Better handling of mixed line / scatter charts
  • Version 2.7.2
  • Mixed chart
  • Allow spanning data gaps for radar charts
  • Add `ticks.integerSteps` option to linear scale.
  • Legend Symbol Parameter [New Feature]
  • Update to fix responsive chart size in IE11 when parent container has…
  • Fixes bug #5289: Bars do not appear at correct X axis position when specified in {x, y} format
  • Radar chart to support showLabelBackdrop in global config
  • Fixes Tooltips Showing Outside Minimum Time Bounds
  • Added 'angle' option to Polar Charts
  • Float-bar support. The logic is to use array values [bottomY, topY] i…
  • Measure text size for autoscale when rotated
  • Negative rotations on x axis labels
  • Fix Time Point Data Sample Add Data Button
  • add check avoid potential memory leak
  • Line Chart - line on the edge get cut fix ( #4202)
  • Enable arbitrary rotation of datapoints
  • Improve offset calculation for scale.offset option
Chart.js questions on Stackoverflow (View All Questions)
  • Chart.js - How to set a line chart dataset as disabled on load
  • Chart.js v2 is there a way to draw bar chart horizontally?
  • How to show tooltips always on Chart.js 2
  • display:none to display:block breaks chart.js canvas
  • Chart.js showing only last data value
  • How to update chart.js on websocket event?
  • How do I use Chart.js and Bootstrap at same time? (various jQuery versions)
  • Removing legend on charts with chart.js v2
  • Cannot find module 'chart.js'
  • chart.js load totally new data
  • chart.js v2: how to add tooltips of metadata?
  • Chart.js replace all data
  • Chart.js Change in Bar Chart colors on mouse over
  • Chart.js radar labels from json call into new radar
  • Chart.js v2, remove padding/margin from radar chart
  • Can't Customize Chart.js
  • Bower install chartjs - bower invalid-meta Chart.js is missing "ignore" entry in bower.json
  • Loading and updating dynamic charts with dynamic data (chart.js)
  • SystemJS import chart.js in index.html
  • Chart.js v2 - hiding grid lines
  • Acceptable Range Highlighting of Background in Chart.js 2.0
  • Why will a change on $scope.data on a onChange callback not re-plot chart.js?
  • chart.js - Disable labels
  • Using JSON file data in Chart.js
  • In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?
  • Syntax to instantiate chart.js chart
  • How to make the chart.js usable with my own data (expectation that i have zero idea on how to do it)
  • Chart.js . ASP . Legend Template
  • How to create two pie charts using Chart.js API?
  • Create Charts with Chart.js Using C# string causes problems
Chart.js list of languages used
Chart.js latest release notes
v2.7.2 Version 2.7.2

Documentation: http://www.chartjs.org/docs/2.7.2/

Enhancements

  • #4891 Relax dependencies versions. Thanks @jsg2021
  • #4923 Reset only when animating (optimization)
  • #4994 Equally sized bars for bar charts
  • #5062 Improve point.xRange and point.yRange performance. Thanks @fanthos
  • #5076 Prevent double ticks array reverse for logarithmic scale (optimization). Thanks @jcopperfield
  • #5095 Better default tooltip label format in the time scale
  • #5240 Support multiple font colors for radial chart labels. Thanks @flaurida

Issues Fixed

  • #3998 Avoid tooltip truncation. Thanks @kaidohallik
  • #4198 Fixed updating scale options. Thanks @xg-wang
  • #4874 Fixed setting canvas dimensions. Thanks @andersponders
  • #4913 Fixed log scale when value is 0. Thanks @jcopperfield
  • #4937 Fixed non-adjacent stacked groups. Thanks @jcopperfield
  • #4942 Fixed y-axis labels partially hidden. Thanks @jcopperfield
  • #4943 Round values in linear tick generator. Thanks @jcopperfield
  • #4944 Fixed bumpy line on smooth dataset. Thanks @jcopperfield
  • #4959 Fixed out of memory error when all data points are 0. Thanks @jcopperfield
  • #4959 Fixed unresponsive bubble chart. Thanks @jcopperfield
  • #5005 Fixed tooltip changing while animating. Thanks @jcopperfield
  • #5041 Fixed infinite loop due to insufficient bounds checking. Thanks @jcopperfield
  • #5045 Use time.unit option to create default min/max for empty chart. Thanks @jcopperfield
  • #5088 Re-expose Chart.Ticks.formatters
  • #5144 Fixed updating plugin options
  • #5165 Treat negative values in doughnut charts as positive
  • #5178 Don't draw tick across axis/border. Thanks @jhaenchen
  • #5248 Fix label vertical alignment on vertical scales. Thanks @MPierre9
  • #5275 Improve polyfill function of log10 to return whole powers of 10. Thanks @jcopperfield

Documentation

  • #4914 Fixed samples titles. Thanks @aspaldiko
  • #4921 Add link to chartjs-plugin-waterfall. Thanks @MartinDawson
  • #4930 Remove extra space. Thanks @MartinDawson
  • #4979 Fixed link to time axis documentation in bar chart
  • #4984 Link to Ember/Chart.js integration. Thanks @jpsirois
  • #5006 Link to Angular2+ libraries (1 & 2). Thanks @realshaft
  • #5010 Fixed typos and broken links. Thanks @beiz23
  • #5094 Add note about legendCallback. Thanks @cameroncf
  • #5166 Improve custom tooltip docs and samples
  • #5167 Add docs on how to resize charts manually for printing
  • #5168 Add example on how to use the tooltip label callback
  • #5169 Fixed error in polar area and doughnut chart docs
  • #5173 Better variable name in API snippet. Thanks @jonquach
  • #5225 Add Charba GWT integration to extensions.md. Thanks @stockiNail
  • #5227 Remove trailing spaces
  • #5256 Improve title of GitBook pages. Thanks @wmzhong
  • #5274 Make both README.md and installation.md clearer. Thanks @wla80

Development

  • #4699 Suppress coveralls errors in forks. Thanks @andig
  • #4738 Upgrade to ESLint 4
  • #5053 Update license year and copyright holders
  • #5112 Use the Chart.js shared ESLint config
  • #5113 Make Chart.layout(Service) importable
  • #5114 Make Chart.plugins importable
  • #5118 Rename Chart.layout to Chart.layouts
  • #5138 Ignore package-lock.json
  • #5143 Log gulp error. Thanks @loicbourgois
  • #5150 Test for showLines in scatter chart. Thanks @loicbourgois
  • #5195 Setup HTML and JS linters for samples. Thanks @loicbourgois
  • #5217 Fix Slack invitation link

More details in the release PR: #5145

v2.7.1 Version 2.7.1

2.7.1 is a bug fix release and also includes numerous documentation improvements

Documentation: http://www.chartjs.org/docs/2.7.1/

Enhancements

  • #4793 Added beforeTooltipDraw and afterTooltipDraw to plugins. Thanks @JewelsJLF

Issues Fixed

  • #4295 Fixed min and max in time scale
  • #4762 Fixed regression in x-axis interaction mode
  • #4774 Fixed chart responsiveness
  • #4779 Fixed unit used for auto ticks in time scale
  • #4781 Fixed handling of null style. Thanks @Rydori
  • #4783 Fixed color settings for BeforeLabel and BeforeBody. Thanks @Rittyan
  • #4795 Fixed handling of null labels
  • #4878 Fixed rollup issue caused by early access of the extend and inherits helpers
  • #4840 Fixed tooltip reset

Documentation

  • #4736 Expand scale jsdocs
  • #4765 Consistent formatting for cartesian options
  • #4818 Update supported browser section of documentation
  • #4819 Typo in code comments. Thanks @einfallstoll
  • #4826 Clarification for using x/y coordinates with bar chart
  • #4851 Improved rendering of tables describing options. Thanks @minusf

Development

  • #4880 Address test flakiness

More details in the release PR: #4876

v2.7.0 Version 2.7.0

Version 2.7 brings better stability, and powerful new features to Chart.js. The bubble chart options are now completely scriptable. This means that you can pass a function to a bubble chart dataset property and have the function be called as needed. This simplifies array properties, and allows quick and easy rendering changes based on data values. Check out the sample for details. If these options prove useful, they can be extended to other chart types in the future.

Building off the time scale rewrite in version 2.6, the time scale now supports options for configuring how labels generate ticks, how interpolation between the points is handled and the scale boundary strategy. Users can now configure ticks to be generated for each label, or be determined automatically from the data limits. Users can also change how ticks are distributed along the axis] to make non-linear time axes. Check out the sample for details.

Documentation: http://www.chartjs.org/docs/2.7.0/

Breaking Changes

  • #4079 Doughnut, polarArea and radar charts aspect ratio changed to 2 to be consistent with other charts and are not square anymore by default. Use the aspectRatio: 1 option to restore the previous behaviour.

Deprecations

  • #4401 Deprecated time scale unitStepSize, use stepSize instead.

New Features

  • #4199 Add tooltip labelTextColor callback. Thanks @apoorvasrinivasan
  • #4267 #4268 New time scale major unit options. Thanks @hurskiy-andriy
  • #4270 New devicePixelRatio option. Thanks @OlduwanSteve
  • #4646 Implemented scale label padding. Thanks @andig
  • #4456 Allow specifying bar chart via {x, y} data points. Thanks @benmccann
  • #4458 Add interaction axis: 'x', 'y', 'xy' options.
  • #4506 Allow category labels definition at scale level. Thanks @andig
  • #4507 New time scale distribution and ticks.source options.
  • #4533 Allow specifying the time axis via t attribute. Thanks @benmccann
  • #4556 New time scale bounds option.
  • #4671 Introduced scriptable options (bubble chart only).

Enhancements

  • #4362 Add support for configurable update. Thanks @ricardocosta89
  • #4381 Scatter chart doesn't anymore display lines by default.
  • #4382 Add support for multiple lines text in the chart title.
  • #4531 Add support for line height CSS values.
  • #4545 New offset scale option. Thanks @nagix
  • #4586 Allow updating dataset types. Thanks @benmccann
  • #4591 Add support for detached canvas element.
  • #4596 Replace the IFRAME resizer by scrollable DIVs.
  • #4632 Ticks callback is now called with this as scope. Thanks @andig
  • #4708 Add platform fallback implementation.
  • #4733 Update chartjs-color dependency to version 2.2.0

Issues Fixed

  • #4079 Fixed inconsistent aspect ratio (2 for all charts). Thanks @jtblin
  • #4249 Fixed labelOffset not working for vertical axes. Thanks @suheb
  • #4295 Fixed missing IE *_SAFE_INTEGER constants. Thanks @OlduwanSteve
  • #4297 Fixed onHover event not being triggered. Thanks @ricardocosta89
  • #4318 Fixed disabled legend items alignment.
  • #4319 Fixed default layout options (empty object).
  • #4341 Fixed tooltip color box border width.
  • #4348 Fixed time scale round option.
  • #4360 Fixed filling between datasets of different lengths.
  • #4402 Fixed error when legend labels option is undefined.
  • #4403 ticks.padding option now applies to vertical and horizontal scales.
  • #4406 Ensured that chart dimensions are always >= 0. Thanks @Peter-Van-Drunen
  • #4424 Fixed non-passive event listener warning in Chrome.
  • #4425 Fixed range calculation when all datasets hidden and axis minimum set.
  • #4448 Radius is now clamped when drawing rounded rectangle.
  • #4451 Chart area is now clipped before filling.
  • #4457 Fixed reverse option in radial linear scale.
  • #4459 Line chart pointBorderWidth now supports array.
  • #4522 Honour time scale min/max settings. Thanks @andig
  • #4545 Make offsetGridLines consistent. Thanks @nagix
  • #4655 Removed redundant tooltip initialize. Thanks @xg-wang
  • #4682 Show radial scale labels correctly when rotated.
  • #4697 Fixed filling datasets when stepped line. Thanks @nagix

Documentation

  • #4320 Fixed stepSize documentation (previously unitStepSize).
  • #4325 Fixed animations link. Thanks @raquelguimaraes
  • #4353 Fixed typo in labelling. Thank @MuseofMoose
  • #4365 Fixed typo in title. Thanks @moortaube
  • #4383 Fixed HighCharts comparison. Thanks @brother
  • #4386 Add note regarding non-existant fonts.
  • #4404 Fixed wording in line. Thanks @uok
  • #4417 Add dataset update plugin hooks. Thanks @nagix
  • #4418 Updated the time display format table. Thanks @nagix
  • #4442 Better example of using script tag. Thanks @justinledford
  • #4456 Add a note on how to use getElementAtEvent in a click handler.
  • #4465 Updated link to documentation for previous versions. Thanks @alex-paterson
  • #4527 Add link to Java integration. Thanks @mdewilde
  • #4554 Add a financial time series sample. Thanks @benmccann
  • Add doc about accessing development build and resources. Thanks @andig

Development

  • #4272 Upgraded development dependencies. Thanks @benmccann
  • #4346 Switched Travis to use Node 6. Thanks @benmccann
  • #4419 Cleaned up and reorganize core and canvas helpers.
  • #4421 Increased ESLint complexity and add config for tests.
  • #4422 Rewrote the clone and merge helpers.
  • #4423 Changed valueAtIndexOrDefault behavior.
  • #4427 Removed .js extensions when requiring a file. Thanks @let-aurn
  • #4475 Moved easing effects in separate file + unit tests.
  • #4477 Fixed many link anchors. Thanks @adrianliaw
  • #4479 Chart.helpers is now importable.
  • #4485 Fixed ESLint errors. Thanks @benmccann
  • #4509 Chart.platform is now importable.
  • #4512 Chart.defaults/Ticks/Interaction are now importable.
  • #4540 Chart.Element/elements.* are now importable.
  • #4542 Removed duplicate npm install. Thanks @benmccann
  • #4544 Refactored padding parsing in helpers.options.
  • #4547 Enforced spaces around infix/unary words operators.
  • #4566 Rewrote unit test waitForResize helper.
  • #4610 Enforced variable declaration coding style.
  • #4614 Refactored autoskip functionality into a separate method. Thanks @benmccann
  • #4617 Fixed tests on OSX with retina screen. Thanks @andig
  • #4654 Better CodeClimate integration.
  • #4698 Improved controller test stability. Thanks @andig

More details in the release PR: #4706

Other projects in JavaScript