Data Visualization Widgets Chart

A widget used to embed charts into HTML JS applications.

Type: Object

The dxChart widget is used to display different types of data graphically. It visualizes a 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 dxChart widget, like any other ChartJS widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxChart widget within the "chartContainer" container using the jQuery approach.

<script>
  $(function () {
    $("#chartContainer").dxChart({
      //Options 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 widget configuration options. To specify the options, set the required values to the configuration object properties. Refer to the Configuration section to find the options that are required to configure your chart.

There are two options available for visualizing data within 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.

Start Tutorial View Demo Watch Video

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.