Simple HTML5 Charts using the tag

Overview


Simple yet flexible JavaScript charting for designers & developers

Downloads GitHub Workflow Status Coverage Awesome Slack

Documentation

Currently, there are two versions of the library (2.9.4 and 3.x.x). Version 2 is the latest stable version while 3 is the next (currently beta) version. As such bear the following in mind:

Contributing

Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.

License

Chart.js is available under the MIT license.

Comments
  • Tooltips

    Tooltips

    I implemented some basic tooltips, which show (if defined) the label and value onmouseover. Every tooltip can be registered by a configurable area:

    1. a simple rectangle: (x,y,width,height)
    2. a circle: (x,y,radius)
    3. any shape: (array of {x,y} objects)

    Tooltip Defaults can be overwritten by adding a 2nd parameter to the "new Chart()" function, i.e.

    var myChart = new Chart(context, { background: 'black', fontColor: 'white' });
    

    The following Tooltip options are available:

    tooltipDefaults = {
        background: 'rgba(0,0,0,0.6)',
        fontFamily : "'Arial'",
        fontStyle : "normal",
        fontColor: 'white',
        fontSize: '12px',
        padding: {
            top: 10,
            right: 10,
            bottom: 10,
            left: 10
        },
        offset: {
            left: 0,
            top: 0
        },
        border: {
            width: 0,
            color: '#000'
        }
    }
    

    The tooltip moves relative to the current mouse cursor position and shows only, if hovering a valid chart point or area. Tooltips can be disabled via specific chart option "showTooltips" i.g.

    myChart.Pie(pieChartData, { showTooltips: false });
    

    They can be styled individually and do right now a basic job: Showing the hovered label and value.

    Screenshot from 2013-03-23 16:25:00

    opened by Regaddi 109
  • State of Chart.js & V3.0

    State of Chart.js & V3.0

    3.0 final is available

    We're proud to announce that Chart.js 3.0.0 is now available. Get it with npm install --save chart.js

    Overview

    Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released in April 2016. In the years since then, as Chart.js has grown in popularity and feature set, we've learned some lessons about how to better create a charting library. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. Some major highlights of v3 include:

    • Large performance improvements including the ability to skip data parsing and render charts in parallel via webworkers
    • Additional configurability and scriptable options with better defaults
    • Completely rewritten animation system
    • Rewritten filler plugin with numerous bug fixes
    • Documentation migrated from GitBook to Docusaurus
    • API Documentation generated and verified by TypeScript
    • No more CSS injection
    • Tons of bug fixes
    • Tree shaking

    In this issue we'll maintain a list of committed, nice-to-have, and proposed features for v3. Feedback from the community will help shape the prioritization for v3.

    Committed Features

    • ~~Rollup configured for ES6+ babel translation (#6555)~~
    • ~~Remove custom (https://github.com/chartjs/Chart.js/pull/6605)~~
    • Remove all deprecated code
      • Most deprecated code has been removed. However grep -ri backward src still returns a handful of results. Also need to search the code for TODOs
    • ~~Prefix all private methods with underscore~~
    • ~~Make ticks objects (https://github.com/chartjs/Chart.js/issues/5019)~~ (or not? should we revert? see https://github.com/chartjs/Chart.js/pull/6791)
    • ~~Remove moment from package.json (https://github.com/chartjs/Chart.js/pull/6745), move the moment adapter to an external project, and remove the rollup optional plugin~~
    • ~~Remove zeroLineIndex feature and replace with function based axis properties (https://github.com/chartjs/Chart.js/pull/6697 & https://github.com/chartjs/Chart.js/pull/6700)~~
    • ~~Change require to import~~, adopt ES6 classes, use const / let, etc.
    • Scale cleanup
      • ~~Change axis options from an array to an object keyed by ID (https://github.com/chartjs/Chart.js/pull/6773)~~
      • ~~Cleanup getPixelForTick (https://github.com/chartjs/Chart.js/issues/6715)~~
    • Performance Improvements
      • ~~Accept data in a format that doesn't require parsing (https://github.com/chartjs/Chart.js/issues/6696)~~
      • ~~Improve performance of finding hovered element (https://github.com/chartjs/Chart.js/issues/6716)~~
      • ~~Split _options out of _model. Creating _model is expensive right now, since it's done for each data point. However, _options does not need to be recreated for each data point unless scriptable options are being used. Thus by just using _options directly instead of copying it into _model we would be much more performant (https://github.com/chartjs/Chart.js/pull/6845)~~
      • ~~Reduce number of objects created (e.g. _view and _model) when animation is disabled (e.g. https://github.com/chartjs/Chart.js/pull/6710).~~
    • ~~Make beginAtZero default be true for bar chart (https://github.com/chartjs/Chart.js/issues/5939)~~
    • Cleanup options (https://github.com/chartjs/Chart.js/issues/5233)
      • Remove element options and ~~remove global from options namespace~~ (https://github.com/chartjs/Chart.js/issues/6684 https://github.com/chartjs/Chart.js/pull/6893)
      • ~~Standardize on using degrees for angles (https://github.com/chartjs/Chart.js/pull/6936)~~
    • ~~Migrate docs from GitBook to Docusaurus (https://github.com/chartjs/Chart.js/pull/7295)~~
    • ~~Support tree shaking / individual module imports (https://github.com/chartjs/Chart.js/issues/7371)~~
    • Leverage index / value concepts
      • ~~Remove horizontalBar and make all charts capable of being horizontal (https://github.com/chartjs/Chart.js/pull/7144)~~

    Proposed / Nice to Have Features

    • Scale cleanups
      • Improve the scale interface & document how to use it
      • Investigate normalizing options.scales and option.scale keys for all chart types
    • Performance Improvements
      • Support drawing charts without creating elements possibly as external chart type (https://github.com/chartjs/Chart.js/pull/6881)
      • When the tooltip and other hover actions are disabled, the chart should not be redrawn when hovering on it. This would make external custom html tooltips massively faster. Along with this, consider making the default tooltip be an external tooltip (https://github.com/chartjs/Chart.js/issues/7195#issuecomment-598996746)
      • Make sure the tooltip listener only applies to the chart area and not the whole canvas (https://github.com/leeoniya/uPlot/pull/277#issuecomment-663021669)
    • Cleanup options (https://github.com/chartjs/Chart.js/issues/5233)
      • ~~Remove overrides of _resolveDataElementOptions and _resolveDatasetElementOptions (https://github.com/chartjs/Chart.js/pull/8374)~~
      • ~~Make _dataElementOptions an array in all controllers (i.e. line and radar). (https://github.com/chartjs/Chart.js/pull/8374)~~
      • ~~Ensure user-specified options are applied after defaults. Delete _config and have just a single object holding resolved options (https://github.com/chartjs/Chart.js/pull/8374)~~
      • Make chart.options private and immutable (user should not directly edit, but should pass in new config to merge)
      • ~~Cleanup interactions options (https://github.com/chartjs/Chart.js/issues/7922)~~
    • Leverage index / value concepts
      • Bar / rectangle cleanup (https://github.com/chartjs/Chart.js/issues/6760)
    • Make drawing clearer
    • Consider renaming axis label to axis title to differentiate from the tick labels
    • Improve log scale tick generation (https://github.com/chartjs/Chart.js/issues/7332)
    • Bar chart
      • Allow specifying pixels between bars (e.g. 1 px space and fill the rest). Right now it can only be a percentage
    • Ideas from @simonbrunel: Chart.js 3.pdf

    Won't do

    • Can we move hidden elements to plugin? (https://github.com/chartjs/Chart.js/pull/6255)
    • Split out the time scale into it's own package
    • Consider removing data from config so that we have datasets, labels, and options as first level properties. We agreed that data.datasets.data is confusing, but every chart would need to be updated if we changed this and all StackOverflow answers would be outdated

    How can you help?

    • Provide feedback on which issues you would like prioritized for v3
    • Test out alpha & beta releases as they become available. The alpha release is quite stable though we have found a few issues. Thanks to the folks that reported them! Here's a list of known issues
    • Volunteer time to help improve the project
    type: enhancement 
    opened by etimberg 105
  • Line Chart - Data series without label for each point

    Line Chart - Data series without label for each point

    From the Line Chart documentation,

    "The line chart requires an array of labels for each of the data points. This is show on the X axis."

    I would like to be able to add a large set of data points to a line chart, but not have a label for each data point. For instance, showing the months of the year on the x axis but having several data points between January and February. I know the project is young, but would you agree this is a good direction to go? I feel the x axis labels and data set should be decoupled.

    opened by prodatacon 96
  • showXLabels - Option to display specified number of labels on X-Axis

    showXLabels - Option to display specified number of labels on X-Axis

    Update : Refer updated PR here: https://github.com/nnnick/Chart.js/pull/897


    Original :

    Applicable to bar chart and line chart.

    User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)

    Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.

    Please see the attached images for a comparison. the second graph has been passed { showXLabels: 10 } into option.

    err-graph great-graph

    opened by hay-wire 80
  • Interested Collaborators

    Interested Collaborators

    Who would be interested in helping @nnnick keep up with ChartJS? I'm thinking that we could have people volunteer to help maintain various sections to help with the workload:

    • Docs: @fulldecent / @jakesyl
    • Testing: @fulldecent
    • Issue triage: @etimberg / @fulldecent
    • PR review: @n8mauer / @etimberg / @fulldecent / @jakesyl
    • Continuous Integration: @fulldecent / @jakesyl
    • Other (please suggest categories)

    I've tagged a few people here who seem to be fairly active. Feel free to tag anyone else who might be interested in helping out. @fulldecent @tannerlinsley @etimberg @jakesyl @orendon

    As people volunteer, I'll continue to update this list.

    type: infrastructure 
    opened by derekperkins 79
  • Responsive Chart

    Responsive Chart

    Now, i have set width and height to the canvas element. But height and width of chart should be changed based on the Device.

    I tried with bootstrap span element, it does not work. Any clues?

    opened by fizerkhan 75
  • Added basic labels to Pie chart

    Added basic labels to Pie chart

    Hi! I implemented some basic labelling to the pie chart, as I missed some labels on it. The text is rotated with the angle of the pie segment and aligns to the outer edge with a little padding of 10px. It is rendered readable, so no upside down text!

    You can style the labels like the following inside the pieData:

        var pieData = [
                {
                    value : 30,
                    color : "#F38630",
                    label : 'Sleep',
                    labelColor : 'white',
                    labelFontSize : '16'
                },
                ...
            ];
    

    You can choose just any valid css color, like HEX-Codes, RGBs or named colors.

    Important to mention: I implemented this as an optional feature, so if you don't need labels, just leave them off. You can also label a segment, while not labelling another and vice versa.

    Screenshot from 2013-03-20 09:13:01

    opened by Regaddi 67
  • Show x labels

    Show x labels

    Applicable to bar chart and line chart.

    User can now pass a { showXLabels: 10 } to display only 10 labels (actual displayed labels count might be a bit different depending on the number of total labels present on x axis, but it will still remain close to 10 however)

    Helps a lot when there is a very large amount of data. Earlier, the graph used to look devastated due to x axis labels drawn over each other in the cramped space. With showXLabels, user now has the control to reduce the number of labels to whatever number of labels fit good into the space available to him.

    Please see the attached images for a comparison. the second graph has been passed { showXLabels: 10 } into option.

    Without showXLabels: without showXLabels: crowded

    With showXLabels = 10: with showXLabels: 10

    Usage: Just pass showXLabels: 10 along with other options in the constructor. Example: myLine = new Chart(ctx).Line(lineChartData, { responsive: true, showXLabels: 10 });

    opened by hay-wire 61
  • Do not require moment.js

    Do not require moment.js

    Expected Behavior

    Chart.js requires moment.js but only uses some of its functions. The moment.js size is too large for production. I want to reduce the bundle size by using a date-time library supporting tree-shaking

    Current Behavior

    screenshot from 2017-05-29 17-55-24 I have a problem with the bundle size of moment.js in production. Moment.js does not support tree-shaking so its size is kinda overwhelming.

    Possible Solution

    Using date-fns instead of moment.js. Date-fns offers similar APIs and support tree-shaking. There are some comparisons between date-fns and moment.js

    • https://github.com/date-fns/date-fns/issues/275#issuecomment-264934189
    • https://github.com/date-fns/date-fns/issues/275#issuecomment-264941412
    • https://github.com/moment/moment/issues/2373#issuecomment-230478550

    Context

    Chart.js is the only library requiring moment.js in my application. I did some searches and date-fns seems to be a decent choice.

    Environment

    • Chart.js version: 2.5.0
    • Browser name and version: Chrome v59.0.3071.29
    type: enhancement 
    opened by hiendv 55
  • Chart.js does not import as es6 module

    Chart.js does not import as es6 module

    The instructions on http://www.chartjs.org/docs/latest/getting-started/integration.html show chart.js being imported as an es6 module: snap 01 23 18-15 19 58

    When I use this import statement within a module using chrome latest, it fails:

    import Chart from 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js'

    The error is:

    Uncaught SyntaxError: The requested module does not provide an export named 'default'

    Expected Behavior

    I think this is a bug, the docs say it should work. However, looking at the code, I see no es6 export.

    Current Behavior

    It fails with the above error.

    Possible Solution

    You might try converting to an es6 build using rollup for all conversions to other modules. https://medium.com/@backspaces/es6-modules-part-1-migration-strategy-a48de0b7f112

    Steps to Reproduce (for bugs)

    1. Within a browser supporting modules, create a <script type="module">
    2. Inside that, import Chart.
    3. The error will occur.
    <html>
    <head>
      <title>test</title>
    </head>
    <body>
      <script type="module">
        import Chart from 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js'
    
        console.log(Chart)
      </script>
    </body>
    </html>
    

    Context

    I am using chart.js to visualize results of agent based models. The repos are:

    • https://github.com/backspaces/as-core
    • https://github.com/backspaces/asx

    Environment

    • Chart.js version: latest .. 2.7.1
    • Browser name and version: chrome 63.0.3239.132
    • Link to your project: Above.
    type: bug type: infrastructure 
    opened by backspaces 46
  • Line Chart -  line on the edge get cut

    Line Chart - line on the edge get cut

    Expected Behavior

    line chart to display the whole line with same width

    Current Behavior

    seems line chart displays a 1 px line on the top and bottom in chart.js 2.5

    Possible Solution

    Steps to Reproduce (for bugs)

    1. example of the issue (chart.js 2.5) can be found in https://jsfiddle.net/e8n4xd4z/118/, both top and bottom width are thinner than expected.

    2. previous version (chart.js 2.4) is working fine https://jsfiddle.net/e8n4xd4z/117/,

    Context

    Environment

    • Chart.js version: 2.5
    • Browser name and version: Chrome 55, IE 10
    • Link to your project:https://jsfiddle.net/e8n4xd4z/118
    type: bug 
    opened by showenx 46
  • Export `package.json`

    Export `package.json`

    Feature Proposal

    Exporting package.json is recommended by rollup-plugin-svelte. I haven't had any difficulties with this yet, so consider it a nice-to-have for now :)

    Message from rollup-plugin-svelte when building our app:

    [rollup-plugin-svelte] The following packages did not export their package.json file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.

    - chart.js

    Possible Implementation

    No response

    type: enhancement 
    opened by Snailedlt 0
  • Calling

    Calling "new Chart()" throws Error: "_auto.default is not a constructor"

    Expected behavior

    No errors while calling new Chart(...)

    Current behavior

    The problem is that I can't use the "simple" import described in docs:

    import Chart from 'chart.js/auto';

    This code transpiles with babel without any problems but I have an error while trying to call new Chart(...): Uncaught TypeError: _auto.default is not a constructor

    I found that console.log(Chart) returns the path to static asset like /static/media/auto.some-hash-here.cjs but not the class/function definition.

    This is my configs - maybe I'm doing smth wrong?

    // package.json

    {
     "devDependencies": {
        "@babel/cli": "^7.19.3",
        "@babel/core": "^7.20.5",
        "@babel/preset-env": "^7.20.2",
        "@babel/preset-react": "^7.18.6",
        "chart.js": "^4.1.2"
     }
    }
    

    // jsconfig.json

    {
      "compilerOptions": {
        "baseUrl": "./src",
        "target": "es2015",
        "jsx": "react"
      },
      "include": ["src"],
      "exclude": ["node_modules", "dist"]
    }
    

    // babel.config.json

    {
      "presets": [
        ["@babel/preset-env", {
          "loose": true
        }],
        ["@babel/preset-react", { "runtime": "automatic" }]
      ]
    }
    

    The loose prop does nothing (not resolving anything) in my case (and after diving into the desc of it I'd like to remove it imho :))

    Reproducible sample

    none

    Optional extra steps/info to reproduce

    No response

    Possible solution

    No response

    Context

    No response

    chart.js version

    v4.1.2

    Browser name and version

    No response

    Link to your project

    No response

    type: bug 
    opened by paulrevival 0
  • Mixing stepped line and bars

    Mixing stepped line and bars

    Expected behavior

    Stepped line should follow before directive even when there are bars in same chart.

    Current behavior

    Stepped line steps at the middle when bars are added to chart.

    Reproducible sample

    v4.0.0

    Optional extra steps/info to reproduce

    var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], stepped:'before' }, { label: 'Bars', data: [12, 19, 3, 5, 2, 3], type: 'bar' }] }, options: { scales: { x: { stacked:true }, y: { stacked:true
    } } } });

    Possible solution

    No response

    Context

    No response

    chart.js version

    Chart.js v4.0.0-alpha.3

    Browser name and version

    Chrome on Android, Chromium on Linux

    Link to your project

    No response

    type: bug 
    opened by jpm-- 1
  • Specify `module` for Webpack 4

    Specify `module` for Webpack 4

    Hi, thanks for this project!

    Webpack 4 currently loads ./dist/chart.cjs since it doesn't support exports: https://github.com/webpack/webpack/issues/9509

    opened by ankane 1
  • helpers.segment.cjs incorrectly handle CommonJS import from @kurkle/color

    helpers.segment.cjs incorrectly handle CommonJS import from @kurkle/color

    Expected behavior

    When hovering over a pie chart, it should not throw an error.

    Current behavior

    I implemented chart.js in my Angular 14 app without ng2-charts and since I have this in my tsconfig.app.json:

    {
      "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
      }
    }
    

    helpers.segment.cjs is loading @kurkle/color/dist/color.cjs (not sure if above is actually responsible for this). After that every time I hover over a pie chart, I got an error:

    core.mjs:7629 ERROR TypeError: color$1.Color is not a constructor
        at getHoverColor (helpers.segment.cjs:755:49)
        at Defaults.hoverBorderColor (helpers.segment.cjs:1035:49)
        at _resolveScriptable (helpers.segment.cjs:1711:13)
        at _resolveWithContext (helpers.segment.cjs:1695:17)
        at helpers.segment.cjs:1644:46
        at _cached (helpers.segment.cjs:1687:19)
        at Object.get (helpers.segment.cjs:1644:20)
        at Config.resolveNamedOptions (chart.cjs:5425:35)
        at PieController._resolveElementOptions (chart.cjs:963:31)
        at PieController.resolveDataElementOptions (chart.cjs:938:21)
    

    I debug it and found out that the problem is that color$1 is a function and not an object. In this case the correct syntax should be new color$1(value) instead of new color$1.Color(value), because @kurkle/color/dist/color.cjs have CommonJS syntax. If Ecmascript module loading is used, chart.js is loading @kurkle/color/dist/color.esm.js and the syntax in helpers.segment.cjs is correct, because color$1 is now an object.

    Reproducible sample

    https://codesandbox.io/s/ng2charts-chart-js-issue-template-forked-n6cdgi?file=/tsconfig.json

    Optional extra steps/info to reproduce

    Note that the implementation to the codesandbox is working properly, because @kurkle/color/dist is using the color.esm.js and I can't make it so it would use color.cjs (my case). I'm attaching screenshots.

    Screenshot of node_modules in codesandbox app: image

    Screenshot of node_modules in my app: image

    So at the end, if you can make the code example to load @kurkle/color/dist/color.cjs you will see the error I'm getting while hovering on a pie chart.

    Possible solution

    No response

    Context

    No response

    chart.js version

    v4.1.2

    Browser name and version

    Chrome,108.0.5359.125

    Link to your project

    No response

    type: bug 
    opened by marin-takanov-maersk 0
  • Not having a changelog document is a mistake

    Not having a changelog document is a mistake

    Documentation Is:

    • [X] Missing or needed?
    • [ ] Confusing
    • [ ] Not sure?

    Please Explain in Detail...

    I know this has been asked before, but the claim that https://github.com/chartjs/Chart.js/releases is sufficient is simply false.

    Take for instance the 3.0.0 release. It contains ZERO information about breaking changes. None - zip - nada.

    Do you honesestly think that is acceptable?

    It contains links to 22 included pre-releases, are people supposed to be detectives and open each and every of them, and aggregate the breaking changes information themselves?

    And if they attempt to do so, the first one (v3.0.0-alpha) contains no concrete information but instead links to a migration guide. The link is dead and gives a 404 error...

    Seriously, do you really think this is good enough?

    Your Proposal for Changes

    There should exist a changelog document.

    Example

    No response

    type: documentation 
    opened by hlovdal 3
Releases(v4.1.2)
  • v4.1.2(Jan 5, 2023)

  • v4.1.1(Dec 17, 2022)

    Essential Links

    • #10988 chore: Revert "Add Product Hunt button (temporarily)"

    Bugs Fixed

    • #10971 fix: avoid resize loop when browser zoom is set to 90%
    • #10993 fix: move types to src dir to escape src / dist dirs in paths
    • #10992 fix: hotfix chart.js/auto for commonjs

    Types

    • #10993 fix: move types to src dir to escape src / dist dirs in paths

    Development

    • #10997 Bump to 4.1.1

    Thanks to @dangreen, @etimberg, @gbaron and @igorlukanin

    Source code(tar.gz)
    Source code(zip)
    chart.js-4.1.1.tgz(1.18 MB)
  • v4.1.0(Dec 16, 2022)

    Essential Links

    • #10980 chore: Add Product Hunt button (temporarily)
    • #10917 fix: move @kurkle/color to dependencies

    Enhancements

    • #10966 add getLabelItems public method
    • #10984 feat: restore commonjs bundle
    • #10964 Allow dynamic datasets to be colored
    • #10904 Allow color plugin to work with custom dataset controllers
    • #10870 feat: colors for mixed charts
    • #10886 Pointstyle false

    Bugs Fixed

    • #10942 Ensure that args are saved inside of the throttled helper
    • #10766 fix: stacked bar chart minBarLength causes overlapping
    • #10898 Set the transition mode to the context for scriptable options

    Types

    • #10963 fix: unbind instance config from chart type
    • #10910 Add stepSize option to time scale options types

    Documentation

    • #10976 docs: Update Slack link
    • #10965 Broken link is fixed.
    • #10955 Update auto import in usage docs
    • #10903 docs: add info about ESM into migration guide.
    • #10885 update migration guide
    • #10884 Move border opts to correct location for samples
    • #10872 Remove V3 support, update readme

    Development

    • #10962 test: turn on types linting
    • #10983 bunp version to 4.1.0
    • #10974 chore: add lint cache
    • #10930 Update react template to V4 vite
    • #10919 Use UDM build for reproducible sample

    Thanks to @Kit-p, @LeeLenaleee, @Simon-He95, @benmccann, @dangreen, @etimberg, @igorlukanin, @letheri and @stockiNail

    Source code(tar.gz)
    Source code(zip)
    chart.js-4.1.0.tgz(1.16 MB)
  • v4.0.1(Nov 14, 2022)

  • v4.0.0-release(Nov 14, 2022)

    Essential Links

    Bugs Fixed

    • #10869 Remove type attribute from dataset specific type specification
    • #10867 check the data set type in DoughnutController
    • #10806 fix: Always draw full arcs and borders for doughnut slices
    • #10855 Fix the missing apply for the color on the legend labels
    • #10851 Enable colors plugin for pie charts

    Types

    • #10869 Remove type attribute from dataset specific type specification
    • #10753 refactor: migrate helpers.options to typescript

    Documentation

    • #10816 Updated docs (why Chart.js + getting started + step-by-step guide)
    • #10857 docs: notes about html legend, tooltip and title
    • #10826 Fix month
    • #10827 Grammar error fixes
    • #10831 Update example chart config type, remove whitespace

    Development

    • #10868 v4.0.0 bump

    Thanks to @BrilliantDeviation7, @LeeLenaleee, @dangreen, @etimberg, @gibson042, @igorlukanin, @luckened, @puneetkathar1, @stockiNail and @t-mangoe

    Source code(tar.gz)
    Source code(zip)
    chart.js-4.0.0-release.tgz(774.71 KB)
  • v4.0.0-alpha.2(Oct 12, 2022)

  • v4.0.0(Oct 12, 2022)

    Essential Links

    • #10759 Fix #10749 - backdrops with rotated labels
    • #10667 fix: calc visible points on update
    • #10655 Provide an empty object when the target of the resolver is undefined
    • #10661 TypeScript: NodeNext support
    • #10639 enable pointStyleWidth for all legend styles

    Breaking Changes

    • #10733 Convert the curve helpers to TS
    • #10728 Convert helpers.extra to TS
    • #10663 Fix autoskip logic
    • #10653 Use ticks.steSize instead of time.stepSize on time and timeseries scales
    • #10646 fix: respect aspect ratio with container height
    • #10643 feat: remove default axis override when custom id is given
    • #10612 Remove tooltip constructor fallbacks, `this.chart` and `this._chart`
    • #9166 Refine logarithmic scaling / tick generation
    • #10571 Put the border opts in own object
    • #10548 fix: same-looking tooltips on charts
    • #10551 Use borderRadius for legend and remove fallbacks
    • #10591 Change way that linear scales calculate min and max
    • #10526 feat: sideEffects false
    • #10549 Remove destroy hook
    • #10540 fix: pass timestamp to ticks callback
    • #10525 feat: add ESM support
    • #10504 fix: treeshaking
    • #10550 Move parameter of TType in ChartMeta to first option
    • #10469 Fix offset on doughnut charts

    Enhancements

    • #10683 Use guard clause typings
    • #10702 Add warning if filler plugin is used but not registered
    • #10653 Use ticks.steSize instead of time.stepSize on time and timeseries scales
    • #10643 feat: remove default axis override when custom id is given
    • #10608 Use the element's window in getComputedStyle
    • #10571 Put the border opts in own object
    • #10605 Change react integration test to TS
    • #10548 fix: same-looking tooltips on charts
    • #10551 Use borderRadius for legend and remove fallbacks
    • #10567 feat: tooltip callbacks fallback
    • #10568 build: emit sourcemaps
    • #10526 feat: sideEffects false
    • #10525 feat: add ESM support
    • #10504 fix: treeshaking

    Bugs Fixed

    • #10691 Use the correct area to clip for dataset drawing when stacked scales are used
    • #10693 fix: aspect ratio calc
    • #10641 FIX: render multiline legend items without overlapping (#10532)
    • #10663 Fix autoskip logic
    • #9166 Refine logarithmic scaling / tick generation
    • #10598 fix: allow beforeTooltipDraw to be cancelable
    • #10540 fix: pass timestamp to ticks callback
    • #10469 Fix offset on doughnut charts

    Types

    • #10772 Convert the Arc element to TS
    • #10734 refactor: migrate helpers.dom to typescript
    • #10733 Convert the curve helpers to TS
    • #10730 Convert the PointElement to TS
    • #10760 Types: Change grid option of CartesianScaleOptions and RadialLinearScaleOptions to Partial of GridLineOptions
    • #10739 Allow to configure X and Y axis ID in TS for bubble charts
    • #10728 Convert helpers.extra to TS
    • #10729 Export declare const enums
    • #10726 Types: Export UpdateModeEnum as const
    • #10722 refactor: move batch of helpers to ts
    • #10712 Add defaults to plugin interface
    • #10683 Use guard clause typings
    • #10660 fix: types and tests
    • #10652 Update bar data type to comply with floating bar charts data
    • #10627 Convert the easing helpers to typescript
    • #10582 Allow animations to be set to false for the tooltip typings
    • #10590 Add `grouped` option to the typings for barchart
    • #10585 add correct padding object to type
    • #10579 fix: allow nulls in barchart data type
    • #10550 Move parameter of TType in ChartMeta to first option

    Documentation

    • #10763 docs: fix typos
    • #10748 Updated dead sample link
    • #10719 Update namespace of logarithmic ticks section
    • #10708 Unify data structure snipets and add ts explanation
    • #10702 Add warning if filler plugin is used but not registered
    • #10666 Fixed broken link in docs
    • #10645 Update link to master umd build
    • #10640 Fix broken link
    • #10621 docs: fix images loading
    • #10569 Document components for bundle optimization
    • #10613 move option to correct namespace
    • #10611 fix lint in docs
    • #10607 Documentation: how to add static typing to plugins

    Development

    • #10787 Bump alpha v4
    • #10632 Bump `markdown-it` in docs
    • #10591 Change way that linear scales calculate min and max
    • #10573 chore: upgrade dependencies
    • #10589 Downgrade karma preprocessor

    Thanks to @Brainshaker95, @GrantHynd, @LeeLenaleee, @Lonylis, @New-dev0, @Zivangu9, @amincheloh, @benmccann, @cmcnulty, @dangreen, @etimberg, @jdufresne, @jwilliams-met, @kartik-madhak, @kurkle, @lucianosantana, @luckened, @rupert-br, @sashashura, @stockiNail, @touletan and @wenzdey

    Source code(tar.gz)
    Source code(zip)
  • v3.9.1(Aug 3, 2022)

  • v3.9.0(Aug 2, 2022)

    Essential Links

    Enhancements

    • #10439 feat: remove line element from scatter controller
    • #10528 feat: pass some chart options to DateAdapter
    • #10405 Add circular prop to arc element
    • #10530 Skip all borders if borderSkipped === true
    • #10517 parsing: support dot(s) in object keys
    • #10519 Enable borderDash option in the grid as scriptable

    Performance

    • #10517 parsing: support dot(s) in object keys

    Bugs Fixed

    • #10524 pass boxWidth only if pointStyleWidth presents
    • #10523 fix: calc visible points on update #10467

    Documentation

    • #10527 Add docs for changing from time scale to logarithmic/linear scale
    • #10518 Improve docs radial linear grid
    • #10522 Fix Stack Overflow tag: chart.js
    • #10520 Fix Stack Overflow tag: chart.js
    • #10515 Fix dead link on reload or open in new tab
    • #10516 Clarifying threshold requirement in the docs for decimation

    Development

    • #10541 Bump to 3.9.0

    Thanks to @LeeLenaleee, @M4sterShake, @benmccann, @dangreen, @kurkle, @peterhauke, @stockiNail, @thabarbados and @touletan

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.9.0.tgz(2.87 MB)
  • v3.8.2(Jul 24, 2022)

  • v3.8.1(Jul 24, 2022)

    Essential Links

    Enhancements

    • #10495 Improve error message with id of the canvas
    • #10412 Add pointStyleWidth option for legend

    Bugs Fixed

    • #10484 Resolve plugin defaults for local plugins
    • #10489 draw tooltip with object borderwidth
    • #10451 Fix options update when changing to shared opts
    • #10454 Fix crash with skipNull and uneven datasets
    • #10414 Respect `fill: false` with custom draw times

    Types

    • #10494 Allow clip to be configurable in options object typescript
    • #10436 Add index to legendItem interface
    • #10404 Add padding to pointLabels type, add type to scriptable context
    • #10387 Allow for each dataset to be individually typed without a main type

    Documentation

    • #10490 document defaults for plugins
    • #10497 Update link to be able to use within github
    • #10446 Add a stale version warning + a link to the latest version of docs
    • #10470 Update integration.md
    • #10447 Enforce maximum width on chart editor blocks in the docs
    • #10456 Update aspectRatio documentation
    • #10415 Update responsive.md
    • #10434 Clarify helpers need to be imported when using bundlers
    • #10410 Fix typo in link to documentation from sample
    • #10400 Fix default value of 'includeInvisible' option in the documentation
    • #10392 Clarify api docs

    Development

    • #10509 Bump to 3.8.1
    • #10493 Bump terser from 4.8.0 to 4.8.1
    • #10471 Bump moment from 2.29.2 to 2.29.4
    • #10431 Bump actions/setup-node from 2 to 3
    • #10430 Bump actions/checkout from 2 to 3
    • #10393 Bump eventsource from 1.1.0 to 1.1.1

    Thanks to @LeeLenaleee, @Pourbahrami, @andrewl64, @dependabot, @dependabot[bot], @etimberg, @ideabrian, @igorlukanin, @kurkle, @naveensrinivasan, @stockiNail and @touletan

    Source code(tar.gz)
    Source code(zip)
  • v3.8.0(May 25, 2022)

    Essential Links

    • #10341 Correct auto.esm.js import to allow module to work in browser
    • #10316 Use abs() when comparing for spanGaps
    • #10320 Bump async from 2.6.3 to 2.6.4
    • #10290 Bump moment from 2.29.1 to 2.29.2
    • #10260 Bump minimist from 1.2.5 to 1.2.6
    • #10204 Bump karma from 6.3.14 to 6.3.16
    • #10200 Bump url-parse from 1.5.7 to 1.5.10
    • #10198 Bump prismjs from 1.25.0 to 1.27.0
    • #10181 Bump url-parse from 1.5.3 to 1.5.7
    • #10146 Bump karma from 6.3.9 to 6.3.14
    • #10150 Bump log4js from 6.3.0 to 6.4.1
    • #10152 Bump engine.io from 6.1.0 to 6.1.2
    • #10151 Bump node-fetch from 2.6.6 to 2.6.7
    • #10149 Bump follow-redirects from 1.14.6 to 1.14.8

    Enhancements

    • #10362 Add option to include invisible points
    • #10328 Resolve canvasGradient is undefined in node
    • #10293 Enable configuration of radial scale point label border radius
    • #10278 Allow time scale to offset using skipped ticks
    • #10046 Interaction functions
    • #10182 Allow individual chart controllers to opt-in to the decimation plugin
    • #10088 Make object notation usable for polarArea and radar
    • #10106 Add new align 'inner' for X axis

    Bugs Fixed

    • #10371 Update to v0.2.1 color dependency to fix bug with invalid colours
    • #10340 Update scale polarArea correctly on data hide
    • #10289 display tooltips only at points in chart area
    • #10328 Resolve canvasGradient is undefined in node
    • #10301 Trigger legend onLeave when the mouse leaves the canvas
    • #10276 Document tooltip draw hooks and only call hooks when the tooltip draws
    • #10157 minimum bar length setting keeps bar base in view

    Types

    • #10364 Types: Allow font to be partial scriptable and individually scriptable
    • #10283 Types: add 'middle' to borderSkipped
    • #10275 Export types for cartesian and radial tick options
    • #10269 add startAngle to radial scale options typings
    • #10254 Add missing fields to the ScriptableContext type
    • #10179 Allow array for line opts in dataset

    Documentation

    • #10308 Add links to docs in all the samples
    • #10259 Fix a typo in data-structures.md
    • #10266 Correct chart initialization flow
    • #10250 Update link to filler plugin
    • #10184 Fix broken link in Animations docs page.
    • #10158 remove hardcoded licenseYear in docs
    • #10156 update link to license and bump license year
    • #10154 Document scale update plugin hooks

    Development

    • #10377 Bump to 3.8.0
    • #10247 Resolve circulair import filler plugin
    • #10243 Replace deprecated String.prototype.substr()
    • #10040 Refactor filler plugin for easier maintenance

    Thanks to @CommanderRoot, @LeeLenaleee, @Talla2XLC, @akiraaso, @dependabot, @dependabot[bot], @etimberg, @joshkel, @kurkle, @kylejonesdev, @linkviii, @luke-heberling, @msteiger, @pzelnip, @t-mangoe and @yhvicey

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.8.0.tgz(285.30 KB)
  • v3.7.1(Feb 12, 2022)

    Essential Links

    Bugs Fixed

    • #10024 Fix using above/below filling option with discontinuous lines

    Types

    • #10124 Add missing mouse events to CoreChartOptions.events type
    • #10133 Allow spanGaps to be specified on LineOptions
    • #10137 Ensure that min/max of TimeScaleOptions can be a string
    • #10075 fix: allow colors as array
    • #10131 Correct type for updateHoverStyle
    • #10130 Type Chart.legend property
    • #10111 Change repeating alingment string to single type
    • #10078 Move scriptable and array to helper function in types
    • #10057 add typing and docs for maxTicksLimit all scales

    Documentation

    • #10138 Sort docs sub menus alphabetically, add line and plugin sample
    • #10100 Sort line and bubble dataset options alphabetically
    • #10103 Fix typos found by codespell
    • #10057 add typing and docs for maxTicksLimit all scales
    • #10045 typo Cofiguration

    Development

    • #10148 Bump to 3.7.1
    • #10117 add SubTitle to TS register test
    • #10078 Move scriptable and array to helper function in types
    • #10038 Improve issue templates

    Thanks to @DimitriPapadopoulos, @LeeLenaleee, @LovelyAndy, @caub, @charlesmass2, @etimberg, @jmorel and @stockiNail

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.7.1.tgz(282.50 KB)
  • v3.7.0(Dec 23, 2021)

    Essential Links

    Enhancements

    • #9949 Add centerPointLabels option for linear radial scale
    • #9970 Limit active element changes to chartArea
    • #9944 Improvements to tooltip positioners
    • #9933 add beforeDestroy hook
    • #9919 Support "r" axis for non-intersecting interaction
    • #9920 Feature/active elements on top
    • #9877 Add borderJoinStyle option for arc elements

    Bugs Fixed

    • #10021 radialLinear: fix positioning & scaling
    • #10020 radialLinear: fix getIndexAngle when there are no labels (left)
    • #10018 radialLinear: Hide pointLabels of hidden data
    • #9992 Fix setActiveElements behavior after a mouse event
    • #9970 Limit active element changes to chartArea
    • #9969 Pass object from array as value to _fallback

    Types

    • #9986 Types/ type suggestedMin and suggestedMax for time scale
    • #9985 Types/Allow min-max as string timescale
    • #9937 Types/allow for multiline labels in tick callback

    Documentation

    • #10013 Docs/Add sample for centered point labels
    • #9994 Docs/clarify usage of ticks callback (#9991)
    • #9960 Docs/clarify samples
    • #9952 Try to improve documentation for new users

    Development

    • #10011 Bump version to 3.7.0, update deps

    Thanks to @LeeLenaleee, @doug-a-brunner, @joshkel, @kurkle, @luukdv and @t-mangoe

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.7.0.tgz(282.18 KB)
  • v3.6.2(Dec 5, 2021)

  • v3.6.1(Nov 30, 2021)

    Essential Links

    • #9683 Update stale documentation for axis titles

    Bugs Fixed

    • #9922 Fix tooltip caret position when it is positioned at the corners
    • #9921 Category: Track automatically added labels
    • #9915 Chart area boxes receive 0 margin during the final layout process
    • #9876 Detect detach/attach in same observation
    • #9857 Synchronize data visibility with data changes
    • #9871 Fix inRange for full circle arc
    • #9872 Configure all datasets before updating any
    • #9861 Prevent proxying CanvasGradient in Node platform
    • #9855 Fix incomplete TS type for Chart.register + others
    • #9831 Pass number format to tooltip
    • #9794 Remove scriptability from defaults.font types

    Types

    • #9917 Add a note about the type parameters of the ChartData type
    • #9916 Doughnut chart options have an offset property
    • #9858 Types: add autopadding to typing
    • #9855 Fix incomplete TS type for Chart.register + others
    • #9837 update animation event to include currentStep instead of currentState
    • #9834 Types: include initial variable in the AnimationEvent
    • #9794 Remove scriptability from defaults.font types
    • #9800 Fix object notation border width barchart

    Documentation

    • #9923 Add notes about more specific options for axes
    • #9917 Add a note about the type parameters of the ChartData type
    • #9900 Fix a typo in index.md
    • #9893 Fix a typo in contributing.md
    • #9866 docs: Add a link to front-end integrations
    • #9865 Update misleading sample comment
    • #9812 Docs/update scale position type
    • #9803 Define with let to avoid "assignment to constant" errors
    • #9798 New sample: Progressive Line With Easing
    • #9791 Update namespace and charts for legend override
    • #9787 Add warning about chart types overriding plugin defaults

    Development

    • #9929 Bump to 3.6.1

    Thanks to @LeeLenaleee, @NorthBlue333, @benmccann, @carsonalh, @erictheise, @etimberg, @fishmandev, @igorlukanin and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.6.1.tgz(280.58 KB)
  • v3.6.0(Oct 23, 2021)

    Essential Links

    • #9757 ci(workflow): add cache to workflows using actions/setup-node
    • #9587 Ensure that controllers derived from the bar controller work correct in stacked charts

    Enhancements

    • #9761 Add chart, p0.raw, p1.raw to segment context
    • #9758 Support nested scriptable options for datasets
    • #9751 Disable animations for BasicPlatform (offcreen)
    • #9716 Add layout.autoPadding option
    • #9679 Add sanity check for stepSize
    • #9625 Configurable tooltip box padding
    • #9624 Add sanity checks for scale options
    • #9622 Add parsing support to pie/doughnut charts
    • #9620 Enable per-corner border radius in tooltip
    • #9557 Detect attach/detach from any level

    Performance

    • #9661 cache also undefined values in option resolver

    Bugs Fixed

    • #9656 Fix cleaning up metasets
    • #9767 Fix stacked fill with lines over multiple scales
    • #9764 Bubble: Properly parse radius for non-object data
    • #9770 Support nested scriptable defaults for datasets
    • #9766 Fix controller.getMinMax for stacked charts
    • #9729 Types: Move tooltip methods to model from plugin
    • #9719 Linear: determine grace amount from range
    • #9718 Fix chart crashing when only min is defined
    • #9641 Fix chart crashing when max is defined but ticks are empty
    • #9678 Bar: fix too thick borders
    • #9644 Fix segment styling with gaps
    • #9613 Fix plugin event filtering of renamed events
    • #9592 Fix control points on animated line w/o border

    Types

    • #9729 Types: Move tooltip methods to model from plugin
    • #9699 Support false for doughnut and polar area chart animation options
    • #9680 Fix some typings issues
    • #9634 Add align to interface of scale title config
    • #9610 fix getRelativePosition type definition
    • #9617 Remove offscreen canvas types
    • #9570 Add missing typings of helpers, add automatic test

    Documentation

    • #9741 Added hyperlink on Chart.js LOGO
    • #9720 Fixed 4 links
    • #9747 linked LICENSE.md to README
    • #9724 docs: fix small error
    • #9710 Fix: Typo spaning--> spanning
    • #9711 Fix: Typo ingnore-->ignore
    • #9708 Fix: Typo that-->than
    • #9697 Document sample components file
    • #9626 fix: broken link to `cubicInterpolationMode`
    • #9618 Update tooltip callback docs
    • #9619 Update old codepen links to ones for v3

    Development

    • #9784 Bump to 3.6.0
    • #9755 Fix: Typo 'is less' -> 'are lesser'
    • #9744 Changed var to const/let in the docs
    • #9646 Remove const me = this pattern

    Thanks to @0xflotus, @Flupp, @KurtPreston, @Prashoon123, @SandeepKrSuman, @aha-oretama, @atharva01903, @davidsandoz, @etimberg, @gautammsuthar, @igolskyi, @joshkel, @kurkle, @mikidoodle, @nikethanrai, @oscard0m and @shubham242k

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.6.0.tgz(278.48 KB)
  • v3.5.1(Aug 18, 2021)

    Essential Links

    • #9563 support crossAlign on mirrored y-axis

    Bugs Fixed

    • #9525 Keep track of parsed array changes when parsing===false
    • #9489 Fix _isPointInArea helper when no area is provided
    • #9469 Remove index interaction override barChart

    Types

    • #9550 Grid line z property in TS types
    • #9546 Add number to the title scale padding as type
    • #9490 Types: Add `tooltip` to chart instance
    • #9477 Types: Change `context.chart` to plain `Chart`

    Documentation

    • #9555 Fix broken link.
    • #9549 Ensure that docs have more width in the page
    • #9516 fix 2 broken links, clarify order property
    • #9524 Add more details on legend sort function
    • #9503 Fix typo in docs on axes labelling
    • #9479 Move pointStyle types and update plugin link&render chart
    • #9465 Longhand labels key in getting started
    • #9475 Adjust text to code example
    • #9472 Update charts.md

    Development

    • #9565 Update to 3.5.1 version number
    • #9556 Remove chart.scale property (always undefined)

    Thanks to @LeeLenaleee, @M4sterShake, @Yash-Singh1, @etimberg, @ewanmellor, @juan-cortes, @kurkle, @niklasnoldin and @snoozbuster

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.5.1.tgz(277.12 KB)
  • v3.5.0(Jul 25, 2021)

    Essential Links

    Enhancements

    • #9452 Bar: add 'middle' option for borderSkipped
    • #9450 Add ability to hide specific data element
    • #9451 Add data/dataset indices to line segment context
    • #9364 Layout: support box stacking
    • #9360 Add 'shape' mode for filler-plugin
    • #9327 Adding threshold option to decimation plugin

    Bugs Fixed

    • #9431 Ensure getPrototypeOf will not crash on plugin options with no scopes
    • #9448 Fix DomPlatform.isAttached
    • #9447 Apply segment styles with only single segment
    • #9446 Fix interaction on partially visible bar
    • #9444 Typescript 4.2+ compatibility
    • #9443 Don't draw points outside chartArea
    • #9442 Fix: config.platform was ignored
    • #9433 Linear scale handle min === max when abs(max) > Number.MAX_SAFE_INTEGER
    • #9426 lower default value of grid z index so it draws behind chart elements
    • #9425 Properly update stacks when datasets index changes
    • #9413 Fix center axis title positions
    • #9410 Limit Math.asin inputs to the range [-1, 1]
    • #9399 Bar: inflate rects by 0.33px to avoid artifacts
    • #9400 Fix bar direction when minBarLength is applied
    • #9394 Fix stacked box dimension calculation with weights
    • #9353 Adjust legend hitboxes when RTL and each item has a different size
    • #9373 Point label specific scriptable context
    • #9367 Decimation: Prevent buffer overflow

    Types

    • #9462 Update radar dataset option typings
    • #9444 Typescript 4.2+ compatibility
    • #9432 Allow dataset specific ChartMeta type extensions
    • #9438 Define bounds as a field common to all cartesian axes options
    • #9403 Add missing resizeDelay option to types
    • #9386 Indicate that `SubTitle` is a plugin in TS types
    • #9385 Fix type linting for merge between two PRs
    • #9363 Resolve warnings from typings
    • #9376 Improve LegendElement and TooltipItem type definitions

    Documentation

    • #9458 Adds HTMLCanvasElement as possible value for pointStyle option in the documentation
    • #9384 Add SubTitle to the list of all esm imports

    Development

    • #9464 Bump version to 3.5.0, update deps
    • #9414 Update a failing fixture
    • #9363 Resolve warnings from typings

    Thanks to @LeeLenaleee, @Nico-DF, @boreq, @drewsonne, @etimberg, @kurkle and @stockiNail

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.5.0.tgz(277.11 KB)
  • v3.4.1(Jul 4, 2021)

    Essential Links

    • #9349 Update deps

    Bugs Fixed

    • #9345 Timeseries: support panning
    • #9343 Account for floating point error in niceNum helper
    • #9341 Enable pointStyle for doughnut, pie, and polar area charts
    • #9340 Ensure correct item is clicked when a horizontal legend is in RTL mode
    • #9326 Fix comma causing Terser issue

    Types

    • #9348 Add type tests for float bar / object data arrays
    • #9336 Update types with more possible events
    • #9330 Fix typing of the isoWeekday field

    Documentation

    • #9338 Fixes spacing options in the documentation for doughnuts charts

    Development

    • #9350 Bump version to 3.4.1

    Thanks to @LeeLenaleee, @TriPSs, @etimberg, @kurkle and @stockiNail

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.4.1.tgz(273.35 KB)
  • v3.4.0(Jun 26, 2021)

    Essential Links

    Enhancements

    • #9294 New plugin: subtitle
    • #9277 Apply maxTicksLimit to grid when ticks are hidden
    • #9286 Fix: Don't use clip/unclipArea when `clip: false`
    • #9262 Docs: Add copy button to code blocks
    • #9208 Bar width and height are always defined regardless of orientation

    Bugs Fixed

    • #9290 Legend: fix layout padding handling
    • #9291 Bar: ignore not-grouped bars from group bar count
    • #9287 Filler: skip NaN points from end of segment
    • #9261 Fix updating of active elements
    • #9260 Replace [...set] with Array.from(set)
    • #9252 `null` or `undefined` should skip grid lines in the time scale
    • #9199 Fix rtl legend text alignment
    • #9191 Tick backdrop padding is not scriptable

    Types

    • #9318 fix typings
    • #9317 Change callback name in typing and documentation
    • #9292 resolve auto register typescript failure
    • #9284 added fill type to line in options object and to radar dataset options
    • #9263 Fix type definitions and docs for `getPixelForValue`
    • #9226 Add missing types to legend

    Documentation

    • #9319 Clarify how to import and use the helper functions with bundlers
    • #9318 fix typings
    • #9317 Change callback name in typing and documentation
    • #9315 Fix broken link in scatter chart doc
    • #9296 Docs: describe catching events with plugin
    • #9263 Fix type definitions and docs for `getPixelForValue`
    • #9262 Docs: Add copy button to code blocks
    • #9237 Docs: fix broken and inconsistent links
    • #9228 Fix broken guidelines url in PR template
    • #9219 Update custom legend onClick example
    • #9207 Add explanation on how to run the samples locally

    Development

    • #9322 Bump to version 3.4.0
    • #9276 Refactor radialLinear scale and renderText helper

    Thanks to @DPS0340, @LeeLenaleee, @akeinhell, @benlumley, @etimberg, @joshkel and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.4.0.tgz(272.54 KB)
  • v3.3.2(May 30, 2021)

  • v3.3.1(May 29, 2021)

    Essential Links

    Bugs Fixed

    • #9181 Linear: Respect bounds option in tick generation
    • #9172 Add declaration for Decimation plugin
    • #9170 Fix clearStacks with custom scaleId
    • #9171 Ignore items outside chart area for interaction
    • #9153 Stop mutating arc state while drawing
    • #9152 Fix: Arc getCenterPoint when full circle

    Types

    • #9172 Add declaration for Decimation plugin

    Documentation

    • #9173 Add documentation about default scales
    • #9168 Update pointstyle type and default value
    • #9160 show the utils file in the samples page to clarify what the functions do

    Development

    • #9182 Version bump to 3.3.1

    Thanks to @LeeLenaleee, @etimberg and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.3.1.tgz(270.91 KB)
  • v3.3.0(May 24, 2021)

    Essential Links

    Enhancements

    • #9084 Support monotone cubic interpolation for vertical line charts
    • #9088 Fix element reset animations in vertical line and bubble charts
    • #9020 Add includeBounds option for cartesian ticks

    Bugs Fixed

    • #9129 Further improve linear tick collision estimation
    • #9122 Show correct decimal places when using count but `min` is not an integer
    • #9118 Fix arc offset calculation
    • #9120 Fix animations when data is replaced
    • #9121 Fix doughnut rotation on float edge cases
    • #9105 Delay data to elements synchronization to update
    • #9101 Make sure context indices are up to date
    • #9062 Fix setting options in array of objects
    • #9067 Fix polar area tooltip item label
    • #9060 add derived axis default values
    • #9050 Fix detecting changed events
    • #9015 Round canvas.style dimensions to avoid blurring
    • #9046 Types: Export DecimationAlgorithm as const
    • #9045 Allow scale to auto-adjust it's min when stacked
    • #9042 Fix line segments with alignToPixel
    • #9027 Fix: Avoid negative layout dimensions

    Types

    • #9124 Correctly extend ExtendedPlugin interface
    • #9123 Add missing props to ChartArea type
    • #9046 Types: Export DecimationAlgorithm as const

    Documentation

    • #9147 Improved error message when no date adapter provided
    • #9146 Fix scales option in example
    • #9126 Add attribute to custom legend onclick sample
    • #9115 Add documentation note about only styling the parent div
    • #9111 remove double sentence and adjust scale to scales.r
    • #9044 HTML legend handles doughnut/pie charts
    • #9030 fix typo on api.md
    • #9024 Docs update file location pointers

    Development

    • #9149 Bump version to 3.3, update dependencies
    • #9102 Upgrade dependencies
    • #9091 Add test for issue 9085

    Thanks to @Flupp, @LeeLenaleee, @esuEichi, @etimberg, @jonrimmer, @joshkel, @kurkle, @nagix and @sylhare

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.3.0.tgz(270.67 KB)
  • v3.2.1(May 1, 2021)

    Essential Links

    Bugs Fixed

    • #9012 Enable scriptable element chart options
    • #9008 Fix for enabling monotone cubicInterpolationMode when tension is 0
    • #8995 Ignore truncated pixels in bar width calculation
    • #8983 Improve linear tick generators collision estimation

    Types

    • #9012 Enable scriptable element chart options
    • #9010 Add test for DecimationAlgorithm type

    Documentation

    • #9011 Add documentation on tooltip xAlign and yAlign

    Development

    • #9014 Bump version to 3.2.1

    Thanks to @etimberg, @kurkle and @nagix

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.2.1.tgz(268.45 KB)
  • v3.2.0(Apr 24, 2021)

    Essential Links

    Enhancements

    • #8973 Add drawTime: beforeDraw option to filler
    • #8941 Only enable the bar borderRadius at the end of the stacks
    • #8936 Scale: draw border on separate layer after grid
    • #8931 Cartesian scale tick backdrop
    • #8926 Add `initial` property to animation callbacks

    Performance

    • #8933 Time: cache options needed by parse

    Bugs Fixed

    • #8972 Fix skipNull for subsequent datasets
    • #8934 Fix for allowing parsing:false with stacks
    • #8928 Allow the events option to be changed at runtime

    Types

    • #8944 Update helpers types export

    Documentation

    • #8971 In html tooltip sample padding is read from the options
    • #8942 Add example plugins for border and quadrants

    Development

    • #8974 Bump to version 3.2.0

    Thanks to @TinfoilPancakes, @etimberg and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.2.0.tgz(267.93 KB)
  • v3.1.1(Apr 17, 2021)

    Essential Links

    Performance

    • #8898 Do not redraw endlessly on mouse move

    Bugs Fixed

    • #8919 Fix: Fill vertical lines
    • #8913 Scale: Make sure grace is applied only once
    • #8918 Fix: Initialize data object when replaced
    • #8914 Skip ticks by callback value as documented
    • #8911 Fix: don't draw segments out of bounds
    • #8898 Do not redraw endlessly on mouse move
    • #8883 Setting correct decimated values when below threshold
    • #8882 Update @simonbrunel/vuepress-plugin-versions

    Types

    • #8909 Fix tooltip positioners and scriptable signature
    • #8891 add number, null and undefined as valid return types

    Documentation

    • #8910 Fix minor issues in docs
    • #8907 Fix javascript syntax error in docs/general/padding.md
    • #8904 Update v3-migration.md
    • #8887 Docs: Update version menu title
    • #8882 Update @simonbrunel/vuepress-plugin-versions

    Development

    • #8927 Bump to 3.1.1

    Thanks to @DaaGER, @LeeLenaleee, @Nico-DF, @etimberg and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.1.1.tgz(265.87 KB)
  • v3.1.0(Apr 10, 2021)

    Essential Links

    • #8856 Update dependencies (excluding typescript)
    • #8843 Filtering data before decimation

    Enhancements

    • #8876 Enable event filtering per plugin
    • #8875 Legend boxes support borderRadius
    • #8874 Tooltip colorbox supports configurable borderWidth, borderRadius, and dash effect
    • #8867 Support mirror option on x-axis
    • #8864 Filler: support segment backgroundColor
    • #8844 Allow styling of line segments
    • #8839 Apply scale context to ticks scriptable options instead of chart context
    • #8823 Dissociate border options from grid options

    Bugs Fixed

    • #8794 Limit onHover to chartArea
    • #8877 Font: validate style, move defaults to `weight`
    • #8872 Handle animating stacked bars from null values
    • #8867 Support mirror option on x-axis
    • #8868 Consider dynamically positioned scales for padding
    • #8838 _boundSegments did not work on rising line
    • #8832 Fix: update line options on resize, for gradients
    • #8822 Time: Use callback helper on ticks.callback

    Types

    • #8847 Include `grace` in LinearScaleOptions type definition

    Documentation

    • #8866 Add version menu in documentation
    • #8869 Document the no-parsing requirement of decimation
    • #8863 Docs/broken link
    • #8850 Docs migration register options
    • #8837 Fix typos in canvas-background.md
    • #8836 Fix typo in migration guide
    • #8829 complete the first 'getting-started' example
    • #8828 Document plugin event handling

    Development

    • #8878 Bump to 3.1.0

    Thanks to @LeeLenaleee, @MosesMendoza, @Nico-DF, @etimberg, @kurkle, @m-ahmadi, @mjcross and @stockiNail

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.1.0.tgz(265.39 KB)
  • v3.0.2(Apr 4, 2021)

    Essential Links

    Bugs Fixed

    • #8811 Fix: tick spacing when min=0 | niceMin or max=0
    • #8801 Correct decimation plugin documentation
    • #8793 Logarithmic: handle null/NaN values

    Documentation

    • #8791 Docs small update
    • #8803 Update documentation for getElementsAtEventForMode
    • #8801 Correct decimation plugin documentation
    • #8798 Update ticks.callback documentation

    Thanks to @LeeLenaleee, @etimberg and @kurkle

    Source code(tar.gz)
    Source code(zip)
    chart.js-3.0.2.tgz(259.90 KB)
Owner
Chart.js
Simple, clean and engaging charts for designers and developers
Chart.js
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.8k Jan 9, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Smoothie Charts: smooooooth JavaScript charts for realtime streaming data

Smoothie Charts is a really small charting library designed for live streaming data. I built it to reduce the headaches I was getting from watching ch

Joe Walnes 2.2k Dec 13, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Joseph Huckaby 8 Dec 1, 2022
Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Felix Costa 473 Dec 15, 2022
Simple responsive charts

Big welcome by the Chartist Guy Checkout the documentation site at http://gionkunz.github.io/chartist-js/ Checkout this lightning talk that gives you

Gion Kunz 26 Dec 30, 2022
Simple, responsive, modern SVG Charts with zero dependencies

Frappe Charts GitHub-inspired modern, intuitive and responsive charts with zero dependencies Explore Demos » Edit at CodePen » Contents Installation U

Frappe 14.6k Jan 4, 2023
A simple ember component for adding Charts

Ember Chart This Ember CLI addon is a simple wrapper for ChartJS (v2.9). Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js v10 or

Ahmed Omran 136 Oct 24, 2022
A simple script for pure javascript charts.

MK Charts A simple pure Javascript for displaying circle charts. Demo: https://mkirschen.de/mk-scripts/mk-charts/ Circle charts To insert a chart all

Marcus Kirschen 6 Dec 14, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022