API Reference

Here you can explore the all available APIs from the Chart component, which are highly useful to customize the Chart based on any use cases.

Also the Chart can be customized through the CSS as well, which are explained at the last topic.

First let's start from the base structure of the Chart component:

const options = {
    type: 'line',
    height: 260,
    width: '100%',
    responsive: true,

    data: {},
    graphSettings: {}
};

new Chart('selector',  options);

As you see, the Chart constructor took two arguments, the selector and options.

Selector

The selector can be any DOM selector such as id, class name.

Suggestion

It is suggested to use ID as the selector, since the styles are applied to the chart component based on the selector only. So using any unique selector can avoids the style overwrite issues.

Example:

new Chart('#mychart',  options);

Options

type

The type property defines the Chart type that we want to render.

Currently the below chart types are supported:

• line
• bar
• area

still more chart types are coming on the way!

height

Defines the height of the Chart component.

width

Defines the width of the Chart component.

The width property accepts the % value as well, when you set the width as percentage then it is suggested to use the responsive property, so that the Chart will be responsive based on the window resize.

Example: width: '100%'

responsive

Enables the Chart responsiveness based on the window resize.

data

First let's see the base structure of the data property:

data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: {
        points: [15, 10, 20, 30, 5, 13]
    }
}

labels

The labels are the index of the X axis. It should be provided as the array, and the same number of points only rendered.

series

The series object having the points to render the series such as line, bar or area. Also the series object having the below set of properties to customize the different chart series types.

series: {
    points: [15, 10, 20, 30, 5, 13],

    // ------ for line-chart related customizations ------
    lineColor: null,
    lineSize: null,
    pointRadius: null,
    pointColor: null,
    pointBorderWidth: null,
    pointBorderColor: null,
    pointStyle: null,
    pointInnerColor: null,
    dotRadius: null,

    // ------ for bar-chart related customizations ------
    barSize: null,
    barColor: null,

    // ------ for area-chart related customizations ------
    areaColor: null
}

I hope all the properties can be self-explanatory from their name, here I have explained few props which can be used for multi-purpose.

pointStyle

The pointStyle property defines the line-chart's point style. The possible values are:

• solid (default value)
• circle
• circle-dot

barSize

The barSize property defines the bar chart's each bar width. The property allows the percentage value as well, and the value is depends on the column size.

For example, if the barSize is 50% and the column size is 200px then each bar size will be 100px.

barColor

The barColor property defines the bar chart's each bar color.

This property accepts the array value with list of colors, so in that case each color will be assigned to each bar.

Example:

barColor: ['#607D8B', '#ed5f7d', '#ffc107', '#19c3b3', '#9bc26e']

Also the barColor property supports the gradient style as well, for that the syntax should be like:

barColor: '#9560ff, #d0b8ff'

graphSettings

The graphSettings property is used to customize the graph's behaviour and appearance. As like above let's see the base structure of the graphSettings property:

graphSettings: {
    labelFontSize: '11px',
    labelFontFamily: 'Verdana, Arial, sans-serif',
    gridLineColor: null,
    gridLineSize: null,
    axisLineColor: null,
    axisLineSize: null,
    labelColor: null,
    labelDistance: null,

    xAxis: {
        verticalLabel: false,
        padding: [0, 0],
        labelFormatter: null
    },
    yAxis: {
        maxTicks: 10,
        startFromZero: false,
        labelFormatter: null,

        customScale: {
            min: null,
            max: null,
            interval: null
        }
    }
}

Here all the graphSettings can be used inside the xAxis and yAxis as well to customize the styles particularly to X or Y axis.

Customization through CSS

From the above APIs, most of the behaviour can be customized through CSS also. Here are the list of CSS variables that can be used:

series customization

/* Line chart */
--line-color: #7d3bf2;
--line-size: 2px;
--point-color: #7d3bf2;
--point-border-width: 2px;
--point-border-color: white;
--point-inner-color: white;

/* Bar chart */
--bar-color: #7d3bf2;

/* Area chart */
--area-color: #7d3bf23b;

graph customization

/* Graph */
--grid-line-color: #eee;
--grid-line-size: 2px;
--axis-line-color: #aaa;
--axis-line-size: 2px;
--label-color: #555;
--label-distance: 10px;

All the above graph customization can be set particularly for X or Y axis as well, for that just add the corresponding prefix as --x- or --y-.

For example, to set different grid line color for X and Y axis use the below syntax:

--x-grid-line-color: #ccc;

--y-grid-line-color: #bbb;