Skip to main content

Initialization

info

Download the DHTMLX Chart package:

To initialize DHTMLX Chart in an application, you need to take the following steps:

<!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 a folder of your project.

After that, create an HTML file and place full paths to JS and CSS files of the library into the header of the created file.

If you use DHTMLX Chart standalone, you need to include JS/CSS files of DHTMLX Chart:

  • 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 a part of the Suite package, you need to include JS/CSS files of the DHTMLX Suite library:

  • 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, "chart_container", for example:

index.html
<div id="chart_container"></div>

Initialize Chart​

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

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​

Detailed information on how to load data into DHTMLX Chart is given in the Data loading article.

Example​