CandleStickSeries reduction

Specifies reduction options for the stock or candleStick series.

Type: Object

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' }
        }
    });
});

color

Specifies a color for the points whose reduction level price is lower in comparison to the value in the previous point.

Type: String
Default Value: '#000000'

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

Show Example:
jQuery

In this example, points, whose close value is lower than the close value of the previous point, are colored in 'darkturquoise'.

<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: 'darkturquoise'
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

level

Specifies for which price level (open, high, low or close) to enable reduction options in the series.

Type: String
Default Value: 'close'
Accepted Values: 'close' | 'open' | 'low' | 'high'

If the value of the specified price level is lower in comparison to the value in the previous point, the subsequent point is painted in a specific color. To set the specific color for the subsequent price, which is lower than that price in the previous point, use the color property.

Show Example:
jQuery

Use the drop-down menu below to change the reduction level.

<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">
    Reduction Level:
    <select id="dropdownListSelector">
        <option value="close">close</option>
        <option value="open">open</option>
        <option value="high">high</option>
        <option value="low">low</option>
    </select>
</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: {
                level: 'close'
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });

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