Igor Lukanin

Chart.js

A step-by-step guide into the new release of the most popular charting library.

Chart.js tutorial: Getting started with the all-new Chart.js v4

Data is the new oil, and it's still true in 2021. However, to turn data into insights, we need to analyze and visualize. **So, here's the question: how to pick the right tool? 🛠**

In this post we're going to go through JavaScript frameworks and libraries that you can use to visualize your data. And I'd like to do a bit more than just list a few frameworks — I'm going to divide the list by the type of data or data visualization because "one size" doesn't fit all. There are different kinds of data, and each needs a specific visualization strategy.

We'll go through...
1. 📈 general-purpose charting libraries
2. 📉 low-level and complex charting libraries
3. 🏁 tables and data grids
4. ⏰ timeline charts & time-based tools
5. 🗺 geospatial and mapping tools
6. ⛅️ word clouds
7. 🌎 3D visualization tools

Also, to help you choose the right tool for your project, I'm going to include a brief summary of each framework, i.e.

- 💵 whether it's paid or open-source
- ⭐️ number of stargazers on GitHub, if it's open source
- 📅 when it was last released (as of today)
- 🧱 the size of the bundle (unpacked size on npm), and
- 🔌 whether it's specific for a particular framework (e.g., React) or it can be used in any JavaScript-based project.

I decided to sort the frameworks and libraries by the number of stargazers because it roughly approximates their popularity and community size (but that's debatable).

Also note that you won't find here an extensive list of every data visualization library which can be found on the internet. However, I hope that this post will help you build your own understanding of the ecosystem.

*📊 And the icing on the cake: I'll provide links to guides and tutorials on data visualization tools built by the Cube.js team. [Cube.js](https://cube.dev) helps to create an API over any database with ease, and it's often used as a very performant backend for analytical data visualizations.*

## 1. General-purpose charting libraries

The first category is probably the most popular. Most data can be visualized with charts: either temporal (when you include time values to the plot, e.g., on the X axis), or non-temporal (when you have only numeric values or labels). Those include bar chart, pie chart, line graph, and similar. And because it's the most used type of charts, there are numerous options to choose from.

### [Chart.js](https://www.chartjs.org)

💵 OSS / ⭐️ 51.8K / 📅 19 Oct 2020 / 🧱 1.44 MB / 🔌 universal

*Simple yet flexible JavaScript charting for designers & developers*

The most popular open-source library for building responsive bar, pie, and line charts. I'd say this is the go-to library for most of the projects, as it fits most of the use cases.

*📊 See [Chart.js Example with Dynamic Dataset](https://cube.dev/blog/chart-js-example-with-dynamic-dataset/) to learn how to modify the data being displayed with Chart.js on-the-fly.*

### [Recharts](https://recharts.org/en-US/)

💵 OSS / ⭐️ 15.6K / 📅 13 Jan 2021 / 🧱 11.2 MB / 🔌 React

*A composable charting library built on React components*

As per description, "It was built on top of SVG elements with a lightweight dependency on D3 submodules." It's a good choice for React-based projects, because you can use it natively as a component, e.g.

```jsx
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
```

*📊 See [React Dashboard: an Ultimate Guide](https://react-dashboard.cube.dev) to for a comprehensive all-in-one walkthrough exploring how to build a dashboard with Recharts and connect it to a backend.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7o47emtffwpcse61q20j.png)

### [Highcharts](https://www.highcharts.com/blog/products/highcharts/)

💵 Paid & non-commercial licenses / ⭐️ 9.8K / 📅 22 Oct 2020 / 🧱 43.2 MB / 🔌 universal

*Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.*

Highcharts is good for large companies whose products rely heavily on data visualization. You can see the code on GitHub, try and use it for non-commercial purposes. And then you can purchase Highcharts license just for Hightcharts or Highcharts plugin for Stocks, Maps, or Gantt if you'd like to use it for commercial purposes. We'll cover those later in this post as well.

*📊 See [React Highcharts Example with Cube.js](https://cube.dev/blog/react-highcharts-example/) for a practical tutorial on creating a dashboard with numerous Highcharts components.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwp27nnp2x11ku5e0a90.png)

### [Chartist.js](http://gionkunz.github.io/chartist-js/)

💵 OSS / ⭐️ 12.4K / 📅 11 Sep 2019 / 🧱 535 KB / 🔌 universal

*Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.*

This library is not as actively maintained as others, however, it still worths a mention because of its size with no dependencies. Less than a megabyte, wow!

Just like others, it uses SVGs, it's flexible and it has clear separation of concerns, i. e., CSS is in CSS and JS is in JS, which may not fit all projects, considering that a lot of projects are using CSS-in-JS approach, yet it still deserves our attention.

### [Victory](https://formidable.com/open-source/victory/)

💵 OSS / ⭐️ 8.6K / 📅 1 Sep 2020 / 🧱 2.81 MB / 🔌 React

*An ecosystem of composable React components for building interactive data visualizations.*

Built by [Formidable Labs](https://formidable.com), a company behind such tools as [urqls](https://formidable.com/open-source/urql/) and [Spectacle](https://formidable.com/open-source/spectacle/). Provides an opinionated, but fully overridable React components to use both in web and mobile ([victory-native](https://github.com/FormidableLabs/victory-native)).

### [React-vis](https://uber.github.io/react-vis/)

💵 OSS / ⭐️ 7.6K / 📅 19 Apr 2019 / 🧱 1.81 MB / 🔌 React

*A collection of React components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.*

This library is React-friendly, high-level and customisable, expressive and industry-strong, because it is backed by Uber, so chances are you'll get your answers in case you bump into an issue.

### [amCharts](https://www.amcharts.com/javascript-charts/)

💵 OSS / ⭐️ 864 / 📅 18 Dec 2020 / 🧱 22.6 MB / 🔌 universal

*A go-to library for data visualization. When you don't have time to learn new technologies.*

This is not as popular as the rest, however, it's actively maintained and claims to be easy to use. It could be a good choice if you'd like to combine it with other data viz library for geo and timeline data. I'll cover those in Geo and Timeline sections.

### [AnyCharts](https://www.anychart.com)

💵 Paid & non-commercial licenses / ⭐️ 284 / 📅 29 Sep 2020 / 🧱 11.9 MB / 🔌 universal

*Interactive JavaScript charts designed to be embedded and integrated into web, desktop, and mobile apps.*

This is a paid library with non-commercial license, which could work well for a company who wants to save time and money on charts development, because a lot of charts pre-configured for you, just insert your data. Even such rear charts as Jump Line Chart, Sunburst Chart, or Circular Gauge.

## 2. Low-level and complex dataviz tools

Here go tools for a more complicated and more advanced way to visualize your data. The main reason to go with this approach is either because none of the simple charts can be used to visualize your data, or you need to have more advanced interactivity on your elements.

This approach requires a more advanced and specific knowledge in the area, e.g., SVG drawing or WebGL. Not everyone has access to such resource, so that's why there are libraries that expose a much simpler API for simple cases.

### [D3.js](https://d3js.org)

💵 OSS / ⭐️ 95.4K / 📅 22 Jan 2021 / 🧱 1 MB / 🔌 universal

*D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas, and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.*

This is probably the most popular low-level data visualization library on the internet. There's a few keys to its popularity: first, its flexibility (many other data visualization tools are based on D3.js, we'll discuss them below); second, it's massive [examples gallery](https://observablehq.com/@d3/gallery) which contains literally every visual you can imagine.

*📊 See [D3 Dashboard Tutorial](https://d3-dashboard.cube.dev) for a good jump-starting point to learn how to use D3.js with a backend.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/07cqexvjwztiegaj3jik.png)

`<d3-based-tools>`

And here are a few D3-based libraries: 

### [Plotly.js](https://plotly.com/javascript/)

💵 OSS / ⭐️ 12.7K / 📅 21 Dec 2020 / 🧱 60.4 MB / 🔌 universal

*Built on top of D3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.*

Plotly allows you to combine the best of two words: simple api and power of a D3.js. It's good for quick prototyping as well as complex projects that require complicated graphs and need to be done in a timely manner.

Plotly also has commercial offerings, but that's more in regard to its end-to-end development & deployment platform, Dash Enterprise.

### [C3.js](https://c3js.org)

💵 OSS / ⭐️ 9K / 📅 8 Aug 2020 / 🧱 1.46 MB / 🔌 universal

*D3-based reusable chart library.*

### [Semiotic](https://semiotic.nteract.io)

💵 OSS / ⭐️ 2.1K / 📅 21 Jan 2021 / 🧱 2.77 MB / 🔌 React

*Semiotic is a data visualization framework combining React & D3*

### [Taucharts](https://taucharts.com)

💵 OSS / ⭐️ 1.9K / 📅 26 Feb 2020 / 🧱 1.54 MB / 🔌 universal

*Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.*

`</d3-based-tools>`

### [Apache ECharts](https://echarts.apache.org/en/index.html)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*A Declarative Framework for Rapid Construction of Web-based Visualizations*

Another open source charting library that has enormous pre-defined charts ready to be used. The reason I put it in this category, is because not only it has simple charts, like line and bar graphs, but also more complicated ones, like 3D globe, 3D lines, Scatter GL and others. Checkout their [example page](https://echarts.apache.org/examples/en/index.html) and prepare to be amazed.

### [Raphaël](https://dmitrybaranovskiy.github.io/raphael/)

💵 OSS / ⭐️ 10.8K / 📅 14 Aug 2019 / 🧱 1.11 MB / 🔌 universal

*Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web*

Raphael is similar in D3.js in a way that it also allows you to draw your own svg graphics in html. E.g.

```js
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
```

It hasn't been actively maintained and now most of the preference goes to D3.js. Yet it's still relevant and last release wasn't that long ago, so it does deserve a mention in the list.

## 3. Tables and data grids

Some data is tabular and thus belongs to a table. But tables are more framework-specific, so it's hard to collect data tables for every framework in one post. However, here are a few options.

### [ag-Grid](https://www.ag-grid.com)

💵 OSS & paid / ⭐️ 6.9K / 📅 15 Jan 2021 / 🧱 n/a / 🔌 universal

*Advanced Data Grid / Data Table supporting JavaScript / React / AngularJS / Web Components*

Or, as it claims on its website, "The Best JavaScript Grid in the World." It's packed with features and has both OSS and Enterprise versions with bindings for vanilla JS, React, Angular, Vue, and even Polymer.

### [Material UI Data Grid](https://material-ui.com/components/data-grid/)

💵 OSS & paid / ⭐️ 272 / 📅 26 Jan 2021 / 🧱 n/a / 🔌 React

*A fast and extendable data table and data grid for React.*

It's a feature-rich component which is complementary to the whole [Material UI](https://material-ui.com) set of React components. It's available in MIT and commercial versions, too.

There's also some competition here. For the sake of comparison, I should mention the [data table](https://ant.design/components/table/) component of Ant Design library, which is great to use if you need a complete set of UI components.

## 4. Timeline charts & time-based tools

Not all charting libraries include timelines and Gantt charts, they're quite unique in that sense. So if you have some time-based data to plot, then you may be interested in these libraries or plugins.

### [Highcharts Gantt](https://www.highcharts.com/blog/products/gantt/)

Similar to word clouds, you can have Highcharts Gantt plugin provided by the company. Check out out their page to learn more about it.

### [amCharts timeline](https://www.amcharts.com/timeline-chart/)

Similar approach: get the main amCharts library and use additional timeline plugin.

### [vis-timeline](https://github.com/visjs/vis-timeline)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

*Create a fully customisable, interactive timelines and 2d-graphs with items and ranges.*

This is an open-source alternative to the above two libs. It's quite flexible, well-designed, although its last release was about 3 years ago.

## 5. Geospatial and mapping tools

Now we've arrived to geo data, the type of data that has a geographic component to it and should have map-based data visualizations.

### [Leaflet](https://leafletjs.com)

💵 OSS / ⭐️ 30K / 📅 4 Sep 2020 / 🧱 5.96 MB / 🔌 universal

*Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JavaScript plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.*

Leaflet is lightweight, simple, and flexible, and is probably the most popular open-source mapping library at the moment. Leaflet was developed by Vladimir Agafonkin, who is currently in Mapbox (see below), and OSS community.

There are numerous tutorials and guides on how to work with leaflet. So it's very cost and time efficient to start and keep working with Leaflet.

### [Mapbox](https://www.mapbox.com)

💵 Free-ish & paid / ⭐️ 7.2K / 📅 28 Jan 2021 / 🧱 34 MB / 🔌 universal

*Mapbox is a mapping and location cloud platform for developers.*

These guys provide SDKs and APIs to companies like Foursquare, Lonely Planet, and Facebook. You can do a lot with Mapbox, and their APIs are a pleasure to work with, well-documented, and well-supported. Check out [their examples page](https://docs.mapbox.com/mapbox-gl-js/example/).

Mapbox isn't completely free. It has a free tier for low volume apps. So it's free for up to 25,000 mobile users and 50,000 web loads. Beyond that you'd need to pay per additional requests.

*📊 See [JavaScript Map Data Visualization with Mapbox](https://mapbox-guide.cube.dev) for a complete guide on Mapbox and different kinds of maps, from heatmaps to choropleths.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btrt0mfvmctmm0cdjgh7.png)

### [Google Maps](https://developers.google.com/maps/documentation/javascript/visualization)

Google Maps can do a lot more than just show places on a map. You can map data across the world, create heatmaps, and even size circles.

Google has a CDN URL you'd need to include in your project or use a framework-specific wrapper, like [`@react-google-maps/api`](https://www.npmjs.com/package/@react-google-maps/api).

### [amCharts maps](https://www.amcharts.com/javascript-maps/)

If your project is already using amCharts, then you might be interested in using amCharts maps. There is no need to install anything extra, the main amCharts package already includes everything needed for creating a map visualization.

## 6. Word clouds

Not all data is quantifiable. Some data can only be illustrated with words. This is a perfect use case scenario for word clouds. A few libraries allow you to do those.

### [d3-cloud](https://www.jasondavies.com/wordcloud/)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

Great library to use if you already have D3.js as a part of your code ecosystem.

### [amCharts word clouds](https://www.amcharts.com/demos/word-cloud/)

This is a plugin for amCharts. See more details about amCharts earlier in this post. To create word cloud you'd need the main library + the `wordCloud` plugin.

### [Highcharts word clouds](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series)

Similar to amCharts word clouds, if you want to make word clouds with Highcharts, you'd need `modules/wordcloud.js` module.

## 7. 3D visualization tools

While every tool we've observed above was focused on planar, two-dimensional data visualizations, there's one more dimension to it 😀 The following tools help create 3D visuals.

### [Three.js](https://threejs.org)

💵 OSS / ⭐️ 66.6K / 📅 24 Dec 2020 / 🧱 24.4 MB / 🔌 universal

*The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.*

Three.js is a different take on visualizing data. It's used to create and display animated 3D computer graphics in a web browser using WebGL. Three.js can be used not only visualize data, but also create such pieces of art as [Littlest Tokyo](https://threejs.org/examples/#webgl_animation_keyframes). The data can take ANY form your like. Literary. It's only limited by your creativity.

### [vis-graph3d](https://github.com/visjs/vis-graph3d)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window.*

This is a very interesting lightweight alternative to D3.js and Three.js.

## Final remarks

Honestly, it's impossible to include everything in one list. But I hope this post helped you get a better idea about the "big players" and types of data visualizations.

It's worth mentioning that to communicate your data better to your user, it's always a good idea to mix and match different types of data visualizations. Moreover, you can also have a date formatting library (such as [Moment.js](https://momentjs.com)) or number formatting library (such as [numeral.js](http://numeraljs.com)) that could accompany your graphs and highlight any special or outstanding number in your dataset. 

Also, if you need an API to serve data to your charts or data visualization components, please consider to use [Cube.js](https://cube.dev).

If you have any particular recommendation or personal experience with any of the listed libraries to share, please feel free to reach out to me and leave a comment on [Cube.js Slack](https://slack.cube.dev)! 🙌

Nikita Kakuev

Data Visualization

Understanding front-end data visualization tools ecosystem in 2021

I've already covered building a static dashboard with [Cube](https://github.com/cube-js/cube.js) and Chart.js in [this tutorial](https://cube.dev/blog/node-express-analytics-dashboard-with-cubejs/). Now, I’m going to show you how to dynamically change the underlying chart’s data based on the user’s input.

We’ll let the user pick a date range and based on that, reload the chart. When a user picks a new set of dates, a new request will be sent to the Cube API. The Cube server will generate new SQL code, execute it against the database, and send the result back to the client. And finally, the client re-renders a chart with the new data.

Here is a [CodeSandbox demo](https://codesandbox.io/s/chartjs-example-with-dynamic-dataset-w40tb) of what we are going to build. You can click "Open in Editor" to check the source code.

<iframe src="https://codesandbox.io/embed/youthful-stonebraker-w40tb?fontsize=14&hidenavigation=1&theme=dark"
        style={{ width: '100%', height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }}
        title="Chart.js Example with Dynamic Dataset"
        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

## Setting up an API

We're going to create a new Cube app and connect it to a cloud-based Postgres dataset.

First, make sure you have [Docker](https://www.docker.com/get-started) installed on your machine. You can also get started using [Node.js](https://cube.dev/docs/getting-started).

Second, create new a folder for your Cube app and navigate to it:

```bash
mkdir chartjs-dynamic-data
cd chartjs-dynamic-data
mkdir schema
```

Then, create a new `docker-compose.yml` file with Cube configuration. We'll use environment variables for configuration and instruct Cube to connect to a publicly available cloud-based Postgres dataset:

```bash
cat > docker-compose.yml << EOL

version: '2.2'

services:
  cube:
    image: cubejs/cube:latest
    ports:
      - 4000:4000  # Cube.js API and Developer Playground
      - 3000:3000  # Dashboard app, if created
    environment:
      - CUBEJS_DB_TYPE=postgres
      - CUBEJS_DB_HOST=demo-db.cube.dev
      - CUBEJS_DB_USER=cube
      - CUBEJS_DB_PASS=12345
      - CUBEJS_DB_NAME=ecom

      - CUBEJS_API_SECRET=SECRET
      - CUBEJS_DEV_MODE=true
    volumes:
      - .:/cube/conf
EOL
```

The last step is to run Cube.js:

```bash
docker compose up
````

Now you can open [localhost:4000](http://localhost:4000) in your browser. You will see [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), a companion tool that will help you develop your Cube.js app.

We're going to use it to generate the data schema for the database. Please navigate to the Schema tab, select the `public` schema, and click "Generate Schema". Great! Now you can navigate to the Build tab to play around with the data:

![Developer Playground](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/86598a68-2468-414a-b841-b5b95194bc2e.png)

There are multiple ways to [deploy Cube.js apps](https://cube.dev/docs/deployment). In this tutorial, we are going to use the Cube.js API deployed to [Cube Cloud](https://cube.dev/cloud) at `https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1`.

## Simple Chart

We'll use [CodeSandbox](https://codesandbox.io), an online editor for rapid web development, to build the front-end app. You can check out the final [source code](https://codesandbox.io/s/chartjs-example-with-dynamic-dataset-w40tb) and the demo app. Feel free to fork it and play around.

We are going to use the Vanilla template from CodeSandbox. To keep things simple, we'll not add any framework, such as React or Vue.

![CodeSandbox](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/218e6fd4-d2d6-4087-a478-cec51e7e7a90.png)

The first step is to include the Cube.js client and Chart.js libraries. Insert the following code inside the `dependencies` key of the `package.json` file. It should look like this:

```json
// ...

  "dependencies": {
    "@cubejs-client/core": "0.27.15",
    "chart.js": "3.2.1",
    "moment": "2.29.1",
    "parcel-bundler": "^1.6.1"
  },

// ...
```

To initialize the Cube.js client, we need to pass an API URL along with the secret. We'll also import the libraries we've just added. Add these lines to the `index.js` file:

```javascript
import cubejs from "@cubejs-client/core";
import Chart from "chart.js/auto";
import moment from "moment";

const cubejsApi = cubejs(
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE1OTQ2NjY4OTR9.0fdi5cuDZ2t3OSrPOMoc3B1_pwhnWj4ZmM3FHEX7Aus",
  { apiUrl: "https://awesome-ecom.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1" }
);
```

Once the client is initialized, we can request data from the API and visualize it. The `load` function accepts a query, which is a plain JavaScript object, and returns a promise. You can learn more about the [query format](https://cube.dev/docs/query-format) in the docs.

```javascript
cubejsApi
  .load({
    measures: ["Orders.count"],
    timeDimensions: [ {
      dimension: "Orders.createdAt",
      granularity: `day`,
      dateRange: [`08/01/2020`,`09/01/2020`]
    } ]
  })
  .then(resultSet => {
    new Chart(document.getElementById("chart"), {
      type: "line",
      options: {},
      data: chartJsData(resultSet)
    });
  });
```

We are loading `Orders.count`, which is grouped by the created day to plot as a line chart. To make this code work, we need to make a couple of things. First, add the `<canvas>` tag to the inside the `<body>` in the `index.html` file:

```html
<canvas id="chart"></canvas>
```

Next, we need to define the `chartJsData` function, which should accept a [resultSet](https://cube.dev/docs/@cubejs-client-core#result-set) returned from Cube.js and format it for Chart.js. Add this to the `index.js` file:

```javascript
var chartJsData = function (resultSet) {
  return {
    datasets: [
      {
        label: "Orders Count",
        data: resultSet.chartPivot().map(function (r) {
          return r["Orders.count"];
        }),
        backgroundColor: "rgb(255, 99, 132)"
      }
    ],
    labels: resultSet.categories().map(function (c) {
      return moment(c.x).format("DD MMM");
    })
  };
};
```

That is all we need to load the data and visualize it as a static line chart:

![Static Chart](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/734dc84e-91de-4770-ac7b-527c8727107f.png)

## Dynamic Data

Next, we’re going to add a date range picker and load data dynamically based on the date range selected by the user.

Let's add the `flatpickr` dependency we'll be using as a lightweight date picker in the `package.json` file. It should look like this:

```json
// ...

  "dependencies": {
    "@cubejs-client/core": "0.27.15",
    "chart.js": "3.2.1",
    "moment": "2.29.1",
    "flatpickr": "4.6.9",
    "parcel-bundler": "^1.6.1"
  },

// ...
```

Next, let's import this library in the `index.js` file:

```
import flatpickr from "flatpickr";
```

Next, let’s wrap the code to render a chart into the `drawChart` function, which is going to accept two arguments: start date and end date.

```javascript
let chart;

var drawChart = function (startDate, endDate) {
  cubejsApi
    .load({
      measures: ["Orders.count"],
      timeDimensions: [
        {
          dimension: "Orders.createdAt",
          granularity: `day`,
          dateRange: [startDate, endDate]
        }
      ]
    })
    .then((resultSet) => {
      if (chart) {
        chart.data = chartJsData(resultSet);
        chart.update();
      } else {
        chart = new Chart(document.getElementById("chart"), {
          type: "line",
          options: {},
          data: chartJsData(resultSet)
        });
      }
    });
};
```

Besides making the `dateRange` dynamic, we’re also saving the current chart into the global variable `chart` so we can update it later when we need to re-render the chart.

Finally, we can add an input to the `index.html` file and make it a date range picker. Let's add a CSS import inside the `head` and an input inside the `body`:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

/// ...

<input id="dates" style="font-size: 20pt;" />
```

In the `index.js` file, after the `drawChart` function:

```javascript
const MIN_DATE = "2020-08-01";
const MAX_DATE = "2020-09-01";

flatpickr("#dates", {
  mode: "range",
  dateFormat: "Y-m-d",
  defaultDate: [MIN_DATE, MAX_DATE],

  onChange: function (selectedDates) {
    if (selectedDates.length === 2) {
      drawChart(selectedDates[0], selectedDates[1]);
    }
  }
});

drawChart(MIN_DATE, MAX_DATE);
```

That is it! Now we have a fully working dynamic and interactive chart.

![Dynamic Chart](https://cubedev-blog-images.s3.us-east-2.amazonaws.com/afb35c47-7dde-4170-8232-15705cdb6711.png)

And here's an interactive CodeSandbox that we've built. You can select different dates from the date picker and see how the chart is changing.

<iframe src="https://codesandbox.io/embed/youthful-stonebraker-w40tb?fontsize=14&hidenavigation=1&theme=dark&view=preview"
        style={{ width: '100%', height: 500, border: 0, borderRadius: 4, overflow: 'hidden' }}
        title="Chart.js Example with Dynamic Dataset"
        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

If you have any questions about this tutorial or about [Cube.js](https://cube.dev) in general, feel free to ask them in [Slack](https://slack.cube.dev).

Chart.js

Chart.js tutorial: Getting started with the all-new Chart.js v4

Understanding front-end data visualization tools ecosystem in 2021

Chart.js Example with Dynamic Dataset

Get Cube updates to your inbox

Upgrade your data stack today