Skip to main content

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.


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


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.


new Chart('#mychart',  options);



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!


Defines the height of the Chart component.


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%'


Enables the Chart responsiveness based on the window resize.


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]


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


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.


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

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


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.


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.


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'


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;