Chart.js module for charting financial securities

Overview

Chart.js Financial Charting

Chart.js module for Candlestick and OHLC charts

Roadmap

Chart.js 2.7.0 added our timeseries scale as new option called distribution: series. This has greatly improved support for financial timeseries.

Chart.js 2.7.1 added fixes for timeseries.

Chart.js 2.7.2 added formatting of timestamps in tooltips.

Chart.js 2.7.3 included a fix for hovering.

Chart.js 2.8.0 added datetime adapters and time scale performance improvements. This allows users to use a datetime library of their choosing such as Luxon in order to get i18n and timezone support

Chart.js 2.9.0 added improved autoskipping, support for floating bars, better support for mixed chart types, and numerous performance improvements.

Chart.js 3.0.0 removed the need for custom scales, which means logarithmic scale is now supported. It also has numerous performance improvements.

Comparison

We are aiming to make Chart.js the only popular JavaScript library that is both performant and has good timescale handling.

Most chart libraries don't have great handling of timescale axes and will not always choose the first of the month, year, etc. as labels. This library leverages the concept of major ticks that we introduced in Chart.js. E.g. it will make sure that the first day of each month is plotted before plotting days in between.

One of the best libraries we've found for financial charts is react-stockcharts. However, it ties the user to utilizing React.

Because Chart.js utilizes canvas it is more performant than the majority of JavaScript charting libraries. In a benchmark of the fastest JavaScript chart libraries, Chart.js performs respectably. Chart.js is slower than some of the fastest libraries like uPlot because it accepts varied input (parsing, linear and timeseries support in time scale, etc.) and has animation support (which is still costly even when off due to the way the code is structured).

Documentation

As we near an initial release we will add additional documentation. For now, please see the docs directory.

Examples

Examples are available here: https://chartjs.github.io/chartjs-chart-financial/

Date Libraries & IE Support

IE may not be supported because we use some newer ES features. We will need to apply Babel to fix this

Chart.js requires that you supply a date library. The examples utilize chartjs-adapter-luxon, which has the best support for i18n and time zones. However, in order to use Luxon with IE you need to supply polyfills. If you require IE support you may find it easier to use another date library like Moment or date-fns. Please see the Chart.js documentation for more details on date adapters.

Related Plugins

The plugins below may be particularly interesting to use with financial charts. See the Chart.js plugin API and longer list of plugins for more info about Chart.js plugins generally.

Building

Builds

npm install
gulp build
Comments
  • Updated to latest chart.js, ESM build, types and updated test

    Updated to latest chart.js, ESM build, types and updated test

    Thanks for contributing.

    Description

    Updated Chart.js peer dependency to the latest version, and fixed broken tests. Added ESM build to avoid warnings when using the plugin with Angular (https://github.com/valor-software/ng2-charts/pull/1276)

    enhancement 
    opened by santam85 15
  • NPM Registry as beta or @next

    NPM Registry as beta or @next

    I know that this is not in the npm registry yet. Would you consider adding it as a -beta.x or with a @next tag? It would get more adoption while setting the expectation that it's not ready for prime time. This is a pattern that other libraries, such as vuefire with firestore support, has used.

    opened by davidkassa 13
  • Improved samples

    Improved samples

    I just want to try this out. Could you please provide a sample that works out of the box in the samples folder?

    I am looking at index.html. Chart.bundle.js could perhaps be a cdn reference? Chart.Financial.js could be prebuilt and available?

    Well done!

    opened by mce1978 12
  • Tooltips broken for mixed charts

    Tooltips broken for mixed charts

    Hi, this is a wonderful plugins. I really loved using it, but i have some issues since i upgraded to 2.8.0chart.js

    Sometimes the underlined error comes out, and the plotting stops or makes huge lags.

    Do you know how i could fix this? I upgraded all the chart.js related scripts, but wont work out

    chartjs-chart-financial.js:118 Uncaught TypeError: Cannot read property 'toFixed' of undefined
        at i.label (chartjs-chart-financial.js:118)
        at Chart.min.js:7
        at Object.each (Chart.min.js:7)
        at i.getBody (Chart.min.js:7)
        at i.update (Chart.min.js:7)
        at i.handleEvent (Chart.min.js:7)
        at ni.eventHandler (Chart.min.js:7)
        at i (Chart.min.js:7)
        at HTMLCanvasElement.Fe.(anonymous function) (https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7:77594)
    
    
    opened by rashearth 11
  • latest commit ef246ede4d20a has broken me

    latest commit ef246ede4d20a has broken me

    Not been able to trace through to the root of the problem, I'm afraid - and my code isn't pretty enough to give you a 'steps to reproduce'. I see from the commit that the sample tests have been updated to use integers instead of date strings on the x-axis, could this be related? I have custom y-axis called 'price' instead of 'y', changing this to 'y' doesn't do much though.

    have some sample data: "[{"t":"2020-06-18T00:00:00Z","o":0.9336,"h":0.93406,"l":0.93266,"c":0.93345,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T01:00:00Z","o":0.93345,"h":0.9344,"l":0.93015,"c":0.93158,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T02:00:00Z","o":0.93158,"h":0.93175,"l":0.93068,"c":0.93132,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T03:00:00Z","o":0.93132,"h":0.93251,"l":0.93098,"c":0.93213,"isTrendingUp":true,"prospects":[]},{"t":"2020-06-18T04:00:00Z","o":0.93213,"h":0.93301,"l":0.93127,"c":0.9326,"isTrendingUp":true,"prospects":[]},{"t":"2020-06-18T05:00:00Z","o":0.9326,"h":0.93337,"l":0.93165,"c":0.93195,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T06:00:00Z","o":0.93195,"h":0.93314,"l":0.93149,"c":0.93176,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T07:00:00Z","o":0.93176,"h":0.93197,"l":0.93046,"c":0.93152,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T08:00:00Z","o":0.93152,"h":0.93368,"l":0.93093,"c":0.93292,"isTrendingUp":true,"prospects":[]}]"

    nothing particularly funky with my dataset:

    { label: ['Candles'], borderColor: 'black', color: { up: 'white', down: 'black', unchanged: 'gray' }, data: candles, prospects: candles.map(c => c.prospects), order: 10, yAxisID: 'price', categoryPercentage: 1.0, barPercentage: 1.0 }

    defaults are also pretty boring: financial: { scales: { x: { distribution: 'linear' } } },

    In the meantime, I've forked & reverted back to the previous commit, which works perfectly for me. #mystery.

    opened by CupcakeThief 10
  • Adding volume bars

    Adding volume bars

    I gave the financial chart a first try today and I was surprised how well it already works! I hope this gets released soon so more people can use it :).

    One issue I had: I tried to add volume bars by adding a bar chart to the financial chart. There were no errors, but the bar chart was not shown. Is this possible or would this have to be implemented in the financial chart directly? (reference how I wanted it to look: https://bittrex.com/Market/Index?MarketName=BTC-ETH)

    opened by AndreasGassmann 8
  • Using Panning (chartjs-plugin-zoom) with Financial Chartjs

    Using Panning (chartjs-plugin-zoom) with Financial Chartjs

    Hi,

    I am having some difficulty in getting x-axis Panning (from chartjs-plugin-zoom) to work with chartjs-chart-financial.

    I am able to use the Zoom functionality fine and zooming in/out of the financial candlestick chart is working as expected.

    After zooming into the financial chart, I can pan up/down on the y-axis perfectly fine to view the rest chart on the y-axis (which is off the screen due to just zooming in).

    However, when I try to pan left/right on the chart after zooming in, it doesn't seem to work. The financial chart changes and snaps back and is no longer zoomed in on the x-axis. Suddenly, the chart is showing all of the x-axis data like it was before I zoomed into the chart... although keep in mind, the y-axis is still zoomed in/stretched.

    Has anyone else tried getting panning (particularly x-axis panning) to work properly on zoomed ChartJS Financial candlestick Charts? I'm wondering whether this issue is known? Is it a bug or whether panning is just not supported on the financial charts?

    I'm currently using:

    • ChartJS v3.2.1
    • chartjs-plugin-zoom v1.0.1
    • chartjs-chart-financial v0.1.0

    Please note: I have tested this with both 'candlestick' and normal 'line' charts. I am only facing these x-axis panning issues on 'candlestick' charts. For 'line' charts, I can zoom in and pan around the chart staying zoomed in on both axes, unlike 'candlestick' where the x-axis doesn't pan.

    See below for my chart config:

        var ctx = document.getElementById('chart').getContext('2d');
    
        var myChart = new Chart(ctx, {
            type: 'candlestick',
            data: {
                datasets: [{
                    label: 'Test label',
                    data: priceData
                }]
            },
            options: {
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
                            mode: 'xy'
                        },
                        zoom: {
                            wheel: {
                                enabled: true,
                                modifierKey: 'ctrl'
                            },
                            pinch: {
                                enabled: true
                            },
                            mode: 'xy',
                        }
                    }
                }
            }
        });
    
    opened by LongPeakBlue 7
  • Add hasValue method to elements.Financial

    Add hasValue method to elements.Financial

    Description

    When options.tooltips.position is set to 'average' or not specified, the tooltip won't appear. When options.tooltips.position is set to 'nearest', the tooltip will appear but not be centered on the candle.

    This happens because the default Element.hasValue checks _model.x and _model.y, but elements.Financial doesn't have _model.y property. This PR adds hasValue method to elements.Financial, which checks _model.x, _model.candleOpen, _model.candleHigh, _model.candleLow and _model.candleClose.

    Edit: For tooltipPosition, (vm.candleOpen + vm.candleClose) / 2 is used instead of (vm.candleHigh + vm.candleLow) / 2 so that the tooltip is centered on the fat part of the bar.

    Testing

    The screenshots below are examples with options.tooltips.position = 'nearest'

    Master: https://jsfiddle.net/nagix/ub8m5tzk/ screen shot 2019-02-14 at 12 26 45 am

    This PR: https://jsfiddle.net/nagix/dsx4vb6h/ screen shot 2019-02-14 at 12 27 16 am

    opened by nagix 7
  • [BUG] Border disappears after hover on candlestick

    [BUG] Border disappears after hover on candlestick

    On a candlestick chart, after hovering over a value, the borders disappear if the chart is configured to display a tooltip with the following parameters :

    options: {
      tooltips: {
        position: 'nearest',
        mode: 'index',
      },
    },
    

    jsfiddle

    Before hover

    image

    After

    image

    opened by loicbourgois 7
  • mixed types

    mixed types

    Hi,

    I try to use mixed types: https://www.chartjs.org/docs/latest/charts/mixed.html

    But the 'type' value is dominant at a higher level;

    var chart = new Chart(ctx, {
            type: "candlestick",
            data: {
                datasets: [{
                    type: "candlestick",
                    label: marketName,
                    data: candleData
                }, {
                    type: "line",
                    label: supportLevel,
                    data: lineData
                }
            }
        }
    );
    
    opened by erikjonkers 6
  • How to use chart-financial using npm and webpack?

    How to use chart-financial using npm and webpack?

    Hello,

    I am using npm to download the chart-js-financial module by pointing to the repo:

    "dependencies": {
        "chart.js": "^3.0.0-beta.6",
        "chartjs-chart-financial": "github:chartjs/chartjs-chart-financial#master",
    }
    

    Here is how I am importing it into my JS files:

    import {BarController, BarElement, Chart, LineController, LineElement, PointElement} from 'chart.js';
    import 'chartjs-chart-financial'
    
    Chart.register(LineElement, PointElement, LineController, BarController, BarElement);
    

    During the webpack build, I see these warnings:

    WARNING in ./node_modules/chartjs-chart-financial/src/controller.candlestick.js 47:3-27
    export 'default' (imported as 'Chart') was not found in 'chart.js' (possible exports: Animation, Animations, ArcElement, BarController, BarElement, BasePlatform, BasicPlatform, BubbleController, CategoryScale, Chart, DatasetController, DomPlatform, DoughnutController, Element, Filler, Interaction, Legend, LineController, LineElement, LinearScale, LogarithmicScale, PieController, PointElement, PolarAreaController, RadarController, RadialLinearScale, Scale, ScatterController, Ticks, TimeScale, TimeSeriesScale, Title, Tooltip, _adapters, animator, defaults, layouts, plugins, registry)
     @ ./node_modules/chartjs-chart-financial/src/index.js 5:0-64 11:15-36
    

    And if I try to run the code in the browser, I get these errors –

    [Error] TypeError: undefined is not an object (evaluating 'chart_js__WEBPACK_IMPORTED_MODULE_0__.default.defaults')
    	Eval Code (element.financial.js:10)
    	eval
    	./node_modules/chartjs-chart-financial/src/element.financial.js (index.js:453)
    	__webpack_require__ (index.js:2421)
    	Eval Code (element.candlestick.js:7:96)
    	eval
    	./node_modules/chartjs-chart-financial/src/element.candlestick.js (index.js:438)
    	__webpack_require__ (index.js:2421)
    	Eval Code (controller.candlestick.js:8:98)
    	eval
    	./node_modules/chartjs-chart-financial/src/controller.candlestick.js (index.js:393)
    	__webpack_require__ (index.js:2421)
    	Eval Code (index.js:3:104)
    	eval
    	./node_modules/chartjs-chart-financial/src/index.js (index.js:482)
    	__webpack_require__ (index.js:2421)
    	Eval Code (trades.js:17:101)
    	eval
    	./trading_suite/static/src/trades.js (index.js:2384)
    	__webpack_require__ (index.js:2421)
    	Eval Code (index.js:4:85)
    	eval
    	./trading_suite/static/src/index.js (index.js:2330)
    	__webpack_require__ (index.js:2421)
    	(anonymous function) (index.js:2483)
    	Global Code (index.js:2485)
    

    Any idea what could be going wrong here? I'm fairly new to npm and webpack so any advice is much appreciated here :)

    opened by thezentrader 5
  • BUG on calculating the min sample size

    BUG on calculating the min sample size

    Hi there, I am using chartjs v3.6.0 and moment (with moment adapter) i faced an issue while i am trying to use this plugin. Here is the problem;

    Screen Shot 2022-11-14 at 00 26 27

    After some investigations i found the problem;

    function computeMinSampleSize(scale, pixels) {
            let min = scale._length;
            let prev, curr, i, ilen;
    
            for (i = 1, ilen = pixels.length; i < ilen; ++i) {
                min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
            }
    
            for (i = 0, ilen = scale.ticks.length; i < ilen; ++i) {
                curr = scale.getPixelForTick(i);
                min = i > 0 ? Math.min(min, Math.abs(curr - prev)) : min; // here min value is becaming NaN because of curr and prev can be NaN
                prev = curr;
            }
    
            return min;
        }
    

    My solution was (for very quick fix);

    function computeMinSampleSize(scale, pixels) {
            let min = scale._length;
            let prev, curr, i, ilen;
    
            for (i = 1, ilen = pixels.length; i < ilen; ++i) {
                min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
            }
    
            for (i = 0, ilen = scale.ticks.length; i < ilen; ++i) {
                curr = scale.getPixelForTick(i);
                min = i > 0 && !isNaN(curr) && !isNaN(prev) ? Math.min(min, Math.abs(curr - prev)) : min; // add check for NaN values
                prev = curr;
            }
    
            return min;
        }
    

    and the result is;

    Screen Shot 2022-11-14 at 01 02 05

    but as i see scale.getPixelForTick() always returns NaN and it can be because of wrong date parsing but anyway it should not cause wrong output.

    This is all i found in couple of hours please add, share your thoughts and i hope it helps everyone who faced this issue! Thank you.

    opened by MehGokalp 0
  • Type Error from chart.js using candlestick charts

    Type Error from chart.js using candlestick charts

    Here is the error: Screenshot 2022-05-28 at 11 46 52

    Here is a simple coding example `

    Document
    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js" integrity="sha512-v1zUTZ9zv9Wb2scL/ANxXM6m7yegm/W5SN8SRHNFADdZIuSFFkrEBjNxO803DdFkjoCcJ88g1WHRVlLN6K/O1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    
    <script src="local.js"></script>
    
    `
    opened by MatsNissen-Lie 7
  • Using this module with react ?

    Using this module with react ?

    Hi there,

    Any idea how would one use this module with react.js

    I did

    import {
      Chart as ChartJS,
      CategoryScale,
      LinearScale,
      PointElement,
      LineElement,
      Title,
      Tooltip,
      Legend,
    } from "chart.js"
    
    import { Chart } from "react-chartjs-2";
    
    import "../public/static/chartjs-chart-financial";
    
    

    But then I got stuck, not sure where to take it from here.

    P.S I am trying to use candlestick chart

    opened by Baribj 1
  • Support node

    Support node

    Thanks for contributing.

    Description

    Changed existing code to support and test for NodeJS usability.

    Testing

    Added a unit test and update the script running infrastructure to support Windows.

    opened by SeanSobey 1
Releases(v0.1.1)
  • v0.1.1(Dec 12, 2021)

  • v0.1.0(Oct 22, 2021)

    What's Changed

    • Fixes for items 1 and 2. by @maximkozlov in https://github.com/chartjs/chartjs-chart-financial/pull/1
    • improve vertical "whitespace" calculation by @aranlunzer in https://github.com/chartjs/chartjs-chart-financial/pull/18
    • OHLC element + Out of the box examples + Fix for transparent candlestick by @loicbourgois in https://github.com/chartjs/chartjs-chart-financial/pull/22
    • Fix broken tags by @izeye in https://github.com/chartjs/chartjs-chart-financial/pull/28
    • Add missing semicolon to gulpfile.js by @AbdulrahmanEng in https://github.com/chartjs/chartjs-chart-financial/pull/34
    • Fix animations by @Jark in https://github.com/chartjs/chartjs-chart-financial/pull/36
    • Fix 'gulp test' by @amissine in https://github.com/chartjs/chartjs-chart-financial/pull/38
    • Allow borderColor to be customized through border options by @pateketrueke in https://github.com/chartjs/chartjs-chart-financial/pull/37
    • Add hasValue method to elements.Financial by @nagix in https://github.com/chartjs/chartjs-chart-financial/pull/48
    • Add Travis config by @benmccann in https://github.com/chartjs/chartjs-chart-financial/pull/51
    • Fix #61 Error: Cannot find module 'rollup/bin/rollup' by @andrericardo in https://github.com/chartjs/chartjs-chart-financial/pull/62
    • Show Travis CI building status by @andrericardo in https://github.com/chartjs/chartjs-chart-financial/pull/63
    • Add polyfill for Luxon for example to work in IE11 by @andrericardo in https://github.com/chartjs/chartjs-chart-financial/pull/64
    • Bump acorn from 6.3.0 to 6.4.1 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/68
    • Bump lodash from 4.17.15 to 4.17.19 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/77
    • Bump http-proxy from 1.18.0 to 1.18.1 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/79
    • Updated to Chart.js v3.0.0-beta.3 by @santam85 in https://github.com/chartjs/chartjs-chart-financial/pull/84
    • Bump ini from 1.3.5 to 1.3.7 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/89
    • Bump socket.io from 2.3.0 to 2.4.1 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/91
    • add mixed chart sample by @CupcakeThief in https://github.com/chartjs/chartjs-chart-financial/pull/97
    • Update import path by @devotox in https://github.com/chartjs/chartjs-chart-financial/pull/102
    • Updated to latest chart.js, ESM build, types and updated test by @santam85 in https://github.com/chartjs/chartjs-chart-financial/pull/95
    • Build/GitHub actions by @santam85 in https://github.com/chartjs/chartjs-chart-financial/pull/106
    • Bump lodash from 4.17.19 to 4.17.21 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/109
    • Bump glob-parent from 5.1.1 to 5.1.2 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/108
    • Bump path-parse from 1.0.6 to 1.0.7 by @dependabot in https://github.com/chartjs/chartjs-chart-financial/pull/107

    New Contributors

    • @maximkozlov made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/1
    • @aranlunzer made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/18
    • @loicbourgois made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/22
    • @izeye made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/28
    • @AbdulrahmanEng made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/34
    • @Jark made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/36
    • @amissine made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/38
    • @pateketrueke made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/37
    • @nagix made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/48
    • @benmccann made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/51
    • @andrericardo made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/62
    • @dependabot made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/68
    • @santam85 made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/84
    • @CupcakeThief made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/97
    • @devotox made their first contribution in https://github.com/chartjs/chartjs-chart-financial/pull/102

    Full Changelog: https://github.com/chartjs/chartjs-chart-financial/commits/v0.1.0

    Source code(tar.gz)
    Source code(zip)
    chartjs-chart-financial-0.1.0.tgz(10.03 KB)
Owner
Chart.js
Simple, clean and engaging charts for designers and developers
Chart.js
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

Chart.js 97 Nov 9, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

Chart.js 58 Nov 24, 2022
TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

null 24 Dec 12, 2022
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
Chart.js module for creating treemap charts

chartjs-chart-treemap Chart.js v3.6.0 module for creating treemap charts. Implementation for Chart.js v2 is in 2.x branch Documentation You can find d

Jukka Kurkela 99 Dec 18, 2022
Chart.js module for creating sankey diagrams

chartjs-chart-sankey Chart.js v3.3.x module for creating sankey diagrams Browser support All modern and up-to-date browsers are supported, including,

Jukka Kurkela 85 Jan 2, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Highcharts JS, the JavaScript charting framework

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers. Official website: www.highcharts.com D

Highsoft 10.9k Jan 9, 2023
A reusable charting library written in d3.js

NVD3 - A reusable D3 charting library Inspired by the work of Mike Bostock's Towards Reusable Charts, and supported by a combined effort of Novus and

Novus 7.2k Jan 3, 2023
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

dc.js Dimensional charting built to work natively with crossfilter rendered using d3.js. In dc.js, each chart displays an aggregation of some attribut

null 7.4k Jan 4, 2023
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Dec 30, 2022
Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Addepar 793 Dec 7, 2022
Simple yet powerful JavaScript Charting library built using d3.js

uvCharts Simple, robust, extensible JavaScript charting library built using d3 designed to help developers embed, build charts in less than couple of

Imaginea 267 May 20, 2021
:bar_chart: Declarative Charting Framework for Angular

ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte

Swimlane 4.2k Dec 27, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023