Initialization

info

Download the DHTMLX Chart package:

• as a separate component
• as part of the DHTMLX Suite library

Follow these steps to initialize DHTMLX Chart in an application:

• Include source files
• Create a container
• Initialize Chart with the object constructor
• Load data into Chart

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX Chart</title>         
        <script type="text/javascript" src="../../codebase/chart.js"></script>
        <link rel="stylesheet" href="../../codebase/chart.css">
    </head>
    <body>
        <div id="chart_container"></div>
        <script>
            // creating Chart 
            const chart = new dhx.Chart("chart_container", {
                type: "bar",
                scales: {
                    "bottom" : {
                        text: "month"
                    },
                    "left" : {
                        maxTicks: 10,
                        max: 100,
                        min: 0
                    }
                },
                series: [
                    {
                        id: "A",
                        value: "company C",
                        color: "#5E83BA",                        
                        fill: "#5E83BA"                        
                    }
                ]
            });
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and add full paths to the library JS and CSS files in its header.

If you use DHTMLX Chart standalone, include these JS/CSS files:

• chart.js
• chart.css

index.html

<script type="text/javascript" src="../../codebase/chart.js"></script>
<link rel="stylesheet" href="../../codebase/chart.css">

If you use DHTMLX Chart as part of the Suite package, include these JS/CSS files:

• suite.js
• suite.css

index.html

<link type="text/css" href="../codebase/suite.css">
<script src="../codebase/suite.js" type="text/javascript"></script>

Create a container

Add a container for Chart and give it an id, for example chart_container:

index.html

<div id="chart_container"></div>

Initialize Chart

Initialize Chart with the dhx.Chart object constructor. The constructor takes two parameters:

• A container for Chart. You defined it in the previous step.
• An object with configuration properties. See the full list of properties.

index.js

const config = {
    type: "bar",
    scales: {
        "bottom" : {
            text: "month"
        },
        "left" : {
            maxTicks: 10,
            max: 100,
            min: 0
        }
    },
    series: [
        {
            id: "A",
            value: "company C",
            color: "#5E83BA",                        
            fill: "#5E83BA"                        
        }
    ]
};

const chart = new dhx.Chart("chart_container", config);

Configuration properties

See the full list of Chart configuration properties in the Chart API overview article.

Load data into Chart

The Data loading article explains how to load data into DHTMLX Chart.

Example