jQuery Chart - Line Series
Line series visualize data as a collection of points connected by a line. This line can be broken, smooth, or step-like, which corresponds to the Line, Spline, and Step Line series types.
Line series also include stacked series types: Stacked Line and Stacked Spline. In such series, the value of each next point is counted off from the previous point with the same argument. As a result, series are put in a stack. Very similar to stacked series are full-stacked series - Full-Stacked Line and Full-Stacked Spline. In these series, the sum of all point values by a given argument is considered 100%, and each individual point value is recalculated to be a share of these 100%.
To specify one or another series type, assign its name to the series[].type property. You can configure:
- Each series individually using the series array;
- All series in the Chart using the commonSeriesSettings object;
- All series of a specific type using objects nested in commonSeriesSettings: line, spline, stepline, etc.
jQuery
$(function () {
$("#chartContainer").dxChart({
series: [{
type: "spline"
}, {
// ...
}],
commonSeriesSettings: {
line: { ... },
spline: { ... },
stepline: { ... },
stackedline: { ... },
stackedspline: { ... },
fullstackedline: { ... },
fullstackedspline: { ... }
}
});
});Angular
<dx-chart ... >
<dxi-series type="spline"></dxi-series>
<dxi-series ... ></dxi-series>
...
<dxo-common-series-settings>
<dxo-line ... ></dxo-line>
<dxo-spline ... ></dxo-spline>
<dxo-stepline ... ></dxo-stepline>
<dxo-stackedline ... ></dxo-stackedline>
<dxo-stackedspline ... ></dxo-stackedspline>
<dxo-fullstackedline ... ></dxo-fullstackedline>
<dxo-fullstackedspline ... ></dxo-fullstackedspline>
</dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
<template>
<DxChart ... >
<DxSeries type="spline"/>
<DxSeries ... />
...
<DxCommonSeriesSettings
:line="lineSettings"
:spline="splineSettings"
:stepline="stepLineSettings"
:stackedline="stackedLineSettings"
:stackedspline="stackedSplineSettings"
:fullstackedline="fullStackedLineSettings"
:fullstackedspline="fullStackedSplineSettings"
/>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxCommonSeriesSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxCommonSeriesSettings
},
data() {
return {
lineSettings: { ... },
splineSettings: { ... },
stepLineSettings: { ... },
stackedLineSettings: { ... },
stackedSplineSettings: { ... },
fullStackedLineSettings: { ... },
fullStackedSplineSettings: { ... }
};
}
}
</script>React
import React from 'react';
import Chart, {
Series,
CommonSeriesSettings
} from 'devextreme-react/chart';
const lineSettings = { ... };
const splineSettings = { ... };
const stepLineSettings = { ... };
const stackedLineSettings = { ... };
const stackedSplineSettings = { ... };
const fullStackedLineSettings = { ... };
const fullStackedSplineSettings = { ... };
class App extends React.Component {
render() {
return (
<Chart ... >
<Series type="spline" />
<Series ... />
...
<CommonSeriesSettings
line={lineSettings}
spline={splineSettings}
stepline={stepLineSettings}
stackedline={stackedLineSettings}
stackedspline={stackedSplineSettings}
fullstackedline={fullStackedLineSettings}
fullstackedspline={fullStackedSplineSettings}
/>
</Chart>
);
}
}
export default App;Refer to the Series Types section of the API Reference for a full list of properties available to a specific series type.
Line Series Demo Spline Series Demo