Chart Elements

Topics in this section describe dxChart widget elements. Each topic gives an overview of an element's purpose, and details ways to enable and tune it to your needs.

The image below is the chart element map that can guide you as you begin learning about Chart capabilities. Hover over the image and you will learn how different Chart elements are called. Click an element to navigate to the topic where you will find more details about it.

ChartJS Chart Elements

Title Axis Title Legend Argument Axis Labels Value Axis Labels Value Axis Argument Axis Tooltip Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Point Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Series Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Point Label Grid Grid Grid Grid Grid Grid Grid Grid Grid Strip Strip Strip Strip Pane

Series

A Series represents a grouping of related data points. The most important characteristic of a series is its type, which determines a particular visual representation of data. You can find more details on each series type in the corresponding topics in the "Chart Series Types" section. Here, you will learn how to set a series type and other series options.

Series

To set a series type, use the type property of the series configuration object.

JavaScript
$("#chartContainer").dxChart({
    series: {
        type: 'line'
    }
});

To set data for a series, there are several approaches. You can set a common data source for all series or specify data for each series individually. For details, refer to the Data Binding section.

There can be several series displayed in the chart. In this instance, series is an array of series objects.

JavaScript
$("#chartContainer").dxChart({
    series: [
        { type: 'line' },
        { type: 'bar' }
    ]
});

To learn how to set common series options for all chart series simultaneously, refer to the Multi-Series Chart topic.

To identify series on the chart's legend, set a name for each series, using the name property.

JavaScript
$("#chartContainer").dxChart({
    series: [
       { name: 'Men'}, {...}
    ]
});

By default, all specified series are displayed on the same pane. However, you can distribute your series as required between several panes. For this purpose, define the panes and specify the pane property for each series.

JavaScript
$("#chartContainer").dxChart({
    panes: [
        { name: 'topPane' },
        { name: 'bottomPane' }
    ],
    series: [
        { type: 'line', pane: 'topPane' },
        { type: 'bar', pane: 'bottomPane' }
    ]
});

To see an example of a multi-pane chart, refer to the Multi-Pane Chart topic.

All the specified series use the same value axis by default. However, you can plot series with different value axes in one pane as well. For this purpose, define the value axes and specify the axis property for each series.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: [
        { name: 'mainAxis' },
        { name: 'secondaryAxis' }
    ],
    series: [
        { type: 'line', axis: 'mainAxis' },
        { type: 'bar', axis: 'secondaryAxis' }
    ]
});

To see an example of a multi-axis chart, refer to the Multi-Axis Chart topic.

In addition to series options, the series configuration object is also used to set options of the series points and labels.

JavaScript
$("#chartContainer").dxChart({
    series: {
        point: {visible: true}
        label: {visible: true}
    }
});

Series Points

A series point is a visual representation of a series' data point. Because the dxChart widget supports numerous series types, which represent and organize data in different ways, visual representation of a data point differs from one type to another.

Series Points

By default, points are drawn in line-like series. In area series, points are not visible, but can be shown if required. There are also series where points are represented in a specific way - a bar, a range area/bar or a body with shadows. These specific presentations of series points are customized via specific series options. You can learn more on them in series types descriptions (see the Series section). The series with a typical point representation expose the point configuration object that can be used for point customization. If you need to apply similar settings to all the series in the chart, use the commonSeriesSettings configuration object's point object. Note that the settings specified individually within series objects override the common settings specified within the commonSeriesSettings object.

JavaScript
$("#chartContainer").dxChart({
    commonSeriesSettings: {
         point: {
             //...
         }
    },
    series: {
        type: 'stackedLine'
        point: {
            //Provide settings specific for this series
        }
    }
});

The following list overviews the point object options.

  • Visibility
    Use the point's visible property to change point visibility.
  • Appearance
    You can change the point's shape, color and size, using the symbol, color and size properties.
  • Border
    Make a border visible by setting the visible property of the point's border object. In addition, you can change border width and color, using the border's width and color properties.
  • Hover Options
    Set a custom color, size and border settings for the "hovered" point state. For this purpose, define the hoverStyle object within the point configuration object.
  • Selection Options
    Set a custom color, size and border settings for the "selected" point state. For this purpose, define the selectionStyle object within the point configuration object.

Series points (no matter how they are represented) can be accompanied with textual labels. Refer to the Series Point Labels topic for details.

Series Point Labels

Each series point can be accompanied by a text label representing data related to the point. These are series point labels. For series of different types, points represent different kinds of data, hence the corresponding series labels can carry a point's value, argument or both. If required, you can also make a label display custom information.

Series Labels

To change label default appearance, use label object properties. This object should be defined within the series for which labels are to be customized. If you need to provide the same options for point labels in all the series in the chart, define the label object within the commonSeriesSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonSeriesSettings: {
         label: {
             //...
         }
    },
    series: {
        type: 'stackedLine'
        label: {
            //Provide settings specific for this series
        }
    }
});

The following list overviews label object options.

  • Visibility
    To make point labels visible, set the label object's visible property to true. If there are too many labels and they are not required to be shown all together, you can set a maximum for the count of labels that can be shown. For this purpose, use the maxLabelCount property of a particular series or of the commonSeriesSettings object.
  • Arrangement
    Labels can be positioned to the right, left or at the center of their points. To set the required place for labels, set the alignment property. In addition, you can shift labels horizontally or vertically, using the horizontalOffset or verticalOffset property. If required, you can rotate labels using the rotationAngle property. For bar- and area-like series, you can place labels inside of bars/areas. For this purpose, set the position property to the inside value.
  • Text Customization and Formatting
    Labels represent point values by default. You can change the way these values are shown. For this purpose, use the format and precision label properties. If required, you can set a custom text to be shown by labels. For this purpose, assign a function returning the text to be shown to the customizeText property of the label object. For details on label formatting, refer to the Data Formatting section.
  • Font Settings
    To specify the required font settings for a label text, use properties of the font object, defining it within the label object.
  • Appearance
    Labels are painted in the color of the series whose points they represent by default. You can set a custom background color for labels. For this purpose, use the backgroundColor property of the label object. In addition, you can make a label border visible and set up its properties, using the border object. To show labels connected to points, even when the points are not visible, use a connector. The connector joins a label with a point or a place where a point should be. To make connectors visible, define the connector object within the label object and set its visible property to true. If required, you can change the connector's color and width using the corresponding properties of the connector object.

Tooltips

A tooltip is a small pop-up rectangle that displays information for a hovered series point. A tooltip indicates the point's value by default. It is, however, possible to display other information. In addition, you can customize the appearance of a tooltip or its text.

Tooltip

To set tooltip options, use the tooltip configuration object of your chart. If tooltips are disabled, enable them by setting the tooltip's enabled property to true.

JavaScript
$("#chartContainer").dxChart({
    tooltip: {
        enabled: true
    }
});

You can change tooltip appearance by setting, for instance, the following options.

  • Color
    The color of the currently hovered series is used to draw a tooltip by default. You can set a custom color for all tooltips in the chart. For this purpose, use the color property of the tooltip configuration object.
  • Size
    Tooltip size is determined based on the text size and text padding values (see below). However, the size of the tooltip's arrow can be changed directly, using the arrowLength property of the tooltip configuration object.
  • Text Positioning
    Align text within tooltips as required, using the paddingLeftRight and paddingTopBottom properties of the tooltip configuration object.
  • Text Customization and Formatting
    Tooltips represent point values by default. You can change the way these values are shown. For this purpose, use format and precision tooltip properties. If required, you can set a custom text to be shown by tooltips. To do this, assign a function returning the text to be shown to the customizeText property of the tooltip object. For details on formatting, refer to the Data Formatting help section.
  • Font Settings
    Use the tooltip object's font property to specify the required font for the tooltip text.
Show Example:
jQuery

Axes

For charting, the rectangular coordinate system is used to determine each point uniquely on a plane through two numbers, the argument and the value of the point. To define the coordinates, two perpendicular directed lines - the axes - are specified: an axis of arguments and an axis of values.

Axes

Depending on the specified data, the axes can be discrete or continuous. For details, refer to the Argument Axis and Value Axis topics.

Axis ticks/grid lines are arranged automatically by default based on chart data source values. However, you can rearrange them as you like. For details, refer to the Set a Category Order and Axis Ticks Arrangement topics.

Axes options can be set using the chart's valueAxis and argumentAxis configuration objects. If you need to set the same values for all axes, use the Chart's commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        //...
    },
    valueAxis: {
        //...
    },
    argumentAxis: {
        //...
    }
});

NOTE: If you set an option using the valueAxis or argumentAxis configuration object, this value will override the common value that is set using the commonAxisSettings object.

If you use several panes to display series or use multiple value axes on one pane, you ought to define several value axes. In this instance, valueAxis should be an array of objects defining value axes. In addition, you can specify different argument axes for each pane. In this instance, argumentAxis should be an array of objects defining argument axis for each pane. The following code demonstrates this.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        //...
    },
    valueAxis: [
        {pane: 'bottomPane', name: 'firstAxis'},
        {pane: 'bottomPane', name: 'secondAxis'},
        {pane: 'topPane'}
    ],
    argumentAxis:  [
        {pane: 'bottomPane'},
        {pane: 'topPane'}
    ]
});

In the code above, the commonAxisSettings object defines common settings of all axes in all panes.

The following list overviews the common axis options.

  • Visibility
    To make axes visible/invisible, use the visible property of the commonAxisSettings object.
  • Position
    It's possible to rearrange the axes positions. To display the argument axis vertically, and the value axis horizontally, use the chart's rotated configuration property.
  • Appearance
    You can change the color, width and opacity for the axes, using the color, width and opacity properties.

Both the value and argument axes can be drawn with or without titles, ticks, grid lines, strips and labels.

Axis Elements

To change the visibility of these elements and set their options, define the title, ticks, grid, strips and label objects within the commonAxisSettings, valueAxis and/or argumentAxis configuration objects. For a detailed description of each element, refer to the corresponding document.

Argument Axis

Since a point is set up by two coordinates - an argument and a value(s) - there should be two axes: one defining arguments and one defining values. This topic describes the axis for arguments, which here is called the argument axis. To learn about the axis of values, refer to the Value Axis topic. To get common information on the dxChart widget's axes, refer to the Axes topic.

There are two types of argument axis.

  • Discrete
    Contains a finite number of values, each of which represent an argument of a particular series point. These values are often called categories and arranged in a certain order.
  • Continuous
    Contains an infinite number of values, some of which represent series point arguments.

If arguments in the series' data source represent strings, a discrete axis is created. The axis' categories are ordered as they are listed in the data source. The following example demonstrates this.

JavaScript
var dataSource = [
    { month: 'January', Glendale: 58, Kirkland: 42 },
    { month: 'April', Glendale: 64, Kirkland: 51 },
    { month: 'September', Glendale: 73, Kirkland: 62 },
];

Discrete Argument Axis

You can set a specific order of categories. For this purpose, use the categories property of the argumentAxis configuration object. For details, refer to the Set a Category Order topic.

If arguments in the series' data source are numeric or date-time values, a continuous axis is created. The axis ticks/grid lines are arranged so that the axis labels do not overlap each other. The following example demonstrates this.

JavaScript
var dataSource = [
    { temperature: 14.2, sales: 215 },
    { temperature: 16.4, sales: 325 },
    { temperature: 11.9, sales: 185 }
];

Continuous Argument Axis

You can change the ticks/grid lines default arrangement on a continuous axis. There are two ways to arrange ticks/grid lines manually. They are described in the Axis Ticks Arrangement topic.

If you require that a discrete axis is created for your numeric or date-time arguments, set the argument axis' type property to 'discrete', as shown below.

JavaScript
$("#chartContainer").dxChart({
    argumentAxis: {
        type: 'discrete'
    }
    //...
});

In certain scenarios, you may need to treat types of arguments specified in the data source as other types. For instance, the data source argument field may come with numeric values representing dates. In this instance, specify the desired type for the arguments using the argument axis' argumentType property.

JavaScript
$("#chartContainer").dxChart({
    argumentAxis: {
        argumentType: 'datetime'
    }
    //...
});

As you can see in the code above, the argumentAxis object is used to set a custom value for an argument axis settings. Note that argumentAxis can be an array if series are displayed on several panes and there is a specific argument axis for each pane.

The following list is an overview of the argument axis options.

  • Visibility
    To make the argument axis visible/invisible, use the visible property of the argumentAxis configuration object.
  • Position
    To set the argument axis at the top, set its position property to 'top'.
  • Appearance
    You can change the axis color, width and opacity, using the color, width and opacity properties.
  • Discrete Axis Ticks Arrangement
    Ticks and grid lines of the discrete axis can be displayed between series points (appropriate for bar series) or across them (appropriate for line series). To choose the mode that is more appropriate for your series type, use the discreteAxisDivisionMode property of the argumentAxis configuration object. In addition, you can set whether to insert an indent from the axes cross (appropriate for bar series) or start categories at the axes cross directly (appropriate for area series). To set an appropriate variant, use the valueMarginsEnabled property.
  • Continuous Axis Ticks Arrangement
    You can set whether to display series with indents from argument axis boundaries or start and end the series at the axis' boundaries. To set an appropriate variant, use the valueMarginsEnabled property. If you insert indents, set values for the minValueMargin and maxValueMargin properties. In addition, you can improve the ticks arrangement by setting them at the beginning of each unit interval (e.g., 09/01, 10/01, ... instead of 09/13, 10/13, ...). For this purpose, use the axis' setTicksAtUnitBeginning property.
  • Invert Axis
    You can invert axis coordinates by setting the inverted property to true.

Use the argumentAxis configuration object to define the following axis child elements: title, ticks, grid lines, strips and labels. Their options are detailed in corresponding topics.

Axis Ticks Arrangement

When you specify a data source for the chart series, argument and value axes are created automatically. Their ticks/grid lines are arranged so that their labels do not overlap each other. You can correct the default arrangements using axis options (see Argument Axis and Value Axis topics). You can also define how to regenerate them completely. This topic details how to do this for the continuous value and argument axes. To learn how to do this for a discrete argument axis, refer to the Set a Category Order topic.

There are two ways to specify a ticks arrangement.

Set Ticks Explicitly

Use this approach if you know for certain the exact range for series point values. In this instance, you can set the minimum value, maximum value and a tick interval for the valueAxis and/or argumentAxis configuration objects. For this purpose, use the min, max and tickInterval properties respectively. The following example demonstrates this approach for a continuous argument axis.

JavaScript
$("#chartContainer").dxChart({
    argumentAxis: {
        min: new Date(1994,2,1),
        max: new Date(1994,2,31),
        tickInterval: {
             days: 2
        }
    }
});

Set Ticks Implicitly

Use this approach when you don't know the exact values of series points. In this instance, you can set a relative value (factor) of how closely axis labels should be placed to each other. To do so, use the axisDivisionFactor property. The following example demonstrates this approach for a value axis.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        axisDivisionFactor: 10
    }
});
Show Example:
jQuery

Set a Category Order

When specifying data for a series in a chart with a discrete axis, the order in which categories will be arranged on the axis is determined by the order in the first defined series. When specifying a common data source for a Chart with a discrete axis, the categories are displayed on the axis in the order they are defined in the data source's argument field. You can set a specific order of the categories. For this purpose, use the axis' categories property.

JavaScript
$("#chartContainer").dxChart({
    argumentAxis: {
        categories: ['January', 'February', 'March']
    }
    //...
});

The example below demonstrates the use of the categories property. Take a note of the following.

  • Categories are ordered differently in the example data source. However, you can see that the specifically set order is used in the resulting chart.
  • The "June" category is not included in the categories array, but there are values specified for this category in each series. However, you can see that the "June" category is added in the resulting chart. This is because the "missed" categories are added to the end of the specified categories array.
Show Example:
jQuery

Value Axis

Since a point is set up by two coordinates - an argument and a value(s) - there should be two axes: one defining arguments and one defining values. This topic describes the axis of values, which is called value axis here. To learn about the axis of arguments, refer to the Argument Axis topic. To get common information on the dxChart widget axes, refer to the Axes topic.

Value Axis

There are two types of value axis.

  • Discrete
    Contains a finite number of values, each of which represent a value of a particular series point. These values are often called categories and arranged in a certain order.
  • Continuous
    Contains an infinite number of values, some of which represent series point values.

If values in the series' data source represent strings, a discrete axis is created. The axis' categories are ordered as they are listed in the data source. You can set a specific order of categories. For this purpose, use the categories property of the valueAxis configuration object. For details, refer to the Set a Category Order topic.

If values in the series' data source are numeric or date-time values, a continuous axis is created. The axis ticks/grid lines are arranged so that the axis labels do not overlap each other. The following example demonstrates this.

JavaScript
var dataSource = [
    { temperature: 14.2, sales: 215 },
    { temperature: 16.4, sales: 325 },
    { temperature: 11.9, sales: 185 }
];

Continuous Value Axis

You can change the ticks/grid lines default arrangement on a continuous value axis. There are two ways to arrange ticks/grid lines manually. They are described in the Axis Ticks Arrangement topic.

If you require that a discrete axis is created for the numeric or date-time values, set the value axis' type property to 'discrete', as shown below.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        type: 'discrete'
    }
    //...
});

They are scenarios when you may need the type of the values specified in the data source to be treated as another type. For instance, the data source' value field may come with numeric values representing dates. In this instance, specify the desired type for the values using the value axis' valueType property.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        valueType: 'datetime'
    }
    //...
});

As you can see in the code above, the valueAxis object is used to set custom values for a value axis settings. Note that valueAxis can be an array if series are displayed on several panes or there are several series on a pane each of which using different value axis. In this instance, use the commonAxisSettings object to set options values that are common for all axes in the chart.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        //...
    },
    valueAxis: [
        {pane: 'bottomPane'},
        {pane: 'topPane'}
    ]
});

In the code above, the commonAxisSettings object defines common settings of all axes in all panes.

The following list overviews the value axis options.

  • Visibility
    To make the value axis visible/invisible, use the visible property of the valueAxis configuration object.
  • Position
    To set the value axis to the right, set its position property to 'right'.
  • Appearance
    You can change the axis color, width and opacity, using the color, width and opacity properties.
  • Discrete Axis Ticks Arrangement
    Ticks and grid lines of the discrete axis can be displayed between series points or cross them. To choose the mode that is more appropriate for your series type, use the discreteAxisDivisionMode property of the valueAxis configuration object. In addition, you can set whether to insert an indent from the axes cross or start categories at the axes cross directly. To set an appropriate variant, use the valueMarginsEnabled property.
  • Continuous Axis Ticks Arrangement
    You can set whether to display a series' minimum and maximum values with indents from the value axis boundaries or display them at the axis' boundaries. To set an appropriate variant, use the valueMarginsEnabled property. If you insert indents, set values for the minValueMargin and maxValueMargin properties. In addition, you can improve the ticks arrangement by setting them at the beginning of each unit interval (e.g., 09/01, 10/01, ... instead of 09/13, 10/13, ...). For this purpose, use the axis' setTicksAtUnitBeginning property.
  • Invert Axis
    You can invert axis coordinates by setting the inverted property to true.

Use the valueAxis configuration object to define the following axis child elements: title, ticks, grid lines, strips and labels. Their options are detailed in corresponding topics.

Axes Titles

Chart axes can be displayed with titles, which you can utilize to provide explanatory text for axis value units.

Axis Titles

To set a title text, use the title property of the chart's valueAxis and argumentAxis configuration objects as demonstrated in the code below.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        title: 'Values'
    }
});

The title object can also be used for the customization of default title options. The following list overviews title options.

  • Title Location
    You can place a title nearer or farther from the axis. For this purpose, use the margin property of the title configuration object.
  • Text Font
  • Use the title object's font property to set custom values for the following font settings: fontFamily, color and size.

If you set a title's options, set the title's text using the text property of the title configuration object.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        title: {
            margin: 10,
            text: 'Values'
        }
    }
});

If you need to set the same options both for the value and argument axes, use the title property of the commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        title: {
            margin: 10
        }
    }
});

Axis Labels

Axis labels represent textual values for axis ticks. Since ticks are not visible in the dxChart widget by default, axis labels are necessary to improve chart comprehension.

Axis Labels

Axis labels are generated automatically. However, you can change their settings to make them appropriate for your task. Label settings are set using the label object of the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        label: {
            //...
        }
    }
    //...
});

The following list overviews label options.

  • Visibility
    To mark point labels visible/invisible, use the label object's visible property.
  • Arrangement
    You can rotate labels or stagger them in two rows. For this purpose, use the rotationAngle, staggered and staggeringPadding properties. If labels overlap each other in certain scenarios (e.g., device rotations, browser resizing or long text after formatting), specify how to resolve this problem using the overlappingBehavior property.
  • Font Settings
    To specify the required font settings for label text, use properties of the font object, defining it within the label object.
  • Text Customization and Formatting
    You can change the way the default text is displayed by labels. For this purpose, use format and precision label properties. If required, you can set a custom text to be shown by labels. For this purpose, implement a function that returns the required text and assign it to the customizeText property of the label object. For details on labels formatting, refer to the Data Formatting topic.
  • Labels Position
    You can shift labels closer to or farther from the axis. For this purpose, use the label object's indentFromAxis property.

Axis Ticks

Ticks divide an axis into equal sections by a step whose value is determined automatically, or by the tickInterval and axisDivisionFactor options of an axis. Ticks improve the comprehension of chart data. However, they are not visible by default in the dxChart widget. Instead, axis labels and grid lines represent axis division.

To mark ticks visible, use the visible property of the tick object within the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    argumentAxis: {
        tick: {
            visible: true
        }
    }
    //...
});

Axis Ticks

In addition, you can change the default ticks color and opacity, using the color and opacity properties of the tick object.

Grid

A grid is a set of the reference lines used to improve the readability of a chart's visual data. The grid lines are drawn from axis ticks through the entire chart. If you use grid lines on your chart, it is not necessary to make ticks visible.

Grid

Grid lines are child elements of the argument and value axes. To change their settings, define the grid object within the argumentAxis, valueAxis or commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        grid: {
            //...
        }
    }
    //...
});

The following list overviews grid options.

  • Visibility
    To make grid visible/invisible, use the grid object's visible property.
  • Appearance
    You can change the grid's default color, width and opacity, using the color, width and opacity properties of the grid object.

Strips

Strips are the highlighted areas in the chart within the defined range of values (minimum and maximum) of an axis to which they belong. In general, strips are used to visually represent a range of values behind a series to trace whether the series points' values fall in or out of that range.

Strip

Strips are child elements of the argument and value axes. To define the strips, use the strips array within the argumentAxis and valueAxis configuration objects. To change common settings for all strips in the chart, define the stripStyle object within the commonAxisSettings configuration object.

JavaScript
$("#chartContainer").dxChart({
    commonAxisSettings: {
        stripStyle: [
            //...
        ]
    }
    //...
});

To set the bounds of a strip, use the strip's startValue and endValue properties. In addition, set the color of the strip using the color property. The following code demonstrates this.

JavaScript
$("#chartContainer").dxChart({
    valueAxis: {
        strips: [
            {startValue: 40, endValue:50, color: 'blue'},
            {startValue: 70, endValue:80, color: 'red'}
        ]
    }
    //...
});

To identify a strip and provide details of its purpose, display a label on it. To set the text and other options for a label, define the label object within the strips | strip (stripStyle within commonAxisSettings) object. The following list overviews the strip label options.

  • Text
    Set the text to be shown by a label, using the text property.
  • Location
    Set a place for a label, using the strip's paddingLeftRight and paddingTopBottom properties and the label's horizontalAlignment and verticalAlignment properties.
  • Font Settings
    To specify the required font settings for a label text, use the properties of the font object, defining it within the label object.

Panes

With the dxChart widget, you have the capability to display series in separate panes. Panes are visual areas within a chart, inside which all the elements required to display data are displayed. Visually, each pane looks like a separate Chart, with axes, axis labels and titles. However, panes have a common legend and Chart title. A typical scenario where multiple panes are useful is one where the plotting of a chart's series separately within the same chart is required. In this instance, these series are easily compared and provide an entire picture of the data.

Series

To define chart panes, use the panes configuration object.

JavaScript
$("#chartContainer").dxChart({
    panes: [
        {name: 'topPane'},
        {name: 'bottonPane'}
    ]
});

As you can see in the code above, you should set a name for each pane. You will then use this name as a pane identifier. In addition to the names, you can also set the following pane options.

  • Pane Border
    You can make a border visible for a pane and set border options as required. For this purpose, define the border object within the pane objects.
  • Background Color
    To highlight panes, set a background color for them using the backgroundColor property.

If you need to specify similar options for all the panes in the chart, use the commonPaneSettings configuration object, as demonstrated below.

JavaScript
$("#chartContainer").dxChart({
    commonPaneSettings: {
        border: {
            visible: true
        }
    }
});

Since panes use different value axes and, in some cases, different argument axes, indicate in which pane a particular axis is used. For this purpose, use the axis' pane property.

JavaScript
$("#chartContainer").dxChart({
     valueAxis: [{
             pane: 'bottomPane',
             //...
         }, {
             pane: 'topPane',
               //...
        }
    ]
});

When defining a series, specify in which pane it should be displayed. For this purpose, use the series' pane property. If there are several series using the same pane, you can declare this pane as a default pane, rather than specify it for the series. To do this, use the chart's defaultPane configuration property. The following code demonstrates this scenario.

JavaScript
$("#chartContainer").dxChart({
    defaultPane: 'topPane',
    series: [
        {...},
        {...},
        {pane: 'bottomPane'}
    ]
});

Legend

The dxChart widget can include a legend - an explanatory component that helps you distinguish and identify a series. Each series is presented by an item on a Legend. An item marker identifies a series color. An item label displays a series title.

Legend

To change legend default appearance, use properties of the legend configuration object. The following code demonstrates how to access it.

JavaScript
$("#chartContainer").dxChart({
    legend: {
        //...
    }
});

The following list overviews the legend object options.

  • Visibility
    To change legend visibility, use the legend's visible property.
  • Location
    You can place a legend inside or outside the plot. To set the required place, use the legend's position property. To specify a legend location, use its verticalAlignment and horizontalAlignment properties. In addition, you can change the spacing between the legend and the neighboring chart elements. To do this, set the margin property.
  • Border
    Make a legend border visible by setting the visible property of the legend' border object. In addition, you can change border width, corner radius and color, using the border's width, cornerRadius and color properties.
  • Items Layout
    Items can be placed in a row or a column; there can also be several rows and columns. To set the number of rows and columns to be used, use the legend's rowCount and columnCount properties. These rows and columns must be placed within a legend separated by a space from one another and from the legend's border. To specify these spacing parameters, use the legend's rowItemSpacing, columnItemSpacing, paddingLeftRight and paddingTopBottom properties.
  • Items Appearance
    You can enlarge or shrink item markers. To do this, use the markerSize property. In addition, you can specify the required font for item labels. For this purpose, use the legend's font property, which represents an object that allows you to set font options such as color, opacity, family and size.
  • Hover Mode
    You can specify whether to highlight the corresponding series when a legend item is hovered over. To do this, use the legend's hoverMode property.

Chart Title

The dxChart widget can be displayed with a title. You can use the chart's title to provide either explanatory text for the displayed data or any additional textual information.

ChartTitle

To set a title text, use the chart's title configuration object as demonstrated in the code below.

JavaScript
$("#chartContainer").dxChart({
    title: 'Stock Prices'
});

The title object can also be used for the customization of default title options. The following list overviews title options.

  • Title Location
    You can place a title on any side of the chart. For this purpose, use the horizontalAlignment and verticalAlignment properties of the Chart's title configuration object.
  • Text Font
  • Use the title object's font property to set custom values for the following font settings: fontFamily, color and size.

If you set title options, set the title's text using the text property of the title configuration object.

JavaScript
$("#chartContainer").dxChart({
    title: {
        horizontalAlignment: 'center',
        verticalAlignment: 'bottom',
        text: 'Stock Prices'
    }
});