Convert Figma logo to code with AI

naver logobillboard.js

📊 Re-usable, easy interface JavaScript chart library based on D3.js

5,824
349
5,824
149
View on GitHubView on NPM

Top Related Projects

chartjs's avatar

Chart.js

64,334

Simple HTML5 Charts using the <canvas> tag

d3's avatar

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

mrdoob's avatar

three.js

101,622

JavaScript 3D Library.

plotly's avatar

plotly.js

16,856

Open-source JavaScript charting library behind Plotly and Dash

apexcharts's avatar

apexcharts.js

14,209

📊 Interactive JavaScript Charts built on SVG

highcharts's avatar

highcharts

11,971

Highcharts JS, the JavaScript charting framework

Quick Overview

Billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js. It allows developers to create various types of charts including line, bar, pie, and more complex visualizations with minimal effort. The library is designed to be flexible and customizable, making it suitable for a wide range of data visualization needs.

Pros

  • Easy to use with a simple and intuitive API
  • Supports a wide variety of chart types and customization options
  • Built on top of D3.js, leveraging its powerful data visualization capabilities
  • Responsive and mobile-friendly design

Cons

  • Learning curve for advanced customizations
  • Limited documentation for some complex features
  • Dependency on D3.js may increase the overall bundle size
  • Some advanced chart types may require additional plugins

Code Examples

  1. Creating a simple line chart:
var chart = bb.generate({
  bindto: "#chart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ]
  }
});
  1. Customizing chart colors:
var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 20, 50, 40, 60, 50],
      ["data2", 200, 130, 90, 240, 130, 220],
      ["data3", 300, 200, 160, 400, 250, 250]
    ],
    colors: {
      data1: "#ff0000",
      data2: "#00ff00",
      data3: "#0000ff"
    }
  }
});
  1. Creating a pie chart:
var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30],
      ["data2", 120],
      ["data3", 50]
    ],
    type: "pie"
  }
});

Getting Started

To use Billboard.js in your project, follow these steps:

  1. Include the Billboard.js library and CSS in your HTML file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
  1. Create a container element for your chart:
<div id="chart"></div>
  1. Initialize your chart using JavaScript:
var chart = bb.generate({
  bindto: "#chart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: "line"
  }
});

This will create a basic line chart with two data series. You can customize the chart further by exploring the various options and chart types available in the Billboard.js documentation.

Competitor Comparisons

chartjs logo

Chart.js

64,334

Simple HTML5 Charts using the <canvas> tag

Pros of Chart.js

  • Simpler API and easier to get started for beginners
  • Extensive documentation and large community support
  • Smaller file size, leading to faster load times

Cons of Chart.js

  • Less customization options compared to Billboard.js
  • Fewer chart types available out of the box
  • Limited support for real-time data updates

Code Comparison

Chart.js:

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: 'My Dataset',
            data: [12, 19, 3]
        }]
    }
});

Billboard.js:

bb.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["data1", 30, 200, 100],
            ["data2", 130, 100, 140]
        ],
        type: "bar"
    }
});

Both libraries offer straightforward ways to create charts, but Billboard.js provides more flexibility in data binding and chart configuration. Chart.js has a more concise syntax for basic charts, while Billboard.js allows for more detailed customization.

d3 logo

d3

108,427

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Pros of d3

  • Highly flexible and customizable, allowing for complex and unique visualizations
  • Extensive ecosystem with numerous plugins and extensions
  • Direct manipulation of the DOM for fine-grained control

Cons of d3

  • Steeper learning curve due to its low-level nature
  • Requires more code to create basic charts compared to higher-level libraries
  • Less out-of-the-box functionality for common chart types

Code Comparison

d3:

const svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300);

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 40)
    .attr("y", d => 300 - d * 10)
    .attr("width", 35)
    .attr("height", d => d * 10);

billboard.js:

const chart = bb.generate({
    data: {
        columns: [
            ["data", 30, 200, 100, 400, 150, 250]
        ],
        type: "bar"
    },
    bindto: "#chart"
});

This comparison highlights the difference in abstraction level between d3 and billboard.js. While d3 provides granular control over chart elements, billboard.js offers a more concise API for creating common chart types with less code.

mrdoob logo

three.js

101,622

JavaScript 3D Library.

Pros of three.js

  • More comprehensive 3D graphics library with a wider range of features
  • Larger community and ecosystem, leading to more resources and third-party extensions
  • Better suited for complex 3D visualizations and interactive experiences

Cons of three.js

  • Steeper learning curve due to its extensive API and 3D concepts
  • Larger file size, which may impact load times for simpler projects
  • Potentially overkill for basic 2D chart and graph visualizations

Code Comparison

three.js (3D scene setup):

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

billboard.js (2D chart setup):

var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ]
  },
  bindto: "#chart"
});

While three.js is focused on creating complex 3D scenes, billboard.js specializes in generating 2D charts and graphs. three.js offers more flexibility for custom 3D visualizations, while billboard.js provides a simpler API for common chart types. The choice between them depends on the specific requirements of your project.

plotly logo

plotly.js

16,856

Open-source JavaScript charting library behind Plotly and Dash

Pros of Plotly.js

  • More extensive and diverse chart types, including 3D plots and statistical charts
  • Larger community and more frequent updates
  • Built-in animation capabilities for dynamic visualizations

Cons of Plotly.js

  • Larger file size, which may impact page load times
  • Steeper learning curve due to more complex API
  • Some advanced features require a commercial license

Code Comparison

Billboard.js:

var chart = bb.generate({
  bindto: "#chart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ]
  }
});

Plotly.js:

Plotly.newPlot('chart', [{
  x: [1, 2, 3, 4, 5, 6],
  y: [30, 200, 100, 400, 150, 250],
  type: 'scatter'
}, {
  x: [1, 2, 3, 4, 5, 6],
  y: [50, 20, 10, 40, 15, 25],
  type: 'scatter'
}]);

Both libraries offer powerful charting capabilities, but Plotly.js provides a wider range of chart types and more advanced features. Billboard.js, being a fork of C3.js, offers a simpler API and smaller file size, making it easier to integrate for basic charting needs. The choice between the two depends on the specific requirements of your project, such as the complexity of visualizations needed and performance considerations.

apexcharts logo

apexcharts.js

14,209

📊 Interactive JavaScript Charts built on SVG

Pros of ApexCharts.js

  • More extensive chart types and customization options
  • Built-in responsive design and mobile-friendly features
  • Active development with frequent updates and new features

Cons of ApexCharts.js

  • Larger file size, which may impact page load times
  • Steeper learning curve due to more complex API and configuration options
  • Commercial license required for certain use cases

Code Comparison

ApexCharts.js:

var options = {
  chart: { type: 'line' },
  series: [{ data: [30, 40, 35, 50, 49, 60, 70] }],
  xaxis: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

Billboard.js:

var chart = bb.generate({
  bindto: "#chart",
  data: {
    columns: [["data", 30, 40, 35, 50, 49, 60, 70]],
    type: "line"
  },
  axis: {
    x: { categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997] }
  }
});

Both libraries offer similar basic functionality for creating charts, but ApexCharts.js provides more advanced features and customization options out of the box. Billboard.js, on the other hand, has a simpler API and smaller file size, making it easier to integrate and potentially faster to load for simpler use cases.

highcharts logo

highcharts

11,971

Highcharts JS, the JavaScript charting framework

Pros of Highcharts

  • More extensive documentation and examples
  • Wider range of chart types and customization options
  • Larger community and ecosystem

Cons of Highcharts

  • Commercial license required for most use cases
  • Steeper learning curve due to more complex API
  • Larger file size, potentially impacting page load times

Code Comparison

Billboard.js:

var chart = bb.generate({
  bindto: "#chart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ]
  }
});

Highcharts:

Highcharts.chart('container', {
  series: [{
    data: [30, 200, 100, 400, 150, 250]
  }, {
    data: [50, 20, 10, 40, 15, 25]
  }]
});

Both libraries offer similar basic functionality for creating charts, but Highcharts provides more advanced options and customization possibilities out of the box. Billboard.js, being based on D3.js, offers a simpler API and is more lightweight, making it easier to get started with for basic charting needs. Highcharts, while more powerful, requires a commercial license for most use cases, whereas Billboard.js is open-source and free to use under the MIT license.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

billboard.js

Latest Version Next version bb
semantic-release React

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

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.

Dist file list from the repo. (click to expand)

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 dependencies.

Themes

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

Dist theme file list from the repo. (click to expand)

datalab

dark

insight

graph

modern

Nightly version

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

[!NOTE] 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": "naver/billboard.js#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 billboard.js@next --save

Installation with npm

$ npm install billboard.js

Packages

NameForDescription
bbReactReact component for billboard.js

Using CDN

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

Supported Browsers

[!IMPORTANT]

  • Basically will work on all SVG and ES6+ supported browsers.
  • *Notes for legacy browsers:
    • Recommended to use packaged build or construct your own build following How to bundle for legacy browsers? instruction.
    • D3.js dropped the support of legacy browsers since v6.
    • The support isn't fully guaranteed.

Dependency by version

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

Getting Started

Load billboard.js after D3.js.

<!-- 1) Load D3.js and billboard.js separately -->
    <!-- Load D3: -->
    <script src="https://d3js.org/d3.v6.min.js"></script>

    <!-- Load billboard.js with base(or theme) style -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.js"></script>

<!-- 2) or Load billboard.js packaged with D3.js -->
    <link rel="stylesheet" href="$YOUR_PATH/billboard.css">
    <script src="$YOUR_PATH/billboard.pkgd.js"></script>

or use importing ESM.

[!TIP] 📌 Also check: How to load as ESM directly from the browser?

// 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 <link>
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( ... );

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

NPM DownloadsLast 30 Days