Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Chart

Chart

Reference Chart.js configurations

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.

html
Copy 
<script
  type="module"
  src="https://assets.soracom.io/sds/beta/ds-chart/ds-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:

html
Copy 
// Import the SDS Horizontal Bar Chart style import { dsHorizontalBarChart }
from "https://assets.soracom.io/sds/beta/ds-chart/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:

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

See SDS color javascript for more details.

Examples

Bar chart

Vertical

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-chart.js"
></script>

<script type="module">
  // Import the SDS Dial Chart style
  import {
    dsDialChart,
    dsColor,
  } from "https://assets.soracom.io/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-chart.js"
></script>

<script type="module">
  // Import the SDS Dial Chart style
  import {
    dsDialChart,
    dsColor,
  } from "https://assets.soracom.io/sds/beta/ds-chart/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

html
Copy 
<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/sds/beta/ds-chart/ds-chart.js"
></script>

<script type="module">
  // Import the SDS Dial Chart style
  import {
    dsDialChart,
    dsColor,
  } from "https://assets.soracom.io/sds/beta/ds-chart/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.

html
Copy 
<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/sds/beta/ds-chart/ds-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/sds/beta/ds-chart/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>