Getting started

Let's discover SingleDivUI's Chart component in less than 5 minutes.

Installation

Using npm

You can install the singledivui package from npm through the below command.

npm install singledivui --save

Once installed then integrate the Chart component by importing both the JavaScript class and CSS styles:

import { Chart } from 'singledivui';
import 'singledivui/dist/singledivui.min.css';

Using CDN

Alternatively you can use the CDN to add the JavaScript and CSS files:

<link href="https://unpkg.com/singledivui/dist/singledivui.min.css" rel="stylesheet" />
<script src="https://unpkg.com/singledivui/dist/singledivui.min.js"></script>

Once installed through CDN then it will create a global object in the name of SingleDivUI, which holds the component classes.

Get the Chart component class from the global object.

const { Chart } = SingleDivUI;

Usage

Once done the installation through NPM or CDN, then you can render the component.

First include a single div element in the html page.

<div id="chart"></div>

And then instantiate the Chart class from your script. Here let's create a simple Line chart.

const chartObj = new Chart('#chart',  {
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        series: {
            points: [15, 9, 25, 18, 31, 25]
        }
    },
    width: '480px'
});

Note

When instantiate the Chart class, if the chart was not created already then it will initialize the new Chart. Or if the chart was already created then those props will be updated with that Chart (see).

Output

That's it, the above code will create the below beautiful Chart. And of course, this was rendered with a single div only.

Loading

Are you curious to edit this, then just try the QuickStart samples.

Dynamic props update

Once the Chart was created then you might need to update the chart properties dynamically, so that can be done by below ways:

Let's define the new props that we wants to update:

const newProps = {
    type: 'bar',
    graphSettings: {
        yAxis: {
            startFromZero: true,
            gridLineSize: 0
        }
    }
}

Now the chart can be updated by,

Method 1

While you instantiate the Chart class at that time it will return the corresponding chart instance. By using that instance we can update the props through update method.

const chartObj = new Chart('#chart', options);

// call the update method
chartObj.update(newProps);

Suppose if you didn't store the chart instance then still you can get the instance by simply instantiate the class again with corresponding selector alone.

const chartObj = new Chart('#chart');

Method 2

This is similar to the Chart creation, if you simply instantiate the Chart class again with new props then also the props will be updated.

new Chart('#chart', newProps);

Updated Output

After dynamically updated the new props, the Chart will be like:

Loading