Data Visualization Widgets Chart

The widget that is used to embed charts into HTML JS applications.

Type: Object

The dxChart widget is used to display different types of data graphically. It visualizes the series of points using one of the available series types. This widget can draw a single series, as well as several series of different types on one or more panes.

The following code demonstrates how to create the dxChart widget within the "chartContainer" container using the dxChart jQuery plugin:

<script>
  $(function () {
    $("#chartContainer").dxChart({
      //Properties of the configuration object are specified here
    });
  });
</script>

To configure the dxChart widget, pass a configuration object as the constructor's parameter. The properties of this object represent the widget's configuration options. To specify the options, set the required values to the configuration object's properties. Refer to the Configuration section to find the options that are required to configure your chart.

There are two possible ways to provide data to visualize within the dxChart. You can either bind each series separately, or bind the entire chart to data. Note that in both cases, you first need to prepare an object or an array of objects with data. To learn how to provide data for the dxChart widget, refer to the Data Binding section.

The dxChart widget contains multiple visual elements (axes, titles, labels, strips, grid, etc.) that are configured within the widget's configuration object. To learn more about the widget's visual elements, refer to the Chart Elements help section.

To get started with the dxChart widget, refer to the Configure Charts tutorial.

Show Example:
jQuery
<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ]
    });
});

Configuration

An object defining configuration options for the dxChart widget.

Methods

This section describes the methods that can be used in code to manipulate the dxChart object.

Use the dxChart registered method to access the dxChart object, as demonstrated in the code below.

JavaScript
var chart = $("#chartContainer").dxChart("instance");

Series Types

This section lists objects that define options used to configure series of specific types.

Chart Elements

This section lists the methods and fields of chart elements.