billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

Last update: May 10, 2022

billboard.js

Latest Version Next version semantic-release

CI Status Coverage Status Known Vulnerabilities download jsDelivr gzip size

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js.

The name "billboard" comes from the famous billboard chart which everybody knows.

Documents

Playground

Play with the diverse options generating on the fly!

Questions?

If you have any questions, checkout the previous posts or create a new one at:

Supported chart types

Download and Installation

Download dist files from the repo directly or install it via npm.

For development (Uncompressed)

You can download the uncompressed files for development

Latest

Specific version

For production (Compressed)

You can download the compressed files for production

Latest

Specific version

Packaged version (with D3.js inclusion)

Packaged version is not an official distribution. It's to provide an easy way to load 'billboard.js' with dependency.

Themes

If you want apply themes, simply load one of the theme css file provided instead of the default css file.

datalab

insight

graph

Nightly version

Nightly version is the latest build from the master branch. With nightly, you can try upcoming changes prior the official release.

The version info will be given as the build datetime: x.x.x-nightly-yyyymmddhhmmss

There're two ways to install from nightly branch directly.

// Specify on 'package.json' file
"dependencies": {
      ...
      "billboard.js": "git://github.com/naver/billboard.js.git#nightly"
},
# Run install command from shell
$ npm install git+https://github.com/naver/billboard.js.git#nightly --save

Next(Release Canditate) version

Next version is the 'release candidate' build, prior the latest official release.

# Run install command from shell
$ npm install [email protected] --save

Installation with npm

$ npm install billboard.js

Using CDN

If you want to use 'billboard.js' without installation, load files directly from one of the CDN providers.

Supported Browsers

Basically will work on all SVG supported browsers.

Internet Explorer Chrome Firefox Safari iOS Android
9+ Latest Latest Latest 8+ 4+

Dependency by version

D3.js (required) billboard.js
4.x ~ 5.x 1.x ~ 2.x
6.x+ 3.x+

Load billboard.js after D3.js.

">

    
    <script src="https://d3js.org/d3.v6.min.js">script>

    
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.js">script>


    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.pkgd.js">script>

or use importing ESM.

import "billboard.js/dist/billboard.css"; // or theme style. Find more themes from 'theme' folder import "billboard.js/dist/theme/insight.css" ">
// 1) import billboard.js
// as named import with desired shapes and interaction modules
// https://github.com/naver/billboard.js/wiki/CHANGELOG-v2#modularization-by-its-functionality
import {bb, area, bar, zoom} from "billboard.js";

// or as importing default
import bb, {area, bar, zoom} from "billboard.js";

// 2) import css if your dev-env supports. If don't, include them via 
import "billboard.js/dist/billboard.css";

// or theme style. Find more themes from 'theme' folder
import "billboard.js/dist/theme/insight.css"

Note

Basic usage example

1) Create chart holder element

">
<div id="chart">div>

2) Generate a chart with options

// generate the chart
var chart = bb.generate({
    bindto: "#chart",
    data: {
      // for ESM import usage, import 'line' module and execute it as
      // type: line(),
      type: "line",
      columns: [
          ["data1", 30, 200, 100, 400, 150, 250]
      ]
    },
    zoom: {
      // for ESM import usage, import 'zoom' module and execute it as
      // enabled: zoom()
      enabled: true
    }
});

// call some API
chart.load( ... );

How to start developing billboard.js?

For anyone interested in developing billboard.js, follow the instructions below.

Required Node.js version: 10.10.0+

Development Environment

1. Clone the repository

Clone the billboard.js repository and install the dependency modules.

# Create a folder and move.
$ mkdir billboard.js && cd billboard.js

# Clone the repository.
$ git clone https://github.com/naver/billboard.js.git

2. Install dependencies

npm and Yarn are supported.

# Install the dependency modules.
$ npm install

# or
$ yarn

3. Build

Use npm script to build billboard.js

# Run webpack-dev-server for development
$ npm start

# Build
$ npm run build

# Generate jsdoc
$ npm run jsdoc

Two folders will be created after the build is completed.

  • dist folder: Includes the billboard.js and billboard.min.js files.
  • doc folder: Includes API documentation. The home page for the documentation is doc/index.html.

Linting

To maintain the same code style and quality, we adopted ESLint. The rules are based on the Airbnb JavaScript Style Guide with some modifications. Setup your editor for check or run the below command for linting.

$ npm run lint

Test

Once you created a branch and finished the development, you must perform a test with npm test command before the push to a remote repository.

$ npm test

Running the npm test command will start Mocha tests via Karma-runner.

Bug Report

If you find a bug, please report to us by posting issues on GitHub.

License

billboard.js is released under the MIT license.

Copyright (c) 2017 ~ present NAVER Corp.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

FOSSA Status

GitHub

https://github.com/naver/billboard.js
Comments
  • 1. Edge shows tooltip, chrome doesn't

    I'm working on wrapping the billboard.js library as a web component. Feel free to take over if this is something you would prefer to support!

    Anyway, I noticed with the first example that in Edge, when I hover over data points, I see a tooltip box showing details, but not Chrome (I'm only testing on Windows).

    I assume this is a bug?

    Reviewed by bahrus at 2017-08-06 20:17
  • 2. TypeScript support

    I wan't to use billboard.js in a TypeScript project but i can't find ant typing's for this package. Is there any typing's available or planed to do in the future?

    Reviewed by porfirioribeiro at 2018-10-30 16:13
  • 3. Custom Html ToolTip

    Description

    Custom tooltip using Html template

    Steps to check or reproduce

    I need to use custom html template in Tooltip which i will get from API which looks like below

    '<style>'+ ' .Status_Black {'+ ' color: black;'+ ' font-family: Arial;'+ ' }'+ ' .white-bg{'+ ' background: white;'+ ' }'+ ''+ ' .Status_Red {'+ ' color: red;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' }'+ ''+ ' .Status_Orange {'+ ' color: #FFA500;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' }'+ ''+ ' .ColHeader {'+ ' color: black;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' width: 25%;'+ ' }'+ ''+ ' .MeasureTable {'+ ' width: 250px;'+ ' background-color: gree;'+ ' margin: 0;'+ ' padding: 0;'+ ' border: 0;'+ ' }'+ ''+ ' .ColLeft {'+ ' text-align: left;'+ ' }'+ ''+ ' .ColRight {'+ ' text-align: right;'+ ' }'+ ''+ ' .ColCenter {'+ ' text-align: center;'+ ' }'+ ' .table{'+ ' border-collapse: collapse;'+ ' border: 1px solid black;'+ ' }'+ ' tr, td, th{'+ ' border: 1px solid black;'+ ' }'+ ' .table-header{'+ ' background: white;'+ ' }'+ ' '+ ' </style><div class="Status_Black ColLeft white-bg" bgcolor="white"> Date my wish ti show<mat-dialog-actions><button mat-button mat-dialog-close>Cancel</button><button id="modalBtnId" style="position: absolute;right: 12px;top: 4px;" class="filled-button mat-icon-button" mat-dialog-close><mat-icon class="mat-icon material-icons" style="line-height: 30px;" role="img" aria-hidden="true" onclick="closeTooltip()">close</mat-icon></button></mat-dialog-actions><br/> '+ ' Operator Skippy <br/> '+ ' <div class="ScrollTable"> '+ ' <table class="MeasureTable"><thead><tr><th class="ColHeader ColCenter">Head</th><th class="ColHeader ColCenter">Sample</th><th class="ColHeader ColCenter">Reading</th><th class="ColHeader ColCenter">Value</th></tr></thead><tfoot><tr><th></th><th></th><th></th><th></th></tr></tfoot><tbody><tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr></tbody></table></div></div>';

    Problems

    1. Billboard is not accepting class similar as html , expecting in below format

    {=CLASS_TOOLTIP} and same for style

    Is there any way that billboard accept Html Directly witout any modification.

    Reviewed by BhavikThakkar at 2020-10-06 09:35
  • 4. Apply D3 v6 updates

    Description

    D3 new major release v6 came out, and need to look for the support & migration.

    The main affected will be:

    • D3 v6 dropped the old ES support moving to ES6.
    • Dropped the global event object d3.event, replacing it by passing as event param.

    Refs.

    Reviewed by netil at 2020-08-31 01:13
  • 5. Chart not shown , getting NS_ERROR_FAILURE: in Firefox v59.0

    Description

    Chart is not shown, getting NS_ERROR_FAILURE with Firefox browser.

    Same internal example app works with Chrome. Using standalone Billboard.js not minimized. D3JS version 5 locally

    I have checked that this bug is visible in version 1.4, 1.3. Earlier versions like 1.2 are working.

    Error Stack in FF console:

    getSizeFor1Char/< https://localhost:5000/static/javascripts/billboard_1.3.0.js:1568:14 call https://localhost:5000/static/javascripts/d3_v5.min.js:2:105091 getSizeFor1Char https://localhost:5000/static/javascripts/billboard_1.3.0.js:1567:26 axis/< https://localhost:5000/static/javascripts/billboard_1.3.0.js:1505:23 each https://localhost:5000/static/javascripts/d3_v5.min.js:2:105567 axis https://localhost:5000/static/javascripts/billboard_1.3.0.js:1420:3 call https://localhost:5000/static/javascripts/d3_v5.min.js:2:105091 updateDimension https://localhost:5000/static/javascripts/billboard_1.3.0.js:747:106 initWithData https://localhost:5000/static/javascripts/billboard_1.3.0.js:497:523 init https://localhost:5000/static/javascripts/billboard_1.3.0.js:440:370 Chart https://localhost:5000/static/javascripts/billboard_1.3.0.js:1001:69 generate https://localhost:5000/static/javascripts/billboard_1.3.0.js:1694:14

    Reviewed by h470734 at 2018-05-04 12:36
  • 6. Negative values in gauge

    Description

    Hello, Is it possible to use a negative value in a gauge ? For example a negative minimum

    Steps to check or reproduce

    var chart = bb.generate({
      data: {
        json: {
        	value: [25]
        },
        type: "gauge"
      },
      gauge: {
      	min: -100,
        max: 100
      },
      size: {
        height: 180
      },
      bindto: "#gaugeChart"
    });
    

    image

    Here a link to a fiddle : https://jsfiddle.net/vcz3ru2a/

    Thank you for your help and your work !

    Victor

    Reviewed by pvictor at 2019-09-06 16:57
  • 7. Tachyons (CSS) Incompatibility

    Billboard.js currently doesn't work in projects that use Tachyons.

    Here is a fiddle with Tachyons included (it doesn't render) https://jsfiddle.net/moy6420x/

    Here is the same fiddle, but without Tachyons (it does render): https://jsfiddle.net/Lbdrf77f/

    The issue is probably a conflict with the Tachyons CSS class .bb (~= border bottom). I'm not even sure a good workaround for this yet.

    Reviewed by caseywatts at 2017-11-21 21:36
  • 8. Using other shapes than "circles" for line points #question

    Description

    This is more a question rather than an issue.

    I'd like to be able to use other shapes than svg circle for the "line points" used in Line and Spline charts.

    Since circle seems to be hardcoded in many places, I thought using the onafterinit callback to do the following:

    • Select chart lines
    • Get circle positions (is this possible through the API?)
    • Append the "desired shape" (in my case an svg rect) and set it's attributes
    • Remove the circles (or hide them via API)

    What do you think of the idea?

    Would this be an interesting feature for the library?

    Thanks

    Reviewed by julien at 2017-10-19 13:43
  • 9. Tooltips don't work on Windows

    Description

    Tooltips are not working on Windows - Chrome, Edge, and IE11. Can not test on Firefox. I develop on OSX where there isn't an issue.

    All other features seem to be working correctly, including a data.onclick event handler in the application.

    Steps to check or reproduce

    I discovered the issue when deploying a new application but the issue also presents in the billboard examples and playground. I haven't found any yet that work correctly.

    OS is Win10 on company computers. While they are pretty locked down, I can't image any security settings that would break this and on three different browsers.

    Edited - I have confirmed tool tips aren't working on a non-work computer, so this is a general issues with Billboard on Win10.

    Reviewed by maxwondercorn at 2019-07-05 19:14
  • 10. when using point.pattern: null data points lead to 'Error: attribute y: Expected length, "NaN".' in ESM module

    Description

    When lines have null data points (as in "line.connectNull"), the js code throws the Error: attribute y: Expected length, "NaN". This happens if the code gets imported via 'import { bb, line } from "billboard.js/dist/billboard.esm.js"'

    a quick fix is to change Line 249 in point.ts to

    $$.getYScaleById(id, isSub)($$.getBaseValue(d) || 0);
    

    but I am not sure if this is the appropriate fix

    Reviewed by jonka-blip at 2021-05-25 10:44
  • 11. Tooltip is out of the screen after change orientation

    Description

    Tooltip is out of the screen after change orientation.

    Steps to check or reproduce

    On a mobile device landscape orientation, tab the most right item and change to portrait orientation, and the tooltip left outside of the chart.

    Reviewed by softage0 at 2020-02-18 02:33
  • 12. chore(deps-dev): bump @commitlint/cli from 15.0.0 to 16.3.0

    Bumps @commitlint/cli from 15.0.0 to 16.3.0.

    Release notes

    Sourced from @​commitlint/cli's releases.

    v16.3.0

    16.3.0 (2022-05-14)

    Bug Fixes

    • update dependency cosmiconfig-typescript-loader to v2 (#3154) (20122e8)
    • update dependency yargs to v17.5.0 (#3171) (0e6542b)

    Features

    • add ability to filter Nx projects in @​commitlint/config-nx-scopes (#3155) (e595693), closes #3152

    New Contributors

    Full Changelog: https://github.com/conventional-changelog/commitlint/compare/v16.2.4...v16.3.0

    v16.2.4

    16.2.4 (2022-04-28)

    Bug Fixes

    • rules: footer-leading-blank should work with body comments (#3139) (7dd88c9)
    • update dependency cosmiconfig to v7.0.1 (#3138) (407837d)
    • update dependency cosmiconfig-typescript-loader to v1.0.7 (#3102) (d0f2b3f)
    • update dependency cosmiconfig-typescript-loader to v1.0.9 (#3106) (d91e70d)
    • update dependency fs-extra to v10.1.0 (#3124) (482613f)
    • update dependency semver to v7.3.6 (#3112) (ad886fd)
    • update dependency semver to v7.3.7 (#3119) (c9c49b2)
    • update dependency yargs to v17.4.0 (#3080) (1477d7c)
    • update dependency yargs to v17.4.1 (#3116) (69bf135)

    New Contributors

    Full Changelog: https://github.com/conventional-changelog/commitlint/compare/v16.2.3...v16.2.4

    v16.2.3

    16.2.3 (2022-03-16)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from @​commitlint/cli's changelog.

    16.3.0 (2022-05-14)

    Note: Version bump only for package @​commitlint/cli

    16.2.4 (2022-04-28)

    Note: Version bump only for package @​commitlint/cli

    16.2.3 (2022-03-16)

    Note: Version bump only for package @​commitlint/cli

    16.2.1 (2022-02-13)

    Note: Version bump only for package @​commitlint/cli

    16.1.0 (2022-01-20)

    Note: Version bump only for package @​commitlint/cli

    16.0.3 (2022-01-19)

    Note: Version bump only for package @​commitlint/cli

    16.0.2 (2022-01-09)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-05-16 07:51
  • 13. sparkline Plugin sizing and tooltip question

    Description

    I am in the process of switching from a setup using c3js and jquery sparkline to billboard.js. I ran into two (three) issues which currently prevent me from using the sparkline plugin.

    1. even though I am setting the width to 42px and the height to 20px the sparkline graph itself is only half that size (and appears centered)

    2. I'd like to disable the tooltip but when applying tooltip.show false the sparkline plugin crashes with "Uncaught TypeError: Cannot read properties of null (reading 'node')"

    3. I am applying onmin & onmax but when the (unwanted) tooltip hovers over the min or max point the points disappear.

    Steps to check or reproduce

    var chart = bb.generate({
      size: {
        width: 42,
        height: 20,
      },
      axis: {
        y: {
          padding: 0
        },
        x: {
          padding: 0
        }
      },
      padding: false,
      data: {
        columns: [
          ["data1", 12300,10319,9843,10046,11886,15361,22886,36301,58436,84473,113425,142551,177024,219157,216367,190831,182064,173499,167160,160870,157161,157782]
        ],
        type: "area",
        onmin: function(data) {
         data.forEach(function(v) {
          // select data points
          d3.select(".bb-shapes-" + v.id + " .bb-circle-" + v.index)
           .style("fill", "red")
              .style("stroke", "red")
           .attr("r", "1");
         });
         },
        onmax: function(data) {
         data.forEach(function(v) {
          // select data points
          d3.select(".bb-shapes-" + v.id + " .bb-circle-" + v.index)
           .style("fill", "red")
              .style("stroke", "red")
           .attr("r", "1");
         });
         }
      },
      point: {
        r: 0
      },
      tooltip: {
        show: false
      },
      plugins: [
        new bb.plugin.sparkline({
         selector: ".sparkline"
        }),
      ],
      bindto: "#sparkline"
    });
    
    Reviewed by VorticonCmdr at 2022-05-14 11:33
  • 14. fix(types): Fix the type for options.data.names

    Issue

    Details

    The code supports setting a name to null to hide it from the legend. But type declarations were not allowing it: https://github.com/naver/billboard.js/blob/9a87464c5212e8d29c0a7b3d3d07729524aa911a/src/ChartInternal/internals/legend.ts#L460-L462

    Reviewed by stof at 2022-05-07 12:36
  • 15. fix(types): Fix the signature of the tick format callback for timeseries

    Issue

    Details

    When running typescript in strict modes, it checks the compatibility of callback signatures. When using a timeseries axis and passing a date formatting callback for the ticks, it currently returns that error:

    assets/js/widget/program-evolution-chart.js:76:15 - error TS2322: Type '(arg0: Date) => string' is not assignable to type 'string | ((this: Chart, x: number | Date) => string | number) | ((this: Chart, index: number, categoryName: string) => string) | undefined'.
      Type '(arg0: Date) => string' is not assignable to type '(this: Chart, x: number | Date) => string | number'.
        Types of parameters 'arg0' and 'x' are incompatible.
          Type 'number | Date' is not assignable to type 'Date'.
            Type 'number' is not assignable to type 'Date'.
    
    76       format: formatDate,
                     ~~~~~~~~~~
    

    The documentation explicitly says that timeseries axis are always passing a Date there, so there is no need to require a callback support both dates and numbers: image

    Reviewed by stof at 2022-05-07 10:21
  • 16. Y axis ticks truncated when no data

    Hi everyone and thanks for this great library.

    Description

    It seems that y axis ticks and label are truncated when there is no data on the chart (I don't know if they should appear)

    image

    Steps to check or reproduce

    To reproduce it, I use next example by adding and replace code by following example. https://naver.github.io/billboard.js/demo/#Chart.LineChart

    exact code :

    var chart = bb.generate({
      data: {
        columns: [
    	["data1"],
    	["data2"]
        ],
        empty: {label: {text: "No data..."}},
        type: "line", // for ESM specify as: line()
      },
      bindto: "#lineChart"
    });
    

    King regards, Leo.

    Reviewed by leobr29 at 2022-05-06 13:36
  • 17. How to draw two lines with shared axis in same chart?

    Description

    I have two arrays of data objects, where the data object looks like this:

    { value: 45.6, timestamp: 1651217329888, isWithinThreshold: true }

    And I would like to print out two line graphs in the same chart. The two lines should share both an x and y axis, where the x axis is based on the timestamp property and the y axis is based on the value property from the data object.

    My current graph with only one data and can be seen here: https://zyjb8b-dsitdx.stackblitz.io

    I basically want the same, but with both data sets added (the Actual and Predicted in the sample data).

    Below is some sample data I am working with:

    const options = ...
    const options = [
      {
        legend: 'Actual',
        data: [
          {
            value: 467,
            timestamp: 1651217329888,
            isWithinThreshold: true,
          },
          {
            value: 467,
            timestamp: 1651217929888,
            isWithinThreshold: true,
          },
          {
            value: 468,
            timestamp: 1651218529888,
            isWithinThreshold: true,
          },
          {
            value: 468,
            timestamp: 1651219129888,
            isWithinThreshold: true,
          },
          {
            value: 469,
            timestamp: 1651219729888,
            isWithinThreshold: true,
          },
          {
            value: 470,
            timestamp: 1651220329888,
            isWithinThreshold: true,
          },
          {
            value: 470,
            timestamp: 1651220929888,
            isWithinThreshold: true,
          },
          {
            value: 471,
            timestamp: 1651221529888,
            isWithinThreshold: true,
          },
          {
            value: 470,
            timestamp: 1651222129888,
            isWithinThreshold: true,
          },
          {
            value: 469,
            timestamp: 1651222729888,
            isWithinThreshold: true,
          },
          {
            value: 468,
            timestamp: 1651223329888,
            isWithinThreshold: true,
          },
          {
            value: 468,
            timestamp: 1651223929888,
            isWithinThreshold: true,
          },
          {
            value: 468,
            timestamp: 1651224529888,
            isWithinThreshold: true,
          },
          {
            value: 467,
            timestamp: 1651225129888,
            isWithinThreshold: true,
          },
          {
            value: 465,
            timestamp: 1651225729888,
            isWithinThreshold: true,
          },
          {
            value: 464,
            timestamp: 1651226329888,
            isWithinThreshold: true,
          },
          {
            value: 464,
            timestamp: 1651226929888,
            isWithinThreshold: true,
          },
          {
            value: 462,
            timestamp: 1651227529888,
            isWithinThreshold: true,
          },
          {
            value: 462,
            timestamp: 1651228129888,
            isWithinThreshold: true,
          },
        ],
        color: '#1A1A1A',
        unit: 'Parts per million (ppm)',
      },
      {
        legend: 'Predicted',
        data: [
          {
            value: 420,
            timestamp: 1651237907139,
            isWithinThreshold: true,
          },
          {
            value: 421,
            timestamp: 1651237007139,
            isWithinThreshold: true,
          },
          {
            value: 424,
            timestamp: 1651236107139,
            isWithinThreshold: true,
          },
          {
            value: 426,
            timestamp: 1651235207139,
            isWithinThreshold: true,
          },
          {
            value: 427,
            timestamp: 1651234307139,
            isWithinThreshold: true,
          },
          {
            value: 428,
            timestamp: 1651233407139,
            isWithinThreshold: true,
          },
          {
            value: 428,
            timestamp: 1651232507139,
            isWithinThreshold: true,
          },
          {
            value: 430,
            timestamp: 1651231607139,
            isWithinThreshold: true,
          },
          {
            value: 430,
            timestamp: 1651230707139,
            isWithinThreshold: true,
          },
          {
            value: 431,
            timestamp: 1651229807139,
            isWithinThreshold: true,
          },
          {
            value: 434,
            timestamp: 1651228907139,
            isWithinThreshold: true,
          },
          {
            value: 435,
            timestamp: 1651228007139,
            isWithinThreshold: true,
          },
          {
            value: 435,
            timestamp: 1651227107139,
            isWithinThreshold: true,
          },
          {
            value: 437,
            timestamp: 1651226207139,
            isWithinThreshold: true,
          },
          {
            value: 438,
            timestamp: 1651225307139,
            isWithinThreshold: true,
          },
          {
            value: 438,
            timestamp: 1651224407139,
            isWithinThreshold: true,
          },
          {
            value: 440,
            timestamp: 1651223507139,
            isWithinThreshold: true,
          },
          {
            value: 441,
            timestamp: 1651222607139,
            isWithinThreshold: true,
          },
          {
            value: 443,
            timestamp: 1651221707139,
            isWithinThreshold: true,
          },
          {
            value: 444,
            timestamp: 1651220807139,
            isWithinThreshold: true,
          },
          {
            value: 446,
            timestamp: 1651219907139,
            isWithinThreshold: true,
          },
          {
            value: 448,
            timestamp: 1651219007139,
            isWithinThreshold: true,
          },
          {
            value: 449,
            timestamp: 1651218107139,
            isWithinThreshold: true,
          },
          {
            value: 450,
            timestamp: 1651217207139,
            isWithinThreshold: true,
          },
        ],
        color: '#16E4B4',
        unit: 'Parts per million (ppm)',
      },
    ]
    

    Here is my current bb.generate code for one line:

    bb.generate({
      interaction: {
        enabled: true
      },
      legend: {
        show: false
      },
      tooltip: {
        show: true
      },
      data: {
        type: 'line',
        json: options[0].data,
        keys: {
          value: ['value'],
          x: 'timestamp',
        },
        names: {
          value: options[0].legend,
        },
        colors: {
          value: function (d) {
            if (d.index === undefined) return;
            return options[0].data[d.index].isWithinThreshold ? options[0].color : "#E84754";
          },
        },
        xSort: false
      },
      axis: {
        x: {
          label: 'Date and time',
          type: 'timeseries',
          localtime: false,
          tick: {
            format: '%Y-%m-%d %H:%M:%S',
            show: false,
            text: {
              show: false
            },
          }
        },
        y: {
          label: options[0].unit
        },
      },
      grid: {
        x: {
          show: true
        },
        y: {
          show: true
        },
      },
    });
    

    I have been unable to modify it to take both data sets as input. You can play with it here: https://stackblitz.com/edit/zyjb8b-dsitdx?file=index.js

    Hope somebody can enlighten me, its been too many hours by now :)

    Reviewed by egil at 2022-04-29 15:32
Chart rendering from go-coinmarketcap's statistics log with antd and chart.js
Chart rendering from go-coinmarketcap's statistics log with antd and chart.js

Coinmarketcap Graph Graph rendering from go-coinmarketcap's statistics log. In addition, support searchable info table and CSV download. Sample Previe

Nov 3, 2021
A React chart library, based on G2Plot, G6, X6, L7.
A React chart library, based on G2Plot, G6, X6, L7.

A React chart library, based on G2Plot, G6, X6, L7.

May 17, 2022
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

May 18, 2022
A flexible, stateless, declarative flow chart library for react.
A flexible, stateless, declarative flow chart library for react.

A flexible, stateless, declarative flow chart library for react.

May 13, 2022
A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It.
A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It.

react-native-wagmi-charts ?? A sweet & simple chart library for React Native that will make us feel like We're All Gonna Make It Features ?? Line char

May 8, 2022
common react charting components using chart.js

react-chartjs rich interactive react charting components using chart.js including Line chart Bar chart Radar chart Polar area chart Pie chart Doughnut

May 7, 2022
React wrapper for Chart.js

Looking for maintainers!! react-chartjs-2 React wrapper for Chart.js 2 Open for PRs and contributions! UPDATE to 2.x As of 2.x we have made chart.js a

May 12, 2022
General wind-rose chart component requested by @drwilkins
General wind-rose chart component requested by @drwilkins

General wind-rose chart component requested by @drwilkins

Mar 20, 2022
React wrapper for Chart.js

React wrapper for Chart.js

May 11, 2022
React component to display a score with a doughnut chart

React Score Indicator React component to display a score with a doughnut chart Demo Install npm install --save react-score-indicator Usage import Reac

Apr 23, 2022
An extendable SVG donut chart React component
An extendable SVG donut chart React component

react-donut-chart An extendable SVG-based donut chart React component. Installation npm install react-donut-chart --save Usage import DonutChart from

May 6, 2022
React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.
 React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

React minimal pie chart Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. ?? Demo ?? . Why? Because

May 17, 2022
📊 Seamless & fully customizable bar chart race component for React.
📊 Seamless & fully customizable bar chart race component for React.

chart-race-react ?? Seamless & fully customizable bar chart race component for React. https://www.npmjs.com/package/chart-race-react . Colors Style Sp

Apr 25, 2022
A Google Playstore like star rating chart as a React component.
A Google Playstore like star rating chart as a React component.

react-star-rating-chart A React component that is inspired by the Google Play Store start rating chart. under construction This component is not maint

Oct 8, 2021
ReactJS component to display data as a bubble chart using d3.
ReactJS component to display data as a bubble chart using d3.

react-bubble-chart-d3 ReactJS component to display data as a bubble chart using d3. Preview General Usage As you will be able to see in test in order

Apr 1, 2022
Ideapedyudi-charts - Test package chart with react.js
Ideapedyudi-charts - Test package chart with react.js

Ideapedyudi-charts - Test package chart with react.js

Jan 22, 2022
React-Gantt-Chart allows you to create custom gantt charts with ease
React-Gantt-Chart allows you to create custom gantt charts with ease

react-gantt-chart React-Gantt-Chart allows you to create custom gantt charts with ease. No more nonsense! Installation npm install --save react-gantt-

Apr 19, 2022
Chkflow is a react component editor/view for tree and graph data structures inspired by workflowy's interface.
Chkflow is a react component editor/view for tree and graph data structures inspired by workflowy's interface.

Chkflow is a react component editor/view for tree and graph data structures inspired by workflowy's interface.

Mar 5, 2022
A declarative, efficient, and simple JavaScript library for building responsive charts
A declarative, efficient, and simple JavaScript library for building responsive charts

A declarative, efficient, and simple JavaScript library for building responsive charts

May 14, 2022