ericsson-edsw-chart v4.0.0

Ericsson EDSW Chart

ericsson-edsw-chart

ericsson-edsw-chart is a utility library to help create Ericsson styled charts using Chart.js.

Quickstart

Install this library with peer dependencies:

npm install ericsson-edsw-chart chart.js ericsson-edsw
# or
yarn add ericsson-edsw-chart chart.js ericsson-edsw

Import styles:

// You can import all components from ericsson-edsw
@import "ericsson-edsw/eds-components.scss"

@import "ericsson-edsw-chart/style"

// Or just the necessary components required by this library
@import "ericsson-edsw/tooltip/tooltip"
@import "ericsson-edsw/pill/pill"

@import "ericsson-edsw-chart/style"

Add the canvas and the mandatory eds-chart wrapper to your html:

<div class="eds-chart">
    <canvas id="chart"></canvas>
</div>

Import the necessary references in your code:

import {Chart} from "chart.js/auto"
import {EdsChart} from "ericsson-edsw-chart"

// Optional helper to include predefined colors
import {EdsChartColors} from "ericsson-edsw-chart"

Create standard Chart.js labels and dataset:

const labels = [2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015]
const datasets = [
    {
        label: 'Dataset 1',
        data: [-20, -10, 10, 2, 15, 24, 18, 35],
        borderColor: [EdsChartColors.c_graph_green_2_brand],
    },
    {
        label: 'Dataset 2',
        data: [-15, -12, -2, -10, 14, 11, 14, 2],
        borderColor: [EdsChartColors.c_graph_blue_3_brand],
    },
]

Create the chart:

const chartCanvas = document.getElementById('chart')
const config = EdsChart.createLineChartConfig(
    datasets,
    labels)

new Chart(
    chartCanvas,
    config
)

Documentation

This library includes helper functions to create predefined standard Chart.js configuration. All standard Chart.js configuration can be used together with this library.

EdsChart

This class will help you generate the configuration. Each supported chart type have it's own helper function.

All functions have the two optional parameters: EdsBaseChartSettings - Settings that make it easier to control the configuration output with some predefined options. EdsChartOptions - Object that can include any standard Chart.js options. Included options will always override any options set by EdsChart.

/**
 * Includes helper functions that generates predefined Chart.js configuration for each supported chart type.
 */
class EdsChart {
    static createLineChartConfig(datasets: ChartDataset[], labels: string[] | number[], settings?: EdsLineChartSettings, options?: EdsChartOptions)

    static createLineAreaChartConfig(datasets: ChartDataset[], labels: string[] | number[], settings?: EdsLineChartSettings, options?: EdsChartOptions)

    static createBarChartConfig(datasets: ChartDataset[], labels: string[] | number[], settings?: EdsBarChartSettings, options?: EdsChartOptions)

    static createScatterChartConfig(datasets: ChartDataset[], settings?: EdsScatterChartSettings, options?: EdsChartOptions)

    static createQuadrantScatterChartConfig(datasets: ChartDataset[], settings?: EdsQuadrantChartSettings, options?: EdsChartOptions)

    static createBubbleChartConfig(datasets: ChartDataset[], settings?: EdsBubbleChartSettings, options?: EdsChartOptions)

    static createDoughnutChartConfig(datasets: ChartDataset[], labels: string[] | number[], settings?: EdsDoughnutChartSettings, options?: EdsChartOptions)
}

EdsBaseChartSettings

/**
 *  Shared base settings that can be used to customize the configuration output.
 */
type EdsBaseChartSettings = {
    /**
     * Only show min and max values on axis.
     * Custom origin value on axis will also be displayed.
     */
    onlyMinMaxLabels?: boolean;
    /**
     * Show duplicate of X axis at top of graph. Can be used to improve mobile experience.
     */
    duplicateXAxisTop?: boolean;

    x?: EdsAxisSettings;
    y?: EdsAxisSettings;

    /**
     * Inverse color schema
     */
    inverse?: boolean;

    /**
     * Set to use default Chart.js tooltip
     */
    disableCustomTooltip?: boolean;

    /**
     * Set to hide legends
     */
    hideLegends?: boolean;

    /**
     * Array of custom EDS plugins to disable
     */
    disablePlugins?: EdsPluginOptionKeys[];
}

EdsAxisSettings

Settings that make it easier to control axis options.

type EdsAxisSettings = {
    /**
     * Minimum number for the scale, overrides minimum value from data
     */
    min?: number,

    /**
     * Maximum number for the scale, overrides maximum value from data
     */
    max?: number,

    /**
     * The value of origin on axis.
     * Will always default to min value on axis
     */
    origin?: number,

    /**
     * Show ticks on axis
     */
    showTicks?: boolean,

    /**
     * Show border on axis
     */
    showBorder?: boolean,

    /**
     * Title to show on axis
     */
    title?: string,
}