StockSeries 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: 'stock',
            hoverStyle: {
                color: 'dodgerblue',
                width: 4
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

color

Sets a color for a series when it is hovered over.

Type: String
Default Value: undefined

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, a point changes its color to 'limegreen' when it 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: 'stock',
            hoverStyle: {
                color: 'limegreen'
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});

width

Specifies the width of a line in a hovered series.

Type: Number
Default Value: 3

Show Example:
jQuery

In this example, the width 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: 'stock',
            hoverStyle: {
                width: 5
            }
        },
        title: 'Stock Prices',
        legend: { visible: false },
        tooltip: { enabled: true },
        argumentAxis: {
            label: { format: 'dd/MM' }
        }
    });
});