JavaScript/jQuery Chart - BarSeries

All the settings in this section are specified as follows:

• The commonSeriesSettings object
  Specifies settings for all series in a Chart.

• The commonSeriesSettings.bar object
  Specifies settings for all series of the bar type.

• An object in the series array
  Specifies settings for an individual series.

View Demo

Displaying all the points of a Chart with many series points can affect performance. In this case, aggregate the series points or replace a group of them with a single point. The group includes only those points that fall within the same interval on the argument axis. See aggregationInterval and aggregationGroupWidth for details on dividing the axis into intervals.

The Chart provides several aggregation methods, which differ depending on the series type, and a capability to implement a custom aggregate function. To enable data aggregation for the series, set the aggregation.enabled property to true.

See Also

• Points Aggregation Demo: Multi-Series Chart | Financial Chart
• Data Aggregation
• autoHidePointMarkers

In the Cartesian coordinate system, each point is characterized by a pair of coordinates (X, Y). In the Chart UI component, X's are provided by the argumentField; Y's are provided by the valueField.

Commonly, a chart contains several series, and many of them have the same argument field. In this case, assign the name of this field to the argumentField property of the commonSeriesSettings object. If a series must have a unique argument field, specify the same property, but do so in the series object within the series array.

When there are multiple value axes in a chart, series need to know exactly which axis they are bound to. By default, all of them are bound to the first axis in the valueAxis array. To bind a series to another axis, assign the name of the axis to the axis series property.

View Demo

Set this property to identical values for the series you want to collect in a single group.

The following image shows a regular bar chart with two series...

...and here the same series are collected in a barOverlapGroup:

View Demo

This property accepts a value from 0 to 1 that specifies the correlation between the empty space on a bar's sides and the bar's width: 0 - the bar occupies the whole allocated space; 1 - virtually hides the bar creating a lot of empty space.

See Also

• Specify the Bar Width
• barGroupPadding
• series.minBarSize

A bar's maximum width is limited. In single-series charts, it cannot be greater than the interval between two major ticks. In multi-series charts, it depends on the number of bars in the parent group and this group's actual width. See the Specify the Bar Width article for more information.

See Also

• barGroupWidth
• series.minBarSize

Declared in commonSeriesSettings, the border settings apply to all series in the chart. Declared in a series configuration object, the border settings apply to this particular series only. The series-specific border settings override the common ones.

Specified in the commonSeriesSettings object, this property colors all series in the chart. To color an individual series, specify this property in the series object within the series array.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

This functionality is available for the following Chart series:

• Area
• Stacked area
• Full-stacked area
• Spline area
• Stacked spline area
• Full-stacked spline area
• Range area
• Step area
• Bar
• Stacked bar
• Full-stacked bar
• Range bar
• Bubble

$(function(){
    $("#chartContainer").dxChart({
        // ...
        series: {
            // ...
            color: {
                fillId: customPatternId
            }
        }
    });
});

<dx-chart ... >
    <dxi-series 
        [color]="fill"
    >
    </dxi-series>
</dx-chart>

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
} 

<template>
    <DxChart ... >
        <DxSeries :color="fill" />
        </DxSeries>
    </DxChart>
</template>

<script>
import DxChart, { DxSeries, DxSelectionStyle } from 'devextreme-vue/chart'; 
// ...

export default {
    components: {
        DxChart,
        DxSeries,
        DxSelectionStyle
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>

<template>
    <DxChart ... >
        <DxSeries :color="fill" />
    </DxChart>
</template>

<script setup>
import DxChart, { DxSeries, DxSelectionStyle } from 'devextreme-vue/chart';  
// ...

const fill = {
    fillId: customPatternId
};
</script>

import React from 'react';
import Chart, { Series, SelectionStyle } from 'devextreme-react/chart'; 

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <Chart ... >
            <Series color={fill} />
        </Chart>        
    ); 
} 

When a user points to a series, it may react in one of the following ways depending on the value of the hoverMode property.

hoverMode	Result
"onlyPoint"
"allSeriesPoints"
"allArgumentPoints"
"none"

See Also

• hoverStyle - specifies the appearance of series in the hover state.

Declared in commonSeriesSettings, hoverStyle applies to all series in the chart. Declared in a series configuration object, hoverStyle applies to this particular series only. The series-specific hoverStyle overrides the common one.

Data points that have the null value do not produce actual series points. Because of this, series may be drawn with unnecessary gaps where missing points should have been. To remove these gaps, set the ignoreEmptyPoints property to true.

Declared in commonSeriesSettings, the label settings apply to all point labels in the chart. Declared in a series configuration object, the label settings apply only to the point labels that belong to this particular series. The series-specific label settings override the common ones.

$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            label: {
                // Settings for all point labels of an individual series
            }
        }, {
            // ...  
        }],
        commonSeriesSettings: {
            label: {
                // Settings for all point labels in the Chart
            }
        }
    });
});

<dx-chart ... >
    <dxi-series>
        <dxo-label ... >
            <!-- Settings for all point labels of an individual series -->
        </dxo-label>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-label ... >
            <!-- Settings for all point labels in the Chart -->
        </dxo-label>
    </dxo-common-series-settings>
</dx-chart>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxChart ... >
        <DxSeries ... >
            <DxLabel ...>
                <!-- Settings for all point labels of an individual series -->
            </DxLabel>
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxLabel ... >
                <!-- Settings for all point labels in the Chart -->
            </DxLabel>
        </DxCommonSeriesSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxLabel,
    DxCommonSeriesSettings
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxLabel,
        DxCommonSeriesSettings
    },
    // ...
}
</script>

import React from 'react';

import Chart, {
    Series,
    Label,
    CommonSeriesSettings
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Series ... >
                    <Label ... >
                        // Settings for all point labels of an individual series
                    </Label>
                </Series>
                <CommonSeriesSettings ... >
                    <Label ... >
                        // Settings for all point labels in the Chart
                    </Label>
                </CommonSeriesSettings>
            </Chart>
        );
    }
}
export default App;

View Demo

See Also

• customizeLabel

If the number of points in a series increases over time, there comes a time when it becomes so massive that displaying labels for them makes the chart too cluttered. In this instance, to keep the chart clear to the viewer, specify a limit for the number of point labels using the maxLabelCount property. Once this limit is exceeded, all point labels of the series will be hidden.

If the disparity between the smallest and largest values in the data source is considerable, small values are visualized by tiny bars that may be difficult to interact with. In this case, specify the minimal possible height (or length if the chart is rotated) for bars using the minBarSize property.

See Also

• barPadding
• barWidth

If this property is not specified, the series will belong to the default pane.

See Also

• panes - declares a collection of panes.

View Demo

When a user selects a bar, its series may react in one of the following ways depending on the value of the selectionMode property.

selectionMode	Result
"onlyPoint"
"allSeriesPoints"
"allArgumentPoints"
"none"

See Also

• pointSelectionMode - specifies whether only one or several bars can stay selected.
• series.selectionStyle - specifies the appearance of bars in the selected state.
• pointSelectionChanged - an event that fires after the selection state of a bar has been changed.

Declared in commonSeriesSettings, selectionStyle applies to all series in the chart. Declared in a series configuration object, selectionStyle applies to this particular series only. The series-specific selectionStyle overrides the common one.

This property allows you to associate virtually any required data with a series point. This data will be stored in the tag field of the Point object.

Commonly, a chart contains several series, and many of them have the same tagField value. In this case, specify the tagField property in the commonSeriesSettings object. If a series must have a unique tagField value, specify the same property, but do so in the series object within the series array.

See Also

• series.tag - associates data with an entire series.

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 the measurement is.

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 chart data source supplies concrete high and low values, assign the required data source fields to the highValueField and lowValueField properties. To hide individual error bars, set the corresponding low and high values in the data source to null.

Alternatively, error bar values can be calculated according to an algorithm. In this case, use the type property to choose a required algorithm, and use the value property to specify the value to be used in calculation.

View Demo

In the Cartesian coordinate system, each point is characterized by a pair of coordinates (X, Y). In a common case, X's are provided by the argumentField; Y's are provided by the valueField.

Certain series types require more than one value field, because their points are characterized by a larger number of coordinates. These series types are:

• Range-like series types
  Range bar and range area require two value fields: rangeValue1Field and rangeValue2Field.
• Financial series types
  Stock and candlestick require four value fields: openValueField, closeValueField, highValueField and lowValueField.

If you use a series template, specify the value field properties in the commonSeriesSettings object. Otherwise, do this in the series object within the series array.

See Also

• Series.show() - shows the series at runtime.
• Series.hide() - hides the series at runtime.