Series Types LineSeries

An object defining a series of the line type.

Type: Object

LineSeriesType ChartJS

For details on the line series type, refer to the Line topic.

View Demo

argumentField

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

Type: String
Default Value: 'arg'
Cannot be used in themes.

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 year field of the data source is set as the argument field for all series using the argumentField option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        palette: 'Ocean',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

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 their name property and assign these names to the series' axis property.

View Demo

Show Example:
jQuery

In this example, different value axes are used to display series of different types. All the line series use the nonFormattedAxis value axis, while the area series uses the formattedAxis value axis.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: '1850', africa: 111000000, asia: 809000000, europe: 276000000, latinamerica: 38000000, northamerica: 26000000, oceania: 2000000, total: 1262000000 },
    { year: '1900', africa: 133000000, asia: 947000000, europe: 408000000, latinamerica: 74000000, northamerica: 82000000, oceania: 6000000, total: 1650000000 },
    { year: '1950', africa: 229895000, asia: 1403388000, europe: 547287000, latinamerica: 167368000, northamerica: 171614000, oceania: 12675000, total: 2532227000 },
    { year: '2000', africa: 811101000, asia: 3719044000, europe: 726777000, latinamerica: 521419000, northamerica: 313289000, oceania: 31130000, total: 6122770000 },
    { year: '2050', africa: 2191599000, asia: 5142220000, europe: 719257000, latinamerica: 750956000, northamerica: 446862000, oceania: 55223000, total: 9306128000 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            axis: 'nonFormattedAxis'
        },
        argumentAxis: { valueMarginsEnabled: false },
        series: [
            { valueField: 'africa', name: 'Africa' },
            { valueField: 'asia', name: 'Asia' },
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'latinamerica', name: 'Latin Am. &amp; Caribbean' },
            { valueField: 'northamerica', name: 'Northern America' },
            { valueField: 'oceania', name: 'Oceania' },
            {
                valueField: 'total',
                name: 'Total',
                axis: 'formattedAxis',
                type: 'area'
            }
        ],
        valueAxis: [
            { name: 'nonFormattedAxis' },
            {
                name: 'formattedAxis',
                position: 'right',
                label: { format: 'largeNumber' }
            }
        ],
        palette: 'Vintage',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        }
    });
});

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 are drawn in various colors.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { company: 'ExxonMobil', 2004: 277.02, 2005: 362.53, 2006: 398.91 },
    { company: 'General Electric', 2004: 328.54, 2005: 348.45, 2006: 364.41 },
    { company: 'Microsoft', 2004: 297.02, 2005: 279.02, 2006: 272.68 },
    { company: 'Citigroup', 2004: 255.3, 2005: 230.93, 2006: 246.72 },
    { company: 'Royal Dutch Shell plc', 2004: 173.54, 2005: 203.52, 2006: 216.37 },
    { company: 'Procter &amp; Gamble', 2004: 131.89, 2005: 197.12, 2006: 200.32 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'company'
        },
        commonAxisSettings: {
            label: {
                overlappingBehavior: {
                    mode: 'rotate',
                    rotationAngle: 45
                }
            }
        },
        series: [
            { valueField: '2004', name: '2004', color: 'forestgreen' },
            { valueField: '2005', name: '2005', color: 'midnightblue' },
            { valueField: '2006', name: '2006', color: 'pink' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        title: 'Corporations with Highest Market Value'
    });
});

dashStyle

Specifies the dash style of the series' line.

Type: String
Default Value: 'solid'
Accepted Values: 'solid'|'longDash'|'dash'|'dot'

Show Example:
jQuery

In this example, chart series are displayed in the 'longDashdot' dash style.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            dashStyle: 'longDashdot'
        },
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

hoverMode

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

Type: String
Default Value: 'nearestPoint'
Accepted Values: 'nearestPoint'|'includePoints' | 'excludePoints' | 'none'

The following values are available:

  • nearestPoint
    Changes the appearance of the hovered series together with the series point that is nearest to the current cursor location.
  • includePoints
    Changes the appearance of the hovered series together with all series points.
  • excludePoints
    Changes the appearance of the hovered series. The appearance of the series points is not changed.
  • 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). In addition, you can set a custom hover style for the points of a series in a line, scatter or area chart. To do this, use the hoverStyle configuration object. Define this object for an individual series (series | point | hoverStyle), for all series of a particular type (commonSeriesSettings | area/line/... | point | hoverStyle), or all series in the Chart (see commonSeriesSettings | point | hoverStyle).

Show Example:
jQuery

Use the drop-down list below to change the hoverMode option. To see the effect, hover over a series 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="includePoints">includePoints</option>
        <option value="excludePoints">excludePoints</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            hoverMode: 'includePoints'
        },
        animation: { enabled: false },
        palette: 'Bright',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });

    $("#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 hovered series is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            hoverStyle: {
                color: 'mediumvioletred',
                dashStyle: 'longDashdot',
                width: 4
            }
        },
        palette: 'Violet',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

ignoreEmptyPoints

Specifies whether a chart ignores null data points or not.

Type: Boolean
Default Value: 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 from occurring, set the ignoreEmptyPoints option to true.

Show Example:
jQuery

In this example, several series points have a null argument or value. Toggle the check box below to change the value of the ignoreEmptyPoints option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:20px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="ignoreEmptyPointsCheckbox" checked> Ignore Empty Points
</div>
var dataSource = [
    { x: 1, y1: null, y2: 332, y3: 227 },
    { x: 2, y1: 605, y2: 417, y3: null },
    { x: 3, y1: 656, y2: 513, y3: 361 },
    { x: 4, y1: null, y2: 614, y3: 471 },
    { x: 5, y1: 721, y2: null, y3: 623 },
    { x: 6, y1: 730, y2: null, y3: 797 },
    { x: 7, y1: 728, y2: 935, y3: null },
    { x: 8, y1: 721, y2: 1027, y3: 1189 },
    { x: 9, y1: 704, y2: null, y3: null }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'x',
            ignoreEmptyPoints: true
        },
        animation: { enabled: false },
        palette: 'Bright',
        series: [
            { valueField: 'y1', name: 'Y1' },
            { valueField: 'y2', name: 'Y2' },
            { valueField: 'y3', name: 'Y3' }
        ],
        tooltip: { enabled: true },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });

    $('#ignoreEmptyPointsCheckbox').change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: {
                ignoreEmptyPoints: this.checked
            }
        });
    });
});

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

Here, the point labels and their connectors are displayed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            label: {
                visible: true,
                connector: { visible: true }
            }
        },
        palette: 'Harmony Light',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

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.

Show Example:
jQuery

In this example, labels are displayed only for those series that have the number of points less than the number specified by radio buttons.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:50px;max-width:500px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    maxLabelCount: 
    <input type="radio" name="maxLabelCount" value="4" /> 4 
    <input type="radio" name="maxLabelCount" value="5" /> 5 
    <input type="radio" name="maxLabelCount" value="6" /> 6
    <input type="radio" name="maxLabelCount" value="7" checked /> 7
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417 },
    { year: 1970, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            label: {
                visible: true,
                connector: { visible: true }
            },
            maxLabelCount: 7
        },
        animation: { enabled: false },
        palette: 'Soft Pastel',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });

    $("input[name='maxLabelCount']").change(function () {
        var chart = $('#chartContainer').dxChart('instance');
        chart.option({
            commonSeriesSettings: { maxLabelCount: +$(this).val() }
        })
    });
});

pane

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

Type: String
Default Value: 'default'
Show Example:
jQuery

In this example, two panes are used to represent data. The name of the pane for each series is specified using the pane option. Click a series to display the name of the series' pane.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:40px;max-width:700px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <span id="selectionSpan" />
</div>
var dataSource = [
    { month: 'January', avgT: 9.8, minT: 4.1, maxT: 15.5, prec: 109 },
    { month: 'February', avgT: 11.8, minT: 5.8, maxT: 17.8, prec: 104 },
    { month: 'March', avgT: 13.4, minT: 7.2, maxT: 19.6, prec: 92 },
    { month: 'April', avgT: 15.4, minT: 8.1, maxT: 22.8, prec: 30 },
    { month: 'May', avgT: 18, minT: 10.3, maxT: 25.7, prec: 10 },
    { month: 'June', avgT: 20.6, minT: 12.2, maxT: 29, prec: 2 },
    { month: 'July', avgT: 22.2, minT: 13.2, maxT: 31.3, prec: 2 },
    { month: 'August', avgT: 22.2, minT: 13.2, maxT: 31.1, prec: 1 },
    { month: 'September', avgT: 21.2, minT: 12.4, maxT: 29.9, prec: 8 },
    { month: 'October', avgT: 17.9, minT: 9.7, maxT: 26.1, prec: 24 },
    { month: 'November', avgT: 12.9, minT: 6.2, maxT: 19.6, prec: 64 },
    { month: 'December', avgT: 9.6, minT: 3.4, maxT: 15.7, prec: 76 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'month'
        },
        panes: [
            { name: 'topPane' },
            { name: 'bottomPane' }
        ],
        series: [{
            pane: 'topPane',
            type: 'rangeArea',
            rangeValue1Field: 'minT',
            rangeValue2Field: 'maxT',
            name: 'Monthly Temperature Ranges, °C'
        }, {
            pane: 'topPane',
            valueField: 'avgT',
            name: 'Average Temperature, °C'
        }, {
            type: 'bar',
            valueField: 'prec',
            name: 'prec, mm'
        }
        ],
        valueAxis: [
            { pane: 'bottomPane', grid: { visible: true } },
            { pane: 'topPane', grid: { visible: true } }
        ],
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        },
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            $('#selectionSpan').html('The name of the clicked series&#39; pane: &#39;' + clickedSeries.pane + '&#39;');
        }
    });
});

point

An object defining configuration options for points in line-, scatter- and area-like series.

Type: Object

To specify point options for all line-, scatter- and area-like series at once, use the properties of the point object defined within the commonSeriesSettings configuration object.

If you have several series of a single type, you can set point 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 their corresponding common values.

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

Show Example:
jQuery

In this example, the appearance of the series points is changed.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            point: {
                border: {
                    visible: true,
                    color: 'paleturquoise',
                    width: 2
                },
                color: 'palegreen',
                symbol: 'square',
                size: 3
            }
        },
        palette: 'Soft',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

selectionMode

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

Type: String
Default Value: 'includePoints'
Accepted Values: 'includePoints' | 'excludePoints' | '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:

  • includePoints
    Changes the appearance of the selected series along with all series points.
  • excludePoints
    Changes the appearance of the selected series. The appearance of the series points is not changed.
  • none
    The appearance of the selected 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). In addition, you can set a custom selection style for points in a line, scatter or area series. To do this, use the selectionStyle configuration object. Define this object for an individual series (series | point | selectionStyle), for all series of a particular type (commonSeriesSettings | area/line/... | point | selectionStyle), or all series in the Chart (see commonSeriesSettings | point | 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="includePoints">includePoints</option>
        <option value="excludePoints">excludePoints</option>
        <option value="none">none</option>
    </select>
</div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            selectionMode: 'includePoints'
        },
        animation: { enabled: false },
        palette: 'Soft',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            clickedSeries.isSelected() ? clickedSeries.clearSelection() : clickedSeries.select();
        },
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });

    $("#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 = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year',
            selectionStyle: {
                color: 'orange',
                width: 6,
                dashStyle: 'longDash'
            }
        },
        palette: 'Bright',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        onSeriesClick: function (info) {
            var clickedSeries = info.target;
            clickedSeries.isSelected() ? clickedSeries.clearSelection() : clickedSeries.select();
        },
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

showInLegend

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

Type: Boolean
Default Value: true

Show Example:
jQuery

In this example, the Europe 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 = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        palette: 'Pastel',
        series: [
            { valueField: 'europe', name: 'Europe', showInLegend: false },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

tagField

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

Type: String
Default Value: 'tag'
Cannot be used in themes.

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.

Show Example:
jQuery

In this example, the info field of the data source is assigned to the tagField option. To see data from this field, click a point on the chart.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div style="height:200px;max-width:700px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
    <span id="clickSpan" />
</div>
var dataSource = [
    { country: 'China', y014: 320866959, y1564: 853191410, y65: 87774113, info: 'China, officially the People&#39;s Republic of China (PRC), is a country in East Asia. It is the world&#39;s most populous country, with a population of over 1.3 billion. The PRC is a single-party state governed by the Communist Party of China with its seat of government in the capital city of Beijing. It exercises jurisdiction over 22 provinces, five autonomous regions, four direct-controlled municipalities (Beijing, Tianjin, Shanghai, and Chongqing), and two mostly self-governing special administrative regions (Hong Kong and Macau). The PRC also claims Taiwan—which is controlled by the Republic of China (ROC), a separate political entity—as its 23rd province, a claim controversial due to the complex political status of Taiwan and the unresolved Chinese Civil War.' },
    { country: 'India', y014: 340419115, y1564: 626520945, y65: 47063757, info: 'India, officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India&#39;s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.' },
    { country: 'United States', y014: 58554755, y1564: 182172625, y65: 34835293, info: 'The United States of America (USA), commonly called the United States (US or U.S.) and America, is a federal constitutional republic consisting of fifty states and a federal district. The country is situated mostly in central North America, where its forty-eight contiguous states and Washington, D.C., the capital district, lie between the Pacific and Atlantic Oceans, bordered by Canada to the north and Mexico to the south. The state of Alaska is in the northwest of the continent, with Canada to the east and Russia to the west across the Bering Strait. The state of Hawaii is an archipelago in the mid-Pacific. The country also possesses several territories in the Pacific and Caribbean. At 3.79 million square miles (9.83 million km2) and with over 315 million people, the United States is the third- or fourth-largest country by total area, and the third-largest by both land area and population. It is one of the world&#39;s most ethnically diverse and multicultural nations, the product of large-scale immigration from many countries. The geography and climate of the United States is also extremely diverse and is home to a variety of species.' },
    { country: 'Indonesia', y014: 68715705, y1564: 146014815, y65: 10053690, info: 'Indonesia, officially the Republic of Indonesia, is a country in Southeast Asia and Oceania. Indonesia is an archipelago comprising approximately 17,508 islands. It has 34 provinces with over 238 million people, and is the world&#39;s fourth most populous country. Indonesia is a republic, with an elected legislature and president. The nation&#39;s capital city is Jakarta. The country shares land borders with Papua New Guinea, East Timor, and Malaysia. Other neighboring countries include Singapore, Philippines, Australia, Palau, and the Indian territory of the Andaman and Nicobar Islands. Indonesia is a founding member of ASEAN and a member of the G-20 major economies. The Indonesian economy is the world&#39;s sixteenth largest by nominal GDP and fifteenth largest by purchasing power parity.' },
    { country: 'Brazil', y014: 50278034, y1564: 113391494, y65: 9190842, info: 'Brazil, officially the Federative Republic of Brazil, is the largest country in South America and in the Latin America region. It is the world&#39;s fifth largest country, both by geographical area and by population with over 193 million people. It is the largest Lusophone country in the world, and the only one in the Americas.' },
    { country: 'Russia', y014: 26465156, y1564: 101123777, y65: 18412243, info: 'Russia, also officially known as the Russian Federation, is a country in northern Eurasia. It is a federal semi-presidential republic, comprising 83 federal subjects. At 17,075,400 square kilometres (6,592,800 sq mi), Russia is the largest country in the world, covering more than one-eighth of the Earth&#39;s inhabited land area. Russia is also the world&#39;s ninth most populous nation with 143 million people as of 2012. Extending across the whole of northern Asia, Russia spans nine time zones and incorporates a wide range of environments and landforms. Russia has the world&#39;s largest reserves of mineral and energy resources and is the largest producer of oil and natural gas globally. Russia has the world&#39;s largest forest reserves and its lakes contain approximately one-quarter of the world&#39;s liquid fresh water.' }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'country',
            tagField: 'info'
        },
        series: [
            { valueField: 'y014', name: '0-14 years' },
            { valueField: 'y1564', name: '15-64 years' },
            { valueField: 'y65', name: '65 years and older' }
        ],
        title: 'Population: Age Structure (2000)',
        legend: {
            horizontalAlignment: 'center',
            verticalAlignment: 'bottom'
        },
        onPointClick: function (info) {
            var clickedPoint = info.target;
            $('#clickSpan').html(clickedPoint.tag);
        }
    });
});

valueErrorBar

Configures error bars.

Type: Object

Error bars are used on charts to indicate an error or an uncertainty in a reported measurement. They give a general idea of how precise a measurement is.

In dxChart, an error bar is a vertical bar with two marks at its edges. An error bar accompanies a series point. Error bars can be generated either from concrete or calculated values. To generate one error bar, two values, high and low, are needed. If the data source of your chart provides concrete high and low values, assign the required data source fields to the highValueField and lowValueField options.

Alternatively, you can calculate the high and low error bar values automatically. For this purpose, choose one of error bar types and specify the value to be used in calculation.

NOTE: Error bars are available for axes of a numeric type only.

View Demo

valueField

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

Type: String
Default Value: 'val'
Cannot be used in themes.

When defining series using the series configuration object, set the valueField property for each series individually to the corresponding field from the data source. In case you use series templates, specify the valueField property of the commonSeriesSettings configuration object.

The valueField property is considered for the series whose data points are set by an argument and one corresponding value. However, there are series whose data points are set by an argument and two corresponding values (e.g., range series). To set data fields for these types of series, use the rangeValue1Field and rangeValue2Field properties of the series configuration object. In addition, there are financial series, which have four values per argument. To set data fields for these types of series, use the openValueField, highValueField, lowValueField and closeValueField properties of the series configuration object.

Show Example:
jQuery

In this example, each series receives data from the data source field assigned to the valueField option of this series.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        palette: 'Bright',
        series: [
            { valueField: 'europe', name: 'Europe' },
            { valueField: 'americas', name: 'Americas' },
            { valueField: 'africa', name: 'Africa' }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});

visible

Specifies the visibility of a series.

Type: Boolean
Default Value: true

When this option is set to false for a series, the series appears invisible. If you require all the series to appear so, assign the same value to the visible option within the commonSeriesSettings configuration object.

In addition, you can show/hide series at runtime. For this purpose, use the show() or hide() method of a particular series respectively.

NOTE: When the series is invisible, the marker of its legend item is faded.

width

Specifies a width for a line in the series.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, series on the chart have different line widths.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [
    { year: 1950, europe: 546, americas: 332, africa: 227 },
    { year: 1960, europe: 605, americas: 417, africa: 283 },
    { year: 1970, europe: 656, americas: 513, africa: 361 },
    { year: 1980, europe: 694, americas: 614, africa: 471 },
    { year: 1990, europe: 721, americas: 721, africa: 623 },
    { year: 2000, europe: 730, americas: 836, africa: 797 },
    { year: 2010, europe: 728, americas: 935, africa: 982 },
    { year: 2020, europe: 721, americas: 1027, africa: 1189 },
    { year: 2030, europe: 704, americas: 1110, africa: 1416 },
    { year: 2040, europe: 680, americas: 1178, africa: 1665 },
    { year: 2050, europe: 650, americas: 1231, africa: 1937 }
];

$(function () {
    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: 'year'
        },
        palette: 'Bright',
        series: [
            { valueField: 'europe', name: 'Europe', width: 1 },
            { valueField: 'americas', name: 'Americas', width: 3 },
            { valueField: 'africa', name: 'Africa', width: 5 }
        ],
        tooltip: { enabled: true },
        title: 'Historic, Current and Future Population',
        legend: {
            verticalAlignment: 'bottom',
            horizontalAlignment: 'center'
        }
    });
});