Series Types CandleStickSeries

An object defining a series of the candleStick type.

Type: Object

CandleStickSeriesType ChartJS

For details on the candleStick series type, refer to the Candle Stick topic.

argumentField

Specifies the data source field that provides arguments for series points.

Type: String
Default Value: 'date'

When defining series using the series configuration object, set the argumentField property to the corresponding field from the data source for each series individually. If the field that supplies arguments for data points is called in a similar way for several series, there is no need to set the field name for each series individually. Instead, set the field name for the argumentField property of the commonSeriesSettings configuration object at once.

Show Example:
jQuery

In this example, the 'date' data source field is set to match the argument field for the series using the argumentField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994,2,1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994,2,2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994,2,3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994,2,4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994,2,7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994,2,8), l: 25.75, h:  26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994,2,9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994,2,10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994,2,11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994,2,14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994,2,15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994,2,16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994,2,17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994,2,18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994,2,21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994,2,22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994,2,23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994,2,24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994,2,25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994,2,28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994,2,29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994,2,30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994,2,31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

axis

Specifies the name of the value axis that will be used to display the series.

Type: String
Default Value: undefined

This property is required when you implement a dxChart widget with multiple value axes. Set names for the value axes using the name property, and assign these names to the series' axis property.

closeValueField

Specifies the data source field that provides a 'close' value for a candleStick or stock series.

Type: String
Default Value: 'close'
This member is exposed by the following entities:

This property is analogous to the openValueField property. So refer to this property for a description.

Show Example:
jQuery

In this example, the 'c' data source field is set to match the close value field for the series using the closeValueField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

color

Specifies a series color.

Type: String
Default Value: undefined

Color is used to distinguish one chart series from another. However, there can be cases when it is more appropriate to display all chart series in one color. In this case, set the color property of the commonSeriesSettings configuration object. If required, you can override this property's common value in individual series objects.

Show Example:
jQuery

In this example, the series is colored in 'dodgerblue'.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994,2,1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994,2,2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994,2,3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994,2,4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994,2,7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994,2,8), l: 25.75, h:  26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994,2,9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994,2,10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994,2,11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994,2,14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994,2,15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994,2,16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994,2,17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994,2,18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994,2,21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994,2,22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994,2,23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994,2,24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994,2,25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994,2,28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994,2,29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994,2,30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994,2,31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            color: 'dodgerblue'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

highValueField

Specifies the data source field that provides a 'high' value for a candleStick or stock series.

Type: String
Default Value: 'high'
This member is exposed by the following entities:

This property is analogous to the openValueField property. So refer to this property for a description.

Show Example:
jQuery

In this example, the 'h' data source field is set to match the high value field for the series using the highValueField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

hoverMode

Specifies the series elements to highlight when a series is hovered over.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'allSeriesPoints' | 'allArgumentPoints' | 'none'

The following values are available:

  • onlyPoint
    Changes the appearance of the hovered point only.
  • allSeriesPoints
    Changes the appearance of all the point of the hovered series.
  • allArgumentPoints
    Changes the appearance of the hovered point and of other points that are displayed for the argument of the hovered point.
  • none
    The appearance of the hovered series is not changed.

To set custom options for the 'hover' style (which is applied when a series is hovered over), use the hoverStyle configuration object. Define this object for an individual series (see series | hoverStyle), for all series of a particular type (see commonSeriesSettings | area/line/... | hoverStyle), or all series in the chart (see commonSeriesSettings | hoverStyle).

Show Example:
jQuery

Use the drop-down list below to change the hoverMode option. To see the effect, hover over a point on the chart.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    hoverMode:
    <select id="dropdownListSelector">
        <option value="onlyPoint">onlyPoint</option>
        <option value="allSeriesPoints">allSeriesPoints</option>
        <option value="allArgumentPoints">allArgumentPoints</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    {
        date: new Date(2014, 0, 6),
        yahooOpen: 40.05, yahooHigh: 40.32, yahooLow: 39.75, yahooClose: 39.93,
        yandexOpen: 42.89, yandexHigh: 43.19, yandexLow: 42.61, yandexClose: 42.91
    }, {
        date: new Date(2014, 0, 7),
        yahooOpen: 40.08, yahooHigh: 41.20, yahooLow: 40.08, yahooClose: 40.92,
        yandexOpen: 43.17, yandexHigh: 43.94, yandexLow: 42.06, yandexClose: 43.53
    }, {
        date: new Date(2014, 0, 8),
        yahooOpen: 41.29, yahooHigh: 41.72, yahooLow: 41.02, yahooClose: 41.02,
        yandexOpen: 43.77, yandexHigh: 44.24, yandexLow: 42.22, yandexClose: 42.25
    }, {
        date: new Date(2014, 0, 9),
        yahooOpen: 41.33, yahooHigh: 41.35, yahooLow: 40.61, yahooClose: 40.92,
        yandexOpen: 43.43, yandexHigh: 45.42, yandexLow: 43.17, yandexClose: 44.22
    }, {
        date: new Date(2014, 0, 10),
        yahooOpen: 40.95, yahooHigh: 41.35, yahooLow: 40.82, yahooClose: 41.23,
        yandexOpen: 44.05, yandexHigh: 44.44, yandexLow: 43.06, yandexClose: 44.00
    }, {
        date: new Date(2014, 0, 13),
        yahooOpen: 41.16, yahooHigh: 41.22, yahooLow: 39.80, yahooClose: 39.99,
        yandexOpen: 44.17, yandexHigh: 44.91, yandexLow: 42.40, yandexClose: 42.65
    }, {
        date: new Date(2014, 0, 14),
        yahooOpen: 40.21, yahooHigh: 41.14, yahooLow: 40.04, yahooClose: 41.14,
        yandexOpen: 43.07, yandexHigh: 43.96, yandexLow: 42.57, yandexClose: 43.78
    }, {
        date: new Date(2014, 0, 15),
        yahooOpen: 41.06, yahooHigh: 41.31, yahooLow: 40.76, yahooClose: 41.07,
        yandexOpen: 44.20, yandexHigh: 44.25, yandexLow: 42.67, yandexClose: 43.36
    }, {
        date: new Date(2014, 0, 16),
        yahooOpen: 40.43, yahooHigh: 40.75, yahooLow: 40.11, yahooClose: 40.34,
        yandexOpen: 43.05, yandexHigh: 43.95, yandexLow: 43.05, yandexClose: 43.76
    }, {
        date: new Date(2014, 0, 17),
        yahooOpen: 40.12, yahooHigh: 40.44, yahooLow: 39.47, yahooClose: 40.01,
        yandexOpen: 43.78, yandexHigh: 44.24, yandexLow: 42.87, yandexClose: 43.02
    }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'candlestick',
            hoverMode: 'onlyPoint'
        },
        series: [{
            lowValueField: 'yahooLow',
            highValueField: 'yahooHigh',
            openValueField: 'yahooOpen',
            closeValueField: 'yahooClose',
            name: 'Yahoo! Inc.'
        }, {
            lowValueField: 'yandexLow',
            highValueField: 'yandexHigh',
            openValueField: 'yandexOpen',
            closeValueField: 'yandexClose',
            name: 'Yandex N.V.'
        }],
        title: 'Stock Prices',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: { hoverMode: this.value }
        })
    });
});

hoverStyle

An object defining configuration options for a hovered series.

Type: Object

To set a custom 'hover' style for all series at once, use the hoverStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set hover style options to the values specific to this type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a hover style option for an individual series, use the hoverStyle object within the series object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the style of a point changes when this point is hovered over.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            hoverStyle: {
                color: 'dodgerblue',
                width: 4
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

ignoreEmptyPoints

Specifies whether or not a chart ignores null data points.

Type: Boolean
Default Value: false
Accepted Values: true|false

By default, if a data source has data points with a null argument or value, a chart may draw series with unnecessary gaps between points. To prevent this behavior, set the ignoreEmptyPoints option to true.

innerColor

Specifies the color for the body (rectangle) of a candleStick series.

Type: String
Default Value: '#ffffff'
This member is exposed by the following entities:

To set the line color for candleStick series points, use the color property.

Show Example:
jQuery

In this example, the innerColor option is set to 'powderblue'.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994,2,1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994,2,2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994,2,3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994,2,4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994,2,7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994,2,8), l: 25.75, h:  26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994,2,9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994,2,10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994,2,11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994,2,14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994,2,15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994,2,16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994,2,17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994,2,18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994,2,21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994,2,22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994,2,23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994,2,24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994,2,25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994,2,28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994,2,29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994,2,30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994,2,31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            innerColor: 'powderblue'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

label

An object defining the label configuration options.

Type: Object

Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label options for all chart series at once.

Specify the label object's properties within the commonSeriesSettings configuration object to set label options for all chart series at once.

If you have several series of a single type, you can set label options to the values specific to this series type using the corresponding object (area, line, etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

If you need to set a label option for an individual series, use the label object within the series object of the series array. The values that are set individually override the corresponding common values.

Show Example:
jQuery

In this example, point labels are visible.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            label: {
                visible: true
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

lowValueField

Specifies the data source field that provides a 'low' value for a candleStick or stock series.

Type: String
Default Value: 'low'
This member is exposed by the following entities:

This property is analogous to the openValueField property. So refer to this property for a description.

Show Example:
jQuery

In this example, the 'l' data source field is set as the low value field for the series using the lowValueField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

maxLabelCount

Specifies how many points are acceptable to be in a series to display all labels for these points. Otherwise, the labels will not be displayed.

Type: Number
Default Value: undefined

When there are several series in a chart and series with a large number of points, the point labels may overlap each other and make a chart difficult to read. In this instance, it is better to display the point labels depending on their quantity. To specify the maximum amount of the labels to be displayed, set the required number to the maxLabelCount field. If the number of the points on a series exceeded the number assigned to the maxLabelCount field, the point labels for this series will not be displayed.

openValueField

Specifies the data source field that provides an 'open' value for a candleStick or stock series.

Type: String
Default Value: 'open'
This member is exposed by the following entities:

When defining series, you can either use the series object or the commonSeriesSettings object. When using the series object, set the openValueField, highValueField, lowValueField and closeValueField options to the corresponding fields of the data source. The same options can be specified within the commonSeriesSettings object, but only when you use series templates in your chart.

Show Example:
jQuery

In this example, the 'o' data source field is set as the open value field for the series using the openValueField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick'
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

pane

Specifies the pane that will be used to display a series.

Type: String
Default Value: 'default'

reduction

Specifies reduction options for the stock or candleStick series.

Type: Object
This member is exposed by the following entities:

If the value of a particular point's price level (open, high, low or close) is lower in comparison to the value in the previous point, the subsequent point is painted in a specific color. To set the price to be compared in the series, use the series' level property. To set the specific color for a subsequent price, which is lower than that price in the previous point, use the series's color property.

Show Example:
jQuery

In this example, the reduction level is based on the high value. Points, whose high value is lower than the high value of the previous point, are colored in 'indianred'.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            reduction: {
                color: 'indianred',
                level: 'high'
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

selectionMode

Specifies the series elements to highlight when the series is selected.

Type: String
Default Value: 'onlyPoint'
Accepted Values: 'onlyPoint' | 'allSeriesPoints' | 'allArgumentPoints' | 'none'

The dxChart widget comes with an API that allows you to select a series or a particular point in code. Use the selectionMode property to specify which series elements to select when the series is selected:

  • onlyPoint
    Changes the appearance of the hovered point only.
  • allSeriesPoints
    Changes the appearance of all the points of the hovered series.
  • allArgumentPoints
    Changes the appearance of the hovered point and of other points that are displayed for the argument of the hovered point.
  • none
    The appearance of the hovered series is not changed.

To set custom options for the 'selected' style (which is applied when a series is selected), use the selectionStyle configuration object. Define this object for an individual series (see series | selectionStyle), for all series of a particular type (see commonSeriesSettings | area/line/... | selectionStyle), or all series in the chart (see commonSeriesSettings | selectionStyle).

Show Example:
jQuery

Change the value of the series' selectionMode option using the drop-down menu below. Then, click one of the series to see the effect.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    selectionMode:
    <select id="dropdownListSelector">
        <option value="onlyPoint">onlyPoint</option>
        <option value="allSeriesPoints">allSeriesPoints</option>
        <option value="allArgumentPoints">allArgumentPoints</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    {
        date: new Date(2014, 0, 6),
        yahooOpen: 40.05, yahooHigh: 40.32, yahooLow: 39.75, yahooClose: 39.93,
        yandexOpen: 42.89, yandexHigh: 43.19, yandexLow: 42.61, yandexClose: 42.91
    }, {
        date: new Date(2014, 0, 7),
        yahooOpen: 40.08, yahooHigh: 41.20, yahooLow: 40.08, yahooClose: 40.92,
        yandexOpen: 43.17, yandexHigh: 43.94, yandexLow: 42.06, yandexClose: 43.53
    }, {
        date: new Date(2014, 0, 8),
        yahooOpen: 41.29, yahooHigh: 41.72, yahooLow: 41.02, yahooClose: 41.02,
        yandexOpen: 43.77, yandexHigh: 44.24, yandexLow: 42.22, yandexClose: 42.25
    }, {
        date: new Date(2014, 0, 9),
        yahooOpen: 41.33, yahooHigh: 41.35, yahooLow: 40.61, yahooClose: 40.92,
        yandexOpen: 43.43, yandexHigh: 45.42, yandexLow: 43.17, yandexClose: 44.22
    }, {
        date: new Date(2014, 0, 10),
        yahooOpen: 40.95, yahooHigh: 41.35, yahooLow: 40.82, yahooClose: 41.23,
        yandexOpen: 44.05, yandexHigh: 44.44, yandexLow: 43.06, yandexClose: 44.00
    }, {
        date: new Date(2014, 0, 13),
        yahooOpen: 41.16, yahooHigh: 41.22, yahooLow: 39.80, yahooClose: 39.99,
        yandexOpen: 44.17, yandexHigh: 44.91, yandexLow: 42.40, yandexClose: 42.65
    }, {
        date: new Date(2014, 0, 14),
        yahooOpen: 40.21, yahooHigh: 41.14, yahooLow: 40.04, yahooClose: 41.14,
        yandexOpen: 43.07, yandexHigh: 43.96, yandexLow: 42.57, yandexClose: 43.78
    }, {
        date: new Date(2014, 0, 15),
        yahooOpen: 41.06, yahooHigh: 41.31, yahooLow: 40.76, yahooClose: 41.07,
        yandexOpen: 44.20, yandexHigh: 44.25, yandexLow: 42.67, yandexClose: 43.36
    }, {
        date: new Date(2014, 0, 16),
        yahooOpen: 40.43, yahooHigh: 40.75, yahooLow: 40.11, yahooClose: 40.34,
        yandexOpen: 43.05, yandexHigh: 43.95, yandexLow: 43.05, yandexClose: 43.76
    }, {
        date: new Date(2014, 0, 17),
        yahooOpen: 40.12, yahooHigh: 40.44, yahooLow: 39.47, yahooClose: 40.01,
        yandexOpen: 43.78, yandexHigh: 44.24, yandexLow: 42.87, yandexClose: 43.02
    }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'candlestick',
            selectionMode: 'onlyPoint'
        },
        series: [{
            lowValueField: 'yahooLow',
            highValueField: 'yahooHigh',
            openValueField: 'yahooOpen',
            closeValueField: 'yahooClose',
            name: 'Yahoo! Inc.'
        }, {
            lowValueField: 'yandexLow',
            highValueField: 'yandexHigh',
            openValueField: 'yandexOpen',
            closeValueField: 'yandexClose',
            name: 'Yandex N.V.'
        }],
        pointClick: function (clickedPoint) {
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        title: 'Stock Prices',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });

    $("#dropdownListSelector").change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: { selectionMode: this.value }
        })
    });
});

selectionStyle

An object defining configuration options for a selected series.

Type: Object

The dxChart widget comes with API members that allow you to select a series in code. To set a custom 'selected' style for all series at once, use the selectionStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set selection style options to the values specific to this type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a selection style option for an individual series, use the selectionStyle object within the series object of the series array. The values that are set individually override corresponding common values.

Show Example:
jQuery

In this example, the style of a selected series is changed using the selectionStyle option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { date: new Date(1994, 2, 1), l: 24.00, h: 25.00, o: 25.00, c: 24.875 },
    { date: new Date(1994, 2, 2), l: 23.625, h: 25.125, o: 24.00, c: 24.875 },
    { date: new Date(1994, 2, 3), l: 26.25, h: 28.25, o: 26.75, c: 27.00 },
    { date: new Date(1994, 2, 4), l: 26.50, h: 27.875, o: 26.875, c: 27.25 },
    { date: new Date(1994, 2, 7), l: 26.375, h: 27.50, o: 27.375, c: 26.75 },
    { date: new Date(1994, 2, 8), l: 25.75, h: 26.875, o: 26.75, c: 26.00 },
    { date: new Date(1994, 2, 9), l: 25.75, h: 26.75, o: 26.125, c: 26.25 },
    { date: new Date(1994, 2, 10), l: 25.75, h: 26.375, o: 26.375, c: 25.875 },
    { date: new Date(1994, 2, 11), l: 24.875, h: 26.125, o: 26.00, c: 25.375 },
    { date: new Date(1994, 2, 14), l: 25.125, h: 26.00, o: 25.625, c: 25.75 },
    { date: new Date(1994, 2, 15), l: 25.875, h: 26.625, o: 26.125, c: 26.375 },
    { date: new Date(1994, 2, 16), l: 26.25, h: 27.375, o: 26.25, c: 27.25 },
    { date: new Date(1994, 2, 17), l: 26.875, h: 27.25, o: 27.125, c: 26.875 },
    { date: new Date(1994, 2, 18), l: 26.375, h: 27.125, o: 27.00, c: 27.125 },
    { date: new Date(1994, 2, 21), l: 26.75, h: 27.875, o: 26.875, c: 27.75 },
    { date: new Date(1994, 2, 22), l: 26.75, h: 28.375, o: 27.50, c: 27.00 },
    { date: new Date(1994, 2, 23), l: 26.875, h: 28.125, o: 27.00, c: 28.00 },
    { date: new Date(1994, 2, 24), l: 26.25, h: 27.875, o: 27.75, c: 27.625 },
    { date: new Date(1994, 2, 25), l: 27.50, h: 28.75, o: 27.75, c: 28.00 },
    { date: new Date(1994, 2, 28), l: 25.75, h: 28.25, o: 28.00, c: 27.25 },
    { date: new Date(1994, 2, 29), l: 26.375, h: 27.50, o: 27.50, c: 26.875 },
    { date: new Date(1994, 2, 30), l: 25.75, h: 27.50, o: 26.375, c: 26.25 },
    { date: new Date(1994, 2, 31), l: 24.75, h: 27.00, o: 26.50, c: 25.25 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        series: {
            argumentField: 'date',
            lowValueField: 'l',
            highValueField: 'h',
            openValueField: 'o',
            closeValueField: 'c',
            type: 'candlestick',
            selectionStyle: {
                color: 'dodgerblue',
                width: 4
            }
        },
        pointClick: function (clickedPoint) {
            clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

showInLegend

Specifies whether or not to show the series in the chart's legend.

Type: Boolean
Default Value: true
Accepted Values: true|false

Show Example:
jQuery

In this example, the 'Yahoo! Inc.' series is omitted from the legend using the showInLegend option, which is set to false.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    {
        date: new Date(2014, 0, 6),
        yahooOpen: 40.05, yahooHigh: 40.32, yahooLow: 39.75, yahooClose: 39.93,
        yandexOpen: 42.89, yandexHigh: 43.19, yandexLow: 42.61, yandexClose: 42.91
    }, {
        date: new Date(2014, 0, 7),
        yahooOpen: 40.08, yahooHigh: 41.20, yahooLow: 40.08, yahooClose: 40.92,
        yandexOpen: 43.17, yandexHigh: 43.94, yandexLow: 42.06, yandexClose: 43.53
    }, {
        date: new Date(2014, 0, 8),
        yahooOpen: 41.29, yahooHigh: 41.72, yahooLow: 41.02, yahooClose: 41.02,
        yandexOpen: 43.77, yandexHigh: 44.24, yandexLow: 42.22, yandexClose: 42.25
    }, {
        date: new Date(2014, 0, 9),
        yahooOpen: 41.33, yahooHigh: 41.35, yahooLow: 40.61, yahooClose: 40.92,
        yandexOpen: 43.43, yandexHigh: 45.42, yandexLow: 43.17, yandexClose: 44.22
    }, {
        date: new Date(2014, 0, 10),
        yahooOpen: 40.95, yahooHigh: 41.35, yahooLow: 40.82, yahooClose: 41.23,
        yandexOpen: 44.05, yandexHigh: 44.44, yandexLow: 43.06, yandexClose: 44.00
    }, {
        date: new Date(2014, 0, 13),
        yahooOpen: 41.16, yahooHigh: 41.22, yahooLow: 39.80, yahooClose: 39.99,
        yandexOpen: 44.17, yandexHigh: 44.91, yandexLow: 42.40, yandexClose: 42.65
    }, {
        date: new Date(2014, 0, 14),
        yahooOpen: 40.21, yahooHigh: 41.14, yahooLow: 40.04, yahooClose: 41.14,
        yandexOpen: 43.07, yandexHigh: 43.96, yandexLow: 42.57, yandexClose: 43.78
    }, {
        date: new Date(2014, 0, 15),
        yahooOpen: 41.06, yahooHigh: 41.31, yahooLow: 40.76, yahooClose: 41.07,
        yandexOpen: 44.20, yandexHigh: 44.25, yandexLow: 42.67, yandexClose: 43.36
    }, {
        date: new Date(2014, 0, 16),
        yahooOpen: 40.43, yahooHigh: 40.75, yahooLow: 40.11, yahooClose: 40.34,
        yandexOpen: 43.05, yandexHigh: 43.95, yandexLow: 43.05, yandexClose: 43.76
    }, {
        date: new Date(2014, 0, 17),
        yahooOpen: 40.12, yahooHigh: 40.44, yahooLow: 39.47, yahooClose: 40.01,
        yandexOpen: 43.78, yandexHigh: 44.24, yandexLow: 42.87, yandexClose: 43.02
    }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'date',
            type: 'candlestick'
        },
        series: [{
            lowValueField: 'yahooLow',
            highValueField: 'yahooHigh',
            openValueField: 'yahooOpen',
            closeValueField: 'yahooClose',
            name: 'Yahoo! Inc.',
            showInLegend: false
        }, {
            lowValueField: 'yandexLow',
            highValueField: 'yandexHigh',
            openValueField: 'yandexOpen',
            closeValueField: 'yandexClose',
            name: 'Yandex N.V.'
        }],
        seriesClick: function () {
            this.select(!this.isSelected());
        },
        title: 'Stock Prices',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

tagField

Specifies the name of the data source field that provides data about a point.

Type: String
Default Value: 'tag'

When setting a common data source via the dataSource property, you can pass information about a point. For this purpose, add a separate field to the data source in addition to the argument and value fields. To set the specified data to the point instance, set the series' tagField property to the name of the field with the information. In this instance, when clicking a point in the chart, you can access the data associated with this point using the point's instance.

When defining series using the series configuration object, set the tagField property to the corresponding field from the data source for each series individually. If the field that supplies data about points is called similarly in several series, there is no need to set its name for each series individually. Instead, set it for the tagField property of the commonSeriesSettings configuration object.

You can also associate data with a series instance. To learn how to do this, refer to the description of the tag property of the series configuration object.