Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<div id="chart-demo">
<dx-chart palette="Violet" [dataSource]="countriesInfo">
<dxi-series
*ngFor="let energy of energySources"
[valueField]="energy.value"
[name]="energy.name"
>
</dxi-series>
<dxo-common-series-settings
#seriesSettings
argumentField="country"
[type]="types[0]"
>
</dxo-common-series-settings>
<dxo-margin [bottom]="20"></dxo-margin>
<dxo-argument-axis
[valueMarginsEnabled]="false"
discreteAxisDivisionMode="crossLabels"
>
<dxo-grid [visible]="true"></dxo-grid>
</dxo-argument-axis>
<dxo-legend
verticalAlignment="bottom"
horizontalAlignment="center"
itemTextPosition="bottom"
>
</dxo-legend>
<dxo-title text="Energy Consumption in 2004">
<dxo-subtitle text="(Millions of Tons, Oil Equivalent)"> </dxo-subtitle>
</dxo-title>
<dxo-export [enabled]="true"></dxo-export>
<dxo-tooltip [enabled]="true"></dxo-tooltip>
</dx-chart>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
<dx-select-box
[dataSource]="types"
[(value)]="seriesSettings.type"
[inputAttr]="{ 'aria-label': 'Series Type' }"
>
</dx-select-box>
</div>
</div>
</div>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
import { CountryInfo, EnergyDescription, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: `app/app.component.html`,
styleUrls: [`app/app.component.css`],
providers: [Service],
preserveWhitespaces: true,
})
export class AppComponent {
types: string[] = ['line', 'stackedline', 'fullstackedline'];
countriesInfo: CountryInfo[];
energySources: EnergyDescription[];
constructor(service: Service) {
this.countriesInfo = service.getCountriesInfo();
this.energySources = service.getEnergySources();
}
}
@NgModule({
imports: [
BrowserModule,
DxChartModule,
DxSelectBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
::ng-deep .option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
import { Injectable } from '@angular/core';
export class CountryInfo {
country: string;
hydro: number;
oil: number;
gas: number;
coal: number;
nuclear: number;
}
export class EnergyDescription {
value: string;
name: string;
}
const energySources: EnergyDescription[] = [
{ value: 'hydro', name: 'Hydro-electric' },
{ value: 'oil', name: 'Oil' },
{ value: 'gas', name: 'Natural gas' },
{ value: 'coal', name: 'Coal' },
{ value: 'nuclear', name: 'Nuclear' },
];
const countriesInfo: CountryInfo[] = [{
country: 'USA',
hydro: 71.2,
oil: 910.4,
gas: 483.2,
coal: 564.3,
nuclear: 216.1,
}, {
country: 'China',
hydro: 72.5,
oil: 223.6,
gas: 36,
coal: 956.9,
nuclear: 11.3,
}, {
country: 'Russia',
hydro: 47.7,
oil: 149.4,
gas: 432.3,
coal: 105,
nuclear: 29.3,
}, {
country: 'Japan',
hydro: 17.9,
oil: 283.6,
gas: 61.8,
coal: 120.8,
nuclear: 52.8,
}, {
country: 'India',
hydro: 14.4,
oil: 86.4,
gas: 25.1,
coal: 204.8,
nuclear: 3.8,
}, {
country: 'Germany',
hydro: 6.6,
oil: 101.7,
gas: 92.7,
coal: 85.7,
nuclear: 30.8,
}];
@Injectable()
export class Service {
getEnergySources(): EnergyDescription[] {
return energySources;
}
getCountriesInfo(): CountryInfo[] {
return countriesInfo;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
const componentNames = [
'accordion',
'action-sheet',
'autocomplete',
'bar-gauge',
'box',
'bullet',
'button-group',
'button',
'calendar',
'chart',
'chat',
'check-box',
'circular-gauge',
'color-box',
'context-menu',
'data-grid',
'date-box',
'date-range-box',
'defer-rendering',
'diagram',
'draggable',
'drawer',
'drop-down-box',
'drop-down-button',
'file-manager',
'file-uploader',
'filter-builder',
'form',
'funnel',
'gallery',
'gantt',
'html-editor',
'linear-gauge',
'list',
'load-indicator',
'load-panel',
'lookup',
'map',
'menu',
'multi-view',
'nested',
'number-box',
'pagination',
'pie-chart',
'pivot-grid-field-chooser',
'pivot-grid',
'polar-chart',
'popover',
'popup',
'progress-bar',
'radio-group',
'range-selector',
'range-slider',
'recurrence-editor',
'resizable',
'responsive-box',
'sankey',
'scheduler',
'scroll-view',
'select-box',
'slider',
'sortable',
'sparkline',
'speed-dial-action',
'splitter',
'switch',
'tab-panel',
'tabs',
'tag-box',
'text-area',
'text-box',
'tile-view',
'toast',
'toolbar',
'tooltip',
'tree-list',
'tree-map',
'tree-view',
'validation-group',
'validation-summary',
'validator',
'vector-map',
];
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'@angular/platform-browser-dynamic': {
'esModule': true,
},
'@angular/platform-browser': {
'esModule': true,
},
'@angular/core': {
'esModule': true,
},
'@angular/common': {
'esModule': true,
},
'@angular/common/http': {
'esModule': true,
},
'@angular/animations': {
'esModule': true,
},
'@angular/forms': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
/* @angular */
'@angular/compiler': 'bundles:@angular/compiler.umd.js',
'@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js',
'@angular/core': 'bundles:@angular/core.umd.js',
'@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js',
'@angular/common': 'bundles:@angular/common.umd.js',
'@angular/common/http': 'bundles:@angular/common-http.umd.js',
'@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js',
'@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js',
'@angular/forms': 'bundles:@angular/forms.umd.js',
/* devextreme */
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'devextreme/bundles/dx.all': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/bundles/dx.all.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54',
/* devextreme-angular umd maps */
'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js',
'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js',
'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',
...componentNames.reduce((acc, name) => {
acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;
acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`;
return acc;
}, {}),
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devexpress-diagram@2.2.5/package.json',
'npm:devexpress-gantt@4.1.54/package.json',
],
};
System.config(window.config);
// System.import('@angular/compiler').catch(console.error.bind(console));
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.14.10/bundles/zone.umd.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>
Bind to Data
You can bind line charts to one of the following data sources:
In this demo, the chart is populated with data from a local JavaScript array.
Configure Series
The series type defines the appearance of your chart. To display a Line, Stacked Line, or Full-Stacked Line series, set the type property to one of these types.
You also need to bind the series to data. Set the argumentField and valueField properties to data fields that contain arguments and values for your series. You can specify these properties in an object in the series array or include them in the commonSeriesSettings object. In this demo, the argumentField and type properties are specified for all series in the commonSeriesSettings object.
Enable Tooltips
When you hover the mouse pointer over a series point, it shows a tooltip with information about the series point. To display tooltips, you need to enable the tooltip.enabled property.
Export Chart to Image
To allow a user to print the chart or export it as a PNG, JPEG, or SVG file, set the export.enabled property to true. This setting adds a button that opens a drop-down menu with export and print commands. In this demo, you can find this button in the upper-right corner.