Configuration

This chapter will guide you through the set of Chart configuration options. It explores both common dhtmlxChart properties actual for all chart types and the config options individual for particular types.

You need to set necessary properties from those listed below within the configuration object passed to the chart constructor function and thus adjust the chart settings to meet your needs.

Main properties

dhtmlxChart includes several configuration options that are mostly common for all chart types. They are:

  • type - (string) defines the type of a chart to initialize; "bar", "x-bar" (for horizontal Bar chart), "line", "spline", "scatter", "area", "splineArea", "donut", "pie", "pie3D" and "radar"
var chart = new dhx.Chart("chart", {
    type:"bar"
});
var chart = new dhx.Chart("chart", {
    scales:{}
});
var chart = new dhx.Chart("chart", {
    series:[]
});
var chart = new dhx.Chart("chart", {
    legend:{}
});
  • maxPoints - (number) displays an average number of values in case a data set is too large to show all the values in the chart
var chart = new dhx.Chart("chart", {
    type:"line",
    maxPoints:100
});

Related sample:  Chart. Max Points

Scales

There are "left","right","top","bottom" and "radial" (for Radar chart) types of scales. Scales have both common and specific options.

var chart = new dhx.Chart("chart_container",{
    type:"area",
    scales: {
        "bottom" : {
            text: 'month'
        },
        "left" : {
            padding: 10,
            max: 90
        }
    },
    series: [
        {
           value: 'company A',
           strokeWidth: 2
           // more options   
        }
    ]
});



The radial scale is used for Radar chart and has its own properties, due to peculiarities of configuration:

Related sample:  Chart. Axis Configuration

Series

Series present an array of objects each of which contains a number of properties for rendering a separate data set on a chart.

var chart = new dhx.Chart("chart_container",{
    type:"bar",
    scales: {
        "bottom" : {
            text: "month"
        },
        "left" : {}
    },
    series: [
        {
            id: "A",
            value: "company A",
            fill: "#394E79",
            stacked: stacked,
            color: "none"
        },
        {
            id: "B",
            value:"company B",
            fill: "#5E83BA",
            stacked: stacked,
            color: "none"
        }
    ]
});

The list of config options for series (for charts with scales)


Options specific for Area, Bar and Radar charts



Options specific for Bar charts



The list of config options for series (for charts without scales: Pie, Pie3D, Donut)


Legend

The legend object may contain a number of options that define its configuration.

var chart = new dhx.Chart("chart_container",{
    scales: {
        // scales config
    },
    series: [
        // list of series 
    ],
    legend: {
        series: ["A", "B", "C"],
        valign: "top",
        halign: "right"
    }    
});

Related sample:  Chart. Enable Legend

Related sample:  Chart. Legend Position

The list of config options for legend (for charts with scales)

The list of config options for legend (for charts without scales: Pie, Pie3D, Donut)

Back to top