Skip to content

Soracom

Design System
Home Design System Elements Chart

Chart

Reference Chart.js configurations

stable dark-mode

Overview 

The following configuration is recommended for implementing chart.js.

SDS Global Chart.js plugin 

The sds-chart.js file provides a global Chart.js plugin which is automatically registered with all chart.js instances. This plugin provides some additional sds classname injection on the charts, and provides additional functionality for dial-charts.

<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

SDS Chart.js config files 

SDS includes existing Chart.js config files to style the charts that can be loaded using standard javascript module imports.

You can import the Chart.js modules as follows:

// Import the SDS Horizontal Bar Chart style
import { dsHorizontalBarChart }
  from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

// Create a new instance of the chart
let myChart = structuredClone(dsHorizontalBarChart);

// Assign your datasets and labels
myChart.data.datasets = [ ... dataset ... ]
configExample1.data.labels = [ ... labels ... ]

If it’s not possible to import the modules directly, you can view the files hosted on assets, and copy and paste the code locally and manually implement the charts.

Colors 

If you are importing one of the SDS chart.js modules, you can load the SDS colors at the same time by using:

// Import the SDS Horizontal Bar Chart style, and the SDS colors
import { dsHorizontalBarChart, dsColor, dsColorList }
  from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

See SDS color javascript for more details.

Examples 

Bar chart 

Vertical  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsBarChart }
    from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

  // Create a new instance of the chart
  let configExample5 = structuredClone(dsBarChart);

  // Set the label content
  configExample5.data.labels = [
    "295050910047631",
    "295050910047632",
    "295050910047633",
    "295050910047634",
    "295050910047635"
  ];

  // Set the chart data
  configExample5.data.datasets = [
    {
      label: "Upload",
      data: [288.6, 142.29, 34.3, 29.38, 19.75]
    }
  ];

  // Initiate the chart
  let chartExample5 = document.getElementById('chartExample5').getContext('2d');
  let myChartExample5 = new Chart(chartExample5, configExample5);
</script>

<div class="ds-chart">
  <canvas id="chartExample5"></canvas>
</div>

Vertical with scale  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsBarChartScale }
    from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

  // Create a new instance of the chart
  let configExample7 = structuredClone(dsBarChartScale);

  // Set the label content
  configExample7.data.labels = [
    "295050910047631",
    "295050910047632",
    "295050910047633",
    "295050910047634",
    "295050910047635"
  ];

  // Set the chart data
  configExample7.data.datasets = [
    {
      label: "Upload",
      data: [288.6, 142.29, 34.3, 29.38, 19.75]
    }
  ];

  // Initiate the chart
  let chartExample7 = document.getElementById('chartExample7').getContext('2d');
  let myChartExample7 = new Chart(chartExample7, configExample7);
</script>

<div class="ds-chart">
  <canvas id="chartExample7"></canvas>
</div>

Horizontal  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsBarChartHorizontal }
    from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

  // Create a new instance of the chart
  let configExample1 = structuredClone(dsBarChartHorizontal);

  // Set the label content
  configExample1.data.labels = [
    "295050910047631",
    "295050910047632",
    "295050910047633",
    "295050910047634",
    "295050910047635"
  ];

  // Set the chart data
  configExample1.data.datasets = [
    {
      label: "Upload",
      data: [288.6, 142.29, 34.3, 29.38, 19.75]
    }
  ];

  // Initiate the chart
  let chartExample1 = document.getElementById('chartExample1').getContext('2d');
  let myChartExample1 = new Chart(chartExample1, configExample1);
</script>

<div class="ds-chart">
  <canvas id="chartExample1"></canvas>
</div>

Horizontal with scale  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsBarChartHorizontalScale }
    from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

  // Create a new instance of the chart
  let configExample6 = structuredClone(dsBarChartHorizontalScale);

  // Set the label content
  configExample6.data.labels = [
    "295050910047631",
    "295050910047632",
    "295050910047633",
    "295050910047634",
    "295050910047635"
  ];

  // Set the chart data
  configExample6.data.datasets = [
    {
      label: "Upload",
      data: [288.6, 142.29, 34.3, 29.38, 19.75]
    }
  ];

  // Initiate the chart
  let chartExample6 = document.getElementById('chartExample6').getContext('2d');
  let myChartExample6 = new Chart(chartExample6, configExample6);
</script>

<div class="ds-chart">
  <canvas id="chartExample6"></canvas>
</div>

Horizontal, multiple bars per row with custom color  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style, and the SDS colors
  import { dsBarChartHorizontal, dsColorList }
    from "https://assets.soracom.io/js/sds/latest/bar-chart.js";

  // Create a new instance of the chart
  let configExample2 = structuredClone(dsBarChartHorizontal);

  // Set the label content
  configExample2.data.labels = [
    "295050910047631",
    "295050910047632",
    "295050910047633",
    "295050910047634",
    "295050910047635"
  ];

  // Set the chart data
  configExample2.data.datasets = [
    {
      label: "Download",
      data: [8.6, 42.29, 16.3, 44.38, 29.75],
      backgroundColor: dsColorList.light[0]
    },
    {
      label: "Upload",
      data: [298.6, 142.29, 34.3, 29.38, 19.75],
      backgroundColor: dsColorList.light[1]
    }
  ];

  // Show the legend
  configExample2.options.plugins.legend.display = true;

  // Initiate the chart
  let chartExample2 = document.getElementById('chartExample2').getContext('2d');
  let myChartExample2 = new Chart(chartExample2, configExample2);
</script>

<div class="ds-chart">
  <canvas id="chartExample2"></canvas>
</div>

Line chart 

Basic example  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsLineChart }
    from "https://assets.soracom.io/js/sds/latest/line-chart.js";

  // Create a new instance of the chart
  let configExample3 = structuredClone(dsLineChart);

  // Set the label content
  configExample3.data.labels = [
    "23 May",
    "22 May",
    "21 May",
    "20 May",
    "19 May",
    "18 May",
    "17 May",
    "16 May",
    "15 May"
  ];

  // Set the chart data
  configExample3.data.datasets = [
    {
      label: "Download",
      data: [
        260.6,
        260.6,
        290.29,
        160.55,
        180.38,
        60.75,
        133.2,
        270.21,
        270.21,
        120.21
      ],
      order: 2,
    },
    {
      label: "Upload",
      data: [84.4, 84.4, 14.22, 70.76, 32.68, 121.57, 24.09, 65.3, 75.3],
      order: 1
    },
  ];

  // Show the legend
  configExample3.options.plugins.legend.display = true;

  // Initiate the chart
  let chartExample3 = document.getElementById('chartExample3').getContext('2d');
  let myChartExample3 = new Chart(chartExample3, configExample3);
</script>

<div class="ds-chart">
  <canvas id="chartExample3"></canvas>
</div>

Line area chart  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsLineAreaChart }
    from "https://assets.soracom.io/js/sds/latest/line-chart.js";

  // Create a new instance of the chart
  let configExample4 = structuredClone(dsLineAreaChart);

  // Set the label content
  configExample4.data.labels = [
    "23 May",
    "22 May",
    "21 May",
    "20 May",
    "19 May",
    "18 May",
    "17 May",
    "16 May",
    "15 May"
  ];

  // Set the chart data
  configExample4.data.datasets = [
    {
      label: "Download",
      data: [
        260.6,
        260.6,
        290.29,
        160.55,
        180.38,
        60.75,
        133.2,
        270.21,
        270.21,
        120.21
      ],
      order: 2,
    },
    {
      label: "Upload",
      data: [84.4, 84.4, 14.22, 70.76, 32.68, 121.57, 24.09, 65.3, 75.3],
      order: 1
    },
  ];

  // Show the legend
  configExample4.options.plugins.legend.display = true;

  // Initiate the chart
  let chartExample4 = document.getElementById('chartExample4').getContext('2d');
  let myChartExample4 = new Chart(chartExample4, configExample4);
</script>

<div class="ds-chart">
  <canvas id="chartExample4"></canvas>
</div>

Dial chart 

Dial chart expects two values. The first value and the total of both values will be displayed.

Basic example  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
    // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample9 = structuredClone(dsDialChart);

  // Set the chart data
  configExample9.data.datasets = [
    {
      data: [64, 36],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample9 = document.getElementById('chartExample9').getContext('2d');
  new Chart(chartExample9, configExample9);
</script>
<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample9"></canvas>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
    // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample9 = structuredClone(dsDialChart);

  // Set the chart data
  configExample9.data.datasets = [
    {
      data: [64, 36],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample9 = document.getElementById('chartExample9').getContext('2d');
  new Chart(chartExample9, configExample9);
</script>
<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample9"></canvas>
  </div>
</div>

With Title and labels  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample10 = structuredClone(dsDialChart);

  // Set the chart data
  configExample10.options.plugins.title.text = 'Data usage';
  configExample10.data.labels = ['MB', 'MB'];
  configExample10.data.datasets = [
    {
      data: [88, 112],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample10 = document.getElementById('chartExample10').getContext('2d');
  new Chart(chartExample10, configExample10);
</script>

<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample10"></canvas>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample10 = structuredClone(dsDialChart);

  // Set the chart data
  configExample10.options.plugins.title.text = 'Data usage';
  configExample10.data.labels = ['MB', 'MB'];
  configExample10.data.datasets = [
    {
      data: [88, 112],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample10 = document.getElementById('chartExample10').getContext('2d');
  new Chart(chartExample10, configExample10);
</script>

<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample10"></canvas>
  </div>
</div>

DMY/Y label  

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample11 = structuredClone(dsDialChart);

  // Set the chart data
  configExample11.options.plugins.title.text = 'Remaining Time';
  configExample11.data.datasets = [
    {
      dataDMYY: [12, 3, 2, 10],
      data: [2818, 832],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample11 = document.getElementById('chartExample11').getContext('2d');
  new Chart(chartExample11, configExample11);
</script>

<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample11"></canvas>
  </div>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Import the SDS Dial Chart style
  import { dsDialChart, dsColor } from 'https://assets.soracom.io/js/sds/beta/dial-chart.js';

  // Create a new instance of the chart
  let configExample11 = structuredClone(dsDialChart);

  // Set the chart data
  configExample11.options.plugins.title.text = 'Remaining Time';
  configExample11.data.datasets = [
    {
      dataDMYY: [12, 3, 2, 10],
      data: [2818, 832],
      backgroundColor: [dsColor.blue.rgb, dsColor.celesteTint.rgb],
    },
  ];

  // Initiate the chart
  var chartExample11 = document.getElementById('chartExample11').getContext('2d');
  new Chart(chartExample11, configExample11);
</script>

<div class="ds-cols --4">
  <div class="ds-chart">
    <canvas id="chartExample11"></canvas>
  </div>
</div>

Styles 

Clipped 

In specific situations, the styling requires the chart to bleed off the right and left hand sides. To do this correctly, 2 extra data points must be included in the chart – and the first and last records will be presented clipped off.

To achieve this (for example on the ‘7 Day’ chart below):

  1. Include 1 extra data entry before the 7 days (i.e. 8th day)
  2. Include 1 extra data entry the after the 7 days (i.e. duplicate the latest entry, or a predicted value)
  3. It’s recommend the label for the extra data points is left blank

Add the class ds-chart --clip --9 (9 is the total number of data records on a 7 day chart).

The chart will display with the left and right side clipped. SDS currently supports clipping between --3 and --16. This style is currently only tested with line/area charts.

Compare the chart below, with the standard presentation above.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script type="module" src="https://assets.soracom.io/js/sds/beta/sds-chart.js"></script>

<script type="module">
  // Register ChartDataLabels
  Chart.register(ChartDataLabels);

  // Import the SDS Horizontal Bar Chart style
  import { dsLineAreaChart }
    from "https://assets.soracom.io/js/sds/latest/line-chart.js";

  // Create a new instance of the chart
  let configExample8 = structuredClone(dsLineAreaChart);

  // Set the label content
  configExample8.data.labels = [
    "",
    "22 May",
    "21 May",
    "20 May",
    "19 May",
    "18 May",
    "17 May",
    "16 May",
    ""
  ];

  // Set the chart data
  configExample8.data.datasets = [
    {
      label: "Download",
      data: [
        260.6,
        260.6,
        290.29,
        160.55,
        180.38,
        60.75,
        133.2,
        270.21,
        270.21,
        120.21
      ],
      order: 2,
    },
    {
      label: "Upload",
      data: [84.4, 84.4, 14.22, 70.76, 32.68, 121.57, 24.09, 65.3, 75.3],
      order: 1
    },
  ];

  let chartExample8 = document.getElementById('chartExample8').getContext('2d');
  let myChartExample8 = new Chart(chartExample8, configExample8);
</script>

<div class="ds-chart --clip --9">
  <canvas id="chartExample8"></canvas>
</div>
Copyright © 2015-2024 Soracom, Inc.
Last page update: December 1, 2023
0e06dad2