Skip to content
MENU

Soracom

Design System

Chart

Reference chartjs configurations

Overview 

The following configuration is recommended for implementing chart.js.

Colors 

The examples below reference an SDS color.js file which can be directly loaded or downloaded from:

Once imported, colors can be referenced using the following syntax:

// RGBA (lighter colors use opacity)
dsColor.red.rgba
dsColor.redTint.rgba

// RGB (opaque)
dsColor.red.rgb
dsColor.redTint.rgb

Examples 

Bar chart 

// Import the sds color object
import { dsColor } from 'https://assets.soracom.io/js/sds/color.js';

// Defaults
Chart.defaults.font.family = 'Source Han Sans JP, Arial, Helvetica, sans-serif';
Chart.defaults.font.weight = '500';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [6, 17, 5, 3, 7, 2],
      backgroundColor: dsColor.redTint.rgba,
    },
    {
      label: 'Dataset 1',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: dsColor.blueTint.rgba,
    },
  ]
};

var config = {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                align: 'start',
                color: dsColor.inkDark.rgb,
                font: {
                    size: '20px'
                }
            },
            subtitle: {
                display: true,
                text: 'Custom Chart Subtitle',
                align: 'start',
                color: dsColor.ink.rgb,
                font: {
                    size: '14px'
                }
            }
        },
        scales: {
            x: {
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            },
            y: {
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            }
        }
    }
};

Line chart 

// Import the sds color object
import { dsColor } from 'https://assets.soracom.io/js/sds/color.js';

// Defaults
Chart.defaults.font.family = 'Source Han Sans JP, Arial, Helvetica, sans-serif';
Chart.defaults.font.weight = '500';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [6, 17, 5, 3, 7, 2],
      borderColor: dsColor.redTint.rgba,
      backgroundColor: dsColor.redTint.rgba
    },
    {
      label: 'Dataset 1',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: dsColor.blueTint.rgba,
      backgroundColor: dsColor.blueTint.rgba
    },
  ]
};

var config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                align: 'start',
                color: dsColor.inkDark.rgb,
                font: {
                    size: '20px'
                }
            },
            subtitle: {
                display: true,
                text: 'Custom Chart Subtitle',
                align: 'start',
                color: dsColor.ink.rgb,
                font: {
                    size: '14px'
                }
            }
        },
        scales: {
            x: {
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            }
        }
    }
};

Filled line chart 

// Import the sds color object
import { dsColor } from 'https://assets.soracom.io/js/sds/color.js';

// Defaults
Chart.defaults.font.family = 'Source Han Sans JP, Arial, Helvetica, sans-serif';
Chart.defaults.font.weight = '500';

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [6, 17, 5, 3, 7, 2],
      borderColor: dsColor.redTint.rgba,
      backgroundColor: dsColor.redBright.rgba,
      fill: true,
    },
    {
      label: 'Dataset 1',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: dsColor.blueTint.rgba,
      backgroundColor: dsColor.blueBright.rgba,
      fill: true,
    },
  ]
};

var config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Custom Chart Title',
                align: 'start',
                color: dsColor.inkDark.rgb,
                font: {
                    size: '20px'
                }
            },
            subtitle: {
                display: true,
                text: 'Custom Chart Subtitle',
                align: 'start',
                color: dsColor.ink.rgb,
                font: {
                    size: '14px'
                }
            }
        },
        scales: {
            x: {
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            },
            y: {
                beginAtZero: true,
                grid: {
                    color: dsColor.inkLightest.rgba
                }
            }
        }
    }
};