Chart.js

Chart.js is a widely-used JavaScript library for creating modern charts for the web. It’s highly flexible and performant and can be used to create multiple types of charts. When you use the Chart.js custom visual type, your data is rendered using Chart.js’s Chart class.

Demo

To view a quick demo of the custom Chart.js visual, use the Echo demo app referenced on the overview page to run the input below.

Demo input

{
  "assets": [
    {
      "name": "Chart.js example",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "custom-tab",
        "label": "Charts"
      },
      "content": [
        {
          "type": "radar",
          "data": {
            "labels": [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July",
              "August"
            ],
            "datasets": [
              {
                "label": "D0",
                "data": [14.89, 10.64, 13.39, 9.62, 11.27, 8.67, 8.72, 14.49],
                "borderColor": "rgb(255, 99, 132)"
              },
              {
                "label": "D1",
                "data": [24.98, 25.5, 28.37, 21.94, 25.97, 24.06, 18.76, 25.4],
                "borderColor": "rgb(255, 159, 64)",
                "fill": "-1"
              },
              {
                "label": "D2",
                "data": [35.37, 39.41, 42.53, 32.59, 36.56, 35.17, 29.59, 36.15],
                "borderColor": "rgb(255, 205, 86)",
                "fill": 1
              },
              {
                "label": "D3",
                "data": [47.8, 53.02, 51.59, 45.38, 50.21, 43.35, 44.45, 49.77],
                "borderColor": "rgb(75, 192, 192)",
                "fill": false
              },
              {
                "label": "D4",
                "data": [58.59, 66.31, 59.76, 56.92, 60.97, 59.34, 57.56, 59.7],
                "borderColor": "rgb(54, 162, 235)",
                "fill": "-1"
              },
              {
                "label": "D5",
                "data": [74.32, 76.47, 73.24, 66.99, 74.33, 67.4, 67.22, 69.08],
                "borderColor": "rgb(153, 102, 255)",
                "fill": "-1"
              },
              {
                "label": "D6",
                "data": [86.67, 85.65, 82.11, 79.99, 85.62, 81.92, 79.91, 79.75],
                "borderColor": "rgb(201, 203, 207)",
                "fill": { "value": 85 }
              }
            ]
          }
        },
        {
          "type": "bar",
          "data": {
            "labels": [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July"
            ],
            "datasets": [
              {
                "label": "Dataset 1",
                "data": [
                  -31.57750343, 97.13820302, -11.38888889, 97.1622085,
                  69.70507545, -98.69855967, 24.05006859
                ],
                "borderColor": "rgb(255, 99, 132)"
              },
              {
                "label": "Dataset 2",
                "data": [
                  -70.69101509, -76.74897119, 15.75274348, -57.38340192,
                  -78.87345679, -61.06310014, -23.70541838
                ],
                "borderColor": "rgb(54, 162, 235)"
              },
              {
                "label": "Dataset 3",
                "data": [
                  -38.40534979, 60.26920439, 97.00960219, -88.67798354,
                  46.41632373, -28.57167353, 36.97530864
                ],
                "borderColor": "rgb(153, 102, 255)"
              },
              {
                "label": "Dataset 4",
                "data": [
                  -35.95507545, 66.21742112, 5.22119342, 79.82167353,
                  48.04355281, 82.72633745, 60.41323731
                ],
                "borderColor": "rgb(255, 205, 86)"
              },
              {
                "label": "Dataset 5",
                "data": [
                  -16.4266118, -63.84259259, -27.51371742, -60.52640604,
                  32.18106996, 82.70747599, -17.58916324
                ],
                "borderColor": "rgb(75, 192, 192)"
              }
            ]
          },
          "options": {
            "indexAxis": "y",
            "elements": { "bar": { "borderWidth": 2 } },
            "responsive": true,
            "plugins": {
              "legend": { "position": "right" },
              "title": {
                "display": true,
                "text": "Chart.js Horizontal Bar Chart"
              }
            }
          }
        },
        {
          "type": "line",
          "data": {
            "labels": [
              "January",
              "February",
              "March",
              "April",
              "May",
              "June",
              "July"
            ],
            "datasets": [
              {
                "label": "Dataset 1",
                "data": [
                  -46.718107, 64.3021262, -79.20438957, 6.71296296,
                  -23.62482853, 76.69581619, -97.26337449
                ],
                "borderColor": "rgb(255, 99, 132)",
                "yAxisID": "y"
              },
              {
                "label": "Dataset 2",
                "data": [
                  86.59636488, -80.36694102, -91.98045267, 61.63237311,
                  -83.72599451, 89.22839506, -31.85013717
                ],
                "borderColor": "rgb(54, 162, 235)",
                "yAxisID": "y1"
              }
            ]
          },
          "options": {
            "responsive": true,
            "interaction": { "mode": "index", "intersect": false },
            "stacked": false,
            "plugins": {
              "title": {
                "display": true,
                "text": "Chart.js Line Chart - Multi Axis"
              }
            },
            "scales": {
              "y": { "type": "linear", "display": true, "position": "left" },
              "y1": {
                "type": "linear",
                "display": true,
                "position": "right",
                "grid": { "drawOnChartArea": false }
              }
            }
          }
        }
      ]
    }
  ]
}

After running, you should see a Charts tab view on the run details view in Nextmv Console; clicking on this tab should display three demo charts.

Screenshot of a radar chart rendered by the Chart.js library

Defining Chart.js data

This section covers the requirements for passing your Chart.js data for the custom visual asset to the content property. The schema requirements for defining a custom visual asset can be found on the Overview page.

The Chart.js data that is passed to content should be an array of objects with the following top-level properties:

Property Description

Property	Description
`type`	The type property defines which type of chart should be rendered. It must be one of Chart.js’s `ChartTypes`: `bar` `line` `scatter` `bubble` `pie` `doughnut` `polarArea` `radar` The type defined here is passed to Chart.js’s type parameter when rendering the chart.
`data`	The data used for rendering Chart.js charts. The data defined here is passed to Chart.js’s data parameter when rendering the chart.
`options`	(Optional) Settings defined in the `options` property are passed to Chart.js’s options parameter when rendering the plot. Nextmv Console defines only one layout setting by default: Layout defaults { aspectRatio: 2.2, responsive: true, plugins: { tooltip: { animation: false, backgroundColor: theme.color.gray700T, bodyFont: <Nextmv-specific font style>, boxPadding: 3, cornerRadius: 5, padding: { top: 6, right: 9, bottom: 6, left: 8 }, titleFont: <Nextmv-specific font style>, }, }, } Copy You can override these default layout options by passing options of your own with the same names (all layout properties are Chart.js-specific, there are no Nextmv-specific layout options). However, it is not recommended to override the `responsive: true` setting as it can adversely affect the rendering of your chart.

type

The type property defines which type of chart should be rendered. It must be one of Chart.js’s ChartTypes:

bar
line
scatter
bubble
pie
doughnut
polarArea
radar

The type defined here is passed to Chart.js’s type parameter when rendering the chart.

data The data used for rendering Chart.js charts. The data defined here is passed to Chart.js’s data parameter when rendering the chart.

options

(Optional) Settings defined in the options property are passed to Chart.js’s options parameter when rendering the plot. Nextmv Console defines only one layout setting by default:

Layout defaults

{
  aspectRatio: 2.2,
  responsive: true,
  plugins: {
    tooltip: {
      animation: false,
      backgroundColor: theme.color.gray700T,
      bodyFont: <Nextmv-specific font style>,
      boxPadding: 3,
      cornerRadius: 5,
      padding: { top: 6, right: 9, bottom: 6, left: 8 },
      titleFont: <Nextmv-specific font style>,
    },
  },
}

You can override these default layout options by passing options of your own with the same names (all layout properties are Chart.js-specific, there are no Nextmv-specific layout options). However, it is not recommended to override the responsive: true setting as it can adversely affect the rendering of your chart.

The custom data passed to content will have this shape then:

Example Chart.js data definition

{
  "version": {...},
  "solutions": [...],
  "statistics": {...},
  "assets": [
    {
      "name": "Chart.js example",
      "content_type": "json",
      "visual": {
        "schema": "chartjs",
        "type": "custom-tab",
        "label": "Charts"
      },
      "content": {
        "type": ...,
        "data": [...],
        "options": {...}
      }
    }
  ]
}

Note that if multiple objects are included in the content array then each object will be rendered as its own Chart.js chart. That is, you can render multiple Chart.js charts in a single custom view.

Add custom charts, plots, graphs and more to your runs

Demo

Defining Chart.js data

Overview

GeoJSON

Contents