Chart

The chart component visualizes series of data to easily analyze and compare metrics.

The chart component represents one or more metrics. It depends on the given data which of the available chart types should be used to visualize them. The dt-chart component wraps Highcharts to be used within Angular.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series" (seriesVisibilityChange)="seriesVisibilityChanged($event)" > <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartDefaultExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; seriesVisibilityChanged(_: DtChartSeriesVisibilityChangeEvent): void { // NOOP } } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series" (seriesVisibilityChange)="seriesVisibilityChanged($event)" > <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartDefaultExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; seriesVisibilityChanged(_: DtChartSeriesVisibilityChangeEvent): void { // NOOP } } // tslint:enable:no-magic-numbers

Imports

You have to import the DtChartModule when you want to use the dt-chart:

@NgModule({
  imports: [DtChartModule],
})
class MyModule {}

Initialization

To use a chart, add the <dt-chart options="myoptions" series="myseries"></dt-chart> element to the page.

Reflow

The chart needs the ViewportResizer provider, which notifies the dt-chart component about viewport changes that trigger a reflow of the dt-chart.

Inputs

Name Type Default Description
options DtChartOptions | undefined undefined Sets options for the chart. DtChartOptions extends from Highcharts.Options, but removes the series property. The series property is passed as separate input.
series Observable<Highcharts.IndividualSeriesOptions[]> | Highcharts.IndividualSeriesOptions[] | undefined undefined Sets the series of the chart. The type can either be an observable or a static array.
loading-text string The loading text of the loading distractor.

Outputs

Name Type Description
updated EventEmitter<void> Event emitted when the chart options or series are updated.
tooltipOpenChange EventEmitter<boolean> Event emitted when the chart tooltip opens or closes.
tooltipDataChange EventEmitter<DtChartTooltipEvent | null> Event emitted when the tooltip data changes.
seriesVisibilityChange EventEmitter<DtChartSeriesVisibilityChangeEvent> Event emitted when a series visibility changes because a legend item was clicked

Types

There are different chart types available. It strongly depends on the use case and the given data which one should be used.

Area chart

Area chart

Area range chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartAreaRangeExample { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [ { name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartAreaRangeExample { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, }; series = [ { name: 'Temperatures', data: [ [1483232400000, 1.4, 4.7], [1483318800000, -1.3, 1.9], [1483405200000, -0.7, 4.3], [1483491600000, -5.5, 3.2], [1483578000000, -9.9, -6.6], [1483664400000, -9.6, 0.1], [1483750800000, -0.9, 4], [1483837200000, -2.2, 2.9], [1483923600000, 1.3, 2.3], [1484010000000, -0.3, 2.9], [1484096400000, 1.1, 3.8], [1484182800000, 0.6, 2.1], [1484269200000, -3.4, 2.5], [1484355600000, -2.9, 2], [1484442000000, -5.7, -2.6], [1484528400000, -8.7, -3.3], [1484614800000, -3.5, -0.3], [1484701200000, -0.2, 7], [1484787600000, 2.3, 8.5], [1484874000000, 5.6, 9.5], [1484960400000, 0.4, 5.8], [1485046800000, 0.1, 3.1], [1485133200000, 1.5, 4.1], [1485219600000, -0.2, 2.8], [1485306000000, 2.3, 10.3], ], }, ]; } // tslint:enable:no-magic-numbers

Bar chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartCategorizedExample { options: Highcharts.Options = { xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', data: [100, 80, 130, 90, 80, 60, 120, 100, 30, 90, 110, 120], }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartCategorizedExample { options: Highcharts.Options = { xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', data: [100, 80, 130, 90, 80, 60, 120, 100, 30, 90, 110, 120], }, ]; } // tslint:enable:no-magic-numbers
´ Loading interactive demo...
<dt-chart [options]="options" [series]="series$" loading-text="Loading..."></dt-chart> export class ChartStreamExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}/min', }, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series$: Observable<IndividualSeriesOptions[]>; constructor(private _chartService: ChartService) { this.series$ = this._chartService.getStreamedChartdata(); } } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series$" loading-text="Loading..."></dt-chart> export class ChartStreamExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}/min', }, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series$: Observable<IndividualSeriesOptions[]>; constructor(private _chartService: ChartService) { this.series$ = this._chartService.getStreamedChartdata(); } } // tslint:enable:no-magic-numbers
´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartBarExample { options: Highcharts.Options = { chart: { type: 'bar', }, xAxis: { title: { text: null, }, categories: [ 'First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item', ], }, yAxis: { title: { text: null, }, labels: { format: '{value} %', }, }, plotOptions: { pie: { showInLegend: true, shadow: false, innerSize: '80%', borderWidth: 0, }, }, }; series: Highcharts.BarChartSeriesOptions[] = [ { name: 'Metric', data: [60, 86, 25, 43, 28], }, ]; } <dt-chart [options]="options" [series]="series"></dt-chart> export class ChartBarExample { options: Highcharts.Options = { chart: { type: 'bar', }, xAxis: { title: { text: null, }, categories: [ 'First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item', ], }, yAxis: { title: { text: null, }, labels: { format: '{value} %', }, }, plotOptions: { pie: { showInLegend: true, shadow: false, innerSize: '80%', borderWidth: 0, }, }, }; series: Highcharts.BarChartSeriesOptions[] = [ { name: 'Metric', data: [60, 86, 25, 43, 28], }, ]; }

Donut or pie chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartDonutExample { options: Highcharts.Options = { chart: { type: 'pie', plotBorderWidth: 0, }, legend: { align: 'right', enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, shadow: false, innerSize: '80%', borderWidth: 0, }, }, }; series: Highcharts.PieChartSeriesOptions[] = [ { data: [ { name: 'Canada', y: 55, }, { name: 'Italy', y: 25, }, { name: 'United States', y: 15, }, { name: 'France', y: 5, }, ], }, ]; } <dt-chart [options]="options" [series]="series"></dt-chart> export class ChartDonutExample { options: Highcharts.Options = { chart: { type: 'pie', plotBorderWidth: 0, }, legend: { align: 'right', enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, shadow: false, innerSize: '80%', borderWidth: 0, }, }, }; series: Highcharts.PieChartSeriesOptions[] = [ { data: [ { name: 'Canada', y: 55, }, { name: 'Italy', y: 25, }, { name: 'United States', y: 15, }, { name: 'France', y: 5, }, ], }, ]; }
´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{ tooltip.x }} {{ tooltip.point.colorIndex }} </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartPieExample { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key}&nbsp${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }, ], }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> {{ tooltip.x }} {{ tooltip.point.colorIndex }} </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartPieExample { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key}&nbsp${this.y}%`; }, }, legend: { align: 'right', borderWidth: 0, enabled: true, layout: 'vertical', symbolRadius: 0, verticalAlign: 'middle', floating: true, }, plotOptions: { pie: { showInLegend: true, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Browsers', data: [ { name: 'Chrome', y: 55, }, { name: 'Firefox', y: 25, }, { name: 'Edge', y: 15, }, ], }, ]; } // tslint:enable:no-magic-numbers

Line chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartLineExample { options: Highcharts.Options = { chart: { type: 'line', }, xAxis: { title: { text: null, }, type: 'datetime', }, yAxis: [ { title: { text: null, }, labels: { format: '{value} ms', }, tickInterval: 25, }, ], }; series: Highcharts.LineChartSeriesOptions[] = [ { name: 'Host 1', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 2', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 3', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 4', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 5', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 6', data: generateData(10, 0, 45, 1370304000000, 900000), }, ]; } <dt-chart [options]="options" [series]="series"></dt-chart> export class ChartLineExample { options: Highcharts.Options = { chart: { type: 'line', }, xAxis: { title: { text: null, }, type: 'datetime', }, yAxis: [ { title: { text: null, }, labels: { format: '{value} ms', }, tickInterval: 25, }, ], }; series: Highcharts.LineChartSeriesOptions[] = [ { name: 'Host 1', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 2', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 3', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 4', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 5', data: generateData(10, 0, 45, 1370304000000, 900000), }, { name: 'Host 6', data: generateData(10, 0, 45, 1370304000000, 900000), }, ]; }

Mixed chart

Mixed charts combine different chart types, e.g. a bar chart and a line chart.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartOrderedColorsExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartOrderedColorsExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; } // tslint:enable:no-magic-numbers

Min/Max chart

The min/max chart shows the area between a minimum and a maximum value. The average or median is represented by a line.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartMinMaxExample { private _minMaxChartLineSeries = generateData( 20, 20, 40, 1370304000000, 900000, ); options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: { title: { text: null, }, type: 'datetime', labels: { format: '{value} ms', }, }, plotOptions: { series: { marker: { enabled: false, }, }, arearange: { lineWidth: 0, states: { hover: undefined, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Bar 1', type: 'column', data: generateData(20, 20, 40, 1370304000000, 900000), }, { name: 'Area 1', type: 'arearange', data: generateAreaRangeData(this._minMaxChartLineSeries, 4, 8), }, { name: 'Line 1', type: 'line', data: this._minMaxChartLineSeries, }, ]; } <dt-chart [options]="options" [series]="series"></dt-chart> export class ChartMinMaxExample { private _minMaxChartLineSeries = generateData( 20, 20, 40, 1370304000000, 900000, ); options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: { title: { text: null, }, type: 'datetime', labels: { format: '{value} ms', }, }, plotOptions: { series: { marker: { enabled: false, }, }, arearange: { lineWidth: 0, states: { hover: undefined, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Bar 1', type: 'column', data: generateData(20, 20, 40, 1370304000000, 900000), }, { name: 'Area 1', type: 'arearange', data: generateAreaRangeData(this._minMaxChartLineSeries, 4, 8), }, { name: 'Line 1', type: 'line', data: this._minMaxChartLineSeries, }, ]; }

Colors

The chart will take a color from a specified chart color palette for the series data if no color is specified. It depends on the current page theme and the number of shown metrics which chart color palette is used.

<div dtTheme="purple">
  <dt-chart options="myoptions" series="myseries"></dt-chart>
</div>
´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartOrderedColorsExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartOrderedColorsExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, { name: 'Failed requests', type: 'column', yAxis: 1, data: generateData(40, 0, 15, 1370304000000, 900000), }, { name: 'Failure rate', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, { name: 'Failure rate new', type: 'line', data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; } // tslint:enable:no-magic-numbers

Legend

The chart legend is always placed below the chart, except for the donut or pie chart where the placement of the legend can vary.

Legend icons

The icon size in the chart legend is always 16x16px. The following icons are used as legends:

Toggle metrics

If there is more than one metric visualized in a chart, clicking a chart legend toggles the visibility of the according metric. Clicking a chart legend disables the metric, to make it possible to focus on individual metrics in a chart. Clicking the legend a second time re-enables the metric.

Tooltip

The chart supports adding a tooltip/overlay that wraps other Angular components to show detailed information about chart metrics. They appear on hover over specific value points within the chart.

The dt-chart component takes a dt-chart-tooltip component as a content child. The dt-chart-tooltip component needs an ng-template as a content child. This ng-template receives the same object passed to the context as the "normal" highcharts tooltip formatter function would receive. Don't forget to declare the variable for the implicit context on the ng-template.

<dt-chart ...>
  <dt-chart-tooltip>
    <ng-template let-tooltipdata>
      {{tooltipdata.point.y}}
    </ng-template>
  </dt-chart-tooltip>
</dt-chart>

Selection area

Within a chart you can add a dt-chart-range to select a timeframe or a dt-chart-timestamp to select a specific value on the x-axis (point in time) to analyze one or more metrics of the chart in detail.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-timestamp aria-label-close="Close the selection" (closed)="closed()" (valueChanges)="valueChanges($event)" ></dt-chart-timestamp> <dt-chart-range aria-label-close="Close the selection" aria-label-left-handle="The left handle to update the selection" aria-label-right-handle="The right handle to update the selection" aria-label-selected-area="The selected time-frame" (valid)="rangeValidChanges($event)" (valueChanges)="valueChanges($event)" (closed)="closed()" > <button aria-label="Apply the selection" dt-button dtChartSelectionAreaAction [disabled]="!validRange" i18n > Apply </button> </dt-chart-range> </dt-chart> export class ChartSelectionAreaDefaultExample { validRange = false; rangeValidChanges(valid: boolean): void { this.validRange = valid; } closed(): void { // emits when the selection gets closed } valueChanges(_value: number | [number, number]): void { // emits when the value changes } /** Chart options and series */ options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, ]; } <dt-chart [options]="options" [series]="series"> <dt-chart-timestamp aria-label-close="Close the selection" (closed)="closed()" (valueChanges)="valueChanges($event)" ></dt-chart-timestamp> <dt-chart-range aria-label-close="Close the selection" aria-label-left-handle="The left handle to update the selection" aria-label-right-handle="The right handle to update the selection" aria-label-selected-area="The selected time-frame" (valid)="rangeValidChanges($event)" (valueChanges)="valueChanges($event)" (closed)="closed()" > <button aria-label="Apply the selection" dt-button dtChartSelectionAreaAction [disabled]="!validRange" i18n > Apply </button> </dt-chart-range> </dt-chart> export class ChartSelectionAreaDefaultExample { validRange = false; rangeValidChanges(valid: boolean): void { this.validRange = valid; } closed(): void { // emits when the selection gets closed } valueChanges(_value: number | [number, number]): void { // emits when the value changes } /** Chart options and series */ options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, { title: null, labels: { format: '{value}/min', }, opposite: true, tickInterval: 50, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'column', yAxis: 1, data: generateData(40, 0, 200, 1370304000000, 900000), }, ]; }

It is possible to have both, a dt-chart-range and a dt-chart-timestamp, alongside in a chart.

<dt-chart ...>
  <dt-chart-range></dt-chart-range>
  <dt-chart-timestamp></dt-chart-timestamp>
</dt-chart>

Selection area action

When the user creates a range or timestamp also an overlay is shown. To specify a primary action within the overlay a button with a dtChartSelectionAreaAction directive can be added inside the dt-chart-timestamp or dt-chart-range.

<dt-chart ...>
  <dt-chart-range>
    <button dt-button dtChartSelectionAreaAction i18n>Apply</button>
  </dt-chart-range>
</dt-chart>

Range

The dt-chart-range adds the ability to select a desired time frame between two timestamps in a chart.

<dt-chart ...>
  <dt-chart-range></dt-chart-range>
</dt-chart>

The selected range has to be larger than 5 minutes and can also be limited by a max value. Once a range has been created the user can resize it by the two handles on the left and right side of the range.

Accessibility

You have to provide meaningful labels to the range via aria-label-selected-area, aria-label-left-handle, aria-label-right-handle and aria-label-close, to meet our accessibility standards.

Inputs

Name Type Default Description
min number 300000 The minimum range that can be created in milliseconds, by default the minimum range is 5 minutes.
max number | null null The maximum range that can be created in a time format. If not set, the range will be capped at the borders of the chart.
value [number, number] [0,0] The time frame on the chart's x-axis where the range should be placed.
aria-label-selected-area string '' Aria label of the selected area that is created.
aria-label-left-handle string '' Aria label of the left handle of the selected area that can resize the selected frame.
aria-label-right-handle string '' Aria label of the right handle of the selected area that can resize the selected frame.
aria-label-close string '' Aria label of the close button inside the overlay.

Outputs

Name Type Description
valueChanges EventEmitter<[number, number]> Event emitted when the values of the selected range have changed. Emits when the drag is complete. (Not triggered programmatically.)
valid BehaviorSubject<boolean> Event emitted when the selection area is valid, i.e. greater than the minimum constraint.
closed EventEmitter<void> Event emitted when the range has been closed.

Methods

Name Type Description
focus void Focuses the range element.

Timestamp

The dt-chart-timestamp adds the ability to select one specific point in time in a chart.

<dt-chart ...>
  <dt-chart-timestamp></dt-chart-timestamp>
</dt-chart>

Accessibility

You have to provide meaningful labels to the timestamp via aria-label-selected and aria-label-close, to meet our accessibility standards.

Inputs

Name Type Default Description
value number 0 The value on the chart's x-axis where the timestamp should be placed.
aria-label-selected string '' Aria label for the selected point in time.
aria-label-close string '' Aria label of the close button inside the overlay.

Outputs

Name Type Description
valueChanges EventEmitter<number> Event emitted when the value of the timestamp has changed by user triggered interactions. (Not triggered programmatically.)
closed EventEmitter<void> Event emitted when the timestamp has been closed.

Methods

Name Type Description
focus void Focuses the timestamp element.

Heatfield

Problems and events in charts can be displayed as heatfields. The dt-chart component takes dt-chart-heatfield components as content children.

<dt-chart ...>
  <dt-chart-heatfield [start]="start" [end]="end"></dt-chart-heatfield>
</dt-chart>

When clicking on the heatfield button above the chart, further information is displayed by an overlay containing a short description and a link.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> <p> Problem 1: <br /> Failure rate increase </p> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldExample { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> <p> Problem 1: <br /> Failure rate increase </p> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldExample { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }, ]; } // tslint:enable:no-magic-numbers

By default the color of the heatfield button is red to indicate a problem. By setting the color to main you can use the heatfield in theme color, for example for the overload prevention use case.

Overload prevention

Dynatrace only shows a maximum amount of data to protect the system and prevent an overload. To indicate this use case, add a heatfield with color set to main to the chart.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> Problem 1: <br /> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-heatfield [start]="40000" [end]="60000" color="main"> Overload prevention: <br /> <a class="dt-link">View overload prevention</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldMultipleExample { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }, ]; } // tslint:enable:no-magic-numbers <dt-chart [options]="options" [series]="series"> <dt-chart-heatfield [start]="10000" [end]="20000"> Problem 1: <br /> <a class="dt-link">View problem details</a> </dt-chart-heatfield> <dt-chart-heatfield [start]="40000" [end]="60000" color="main"> Overload prevention: <br /> <a class="dt-link">View overload prevention</a> </dt-chart-heatfield> <dt-chart-tooltip> <ng-template let-tooltip> <dt-key-value-list style="min-width: 100px"> <dt-key-value-list-item *ngFor="let data of tooltip.points"> <dt-key-value-list-key> {{ data.series.name }} </dt-key-value-list-key> <dt-key-value-list-value> {{ data.point.y }} </dt-key-value-list-value> </dt-key-value-list-item> </dt-key-value-list> </ng-template> </dt-chart-tooltip> </dt-chart> export class ChartHeatfieldMultipleExample { options: Highcharts.Options = { chart: { spacingLeft: 100, spacingRight: 100, }, xAxis: { type: 'datetime', min: 0, max: 100000, }, yAxis: [ { title: null, labels: { enabled: false, }, tickLength: 0, }, ], plotOptions: { column: { stacking: 'normal', }, series: { marker: { enabled: false, }, }, }, }; series: Highcharts.IndividualSeriesOptions[] = [ { name: 'Requests', type: 'line', data: generateData(11, 0, 200, 0, 10000), }, ]; } // tslint:enable:no-magic-numbers

Inputs

Name Type Default Description
start number The start numerical/date value on the x-axis of the chart.
end number The end numerical/date value on the x-axis of the chart.
active boolean false Whether the heatfield is active.
aria-label string undefined The aria label used for the heatfield button.
aria-labelledby string undefined ARIA reference to a label describing the icon in the consumption component.
color 'error' | 'main' 'error' Sets the color of the heatfield.

To make our components accessible it is obligatory to provide either an aria-label or aria-labelledby.

Outputs

Name Type Description
activeChange EventEmitter<DtChartHeatfieldActiveChange> Fires every time when the active state changes.

States

Empty state

It can happen that data can't be displayed at all or only small parts of a chart can be loaded. With empty states we can provide basic information and help users to understand why the content isn't shown.

Too much data to render

Please keep in mind to use the correct empty state according to the use case. Check our empty states pattern for guidelines and other examples.

Loading state

When chart values are not yet available a loading indicator is shown until all data has been loaded and can be displayed. Set the chart's loading-text input to add a text next to the loading spinner.

´ Loading interactive demo...
<button dt-button (click)="toggleData()">toggle data</button> <dt-chart [options]="options" [series]="series" loading-text="Loading..." ></dt-chart> export class ChartLoadingExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [ { name: 'Failure rate', type: 'line', color: DtColors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers <button dt-button (click)="toggleData()">toggle data</button> <dt-chart [options]="options" [series]="series" loading-text="Loading..." ></dt-chart> export class ChartLoadingExample { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [ { name: 'Failure rate', type: 'line', color: DtColors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }, ]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers

Value 0 vs. no data

Since our charts are intended to show complex data, it is important to distinguish between "0" as value and "no data" (a.k.a. "null").

Value 0

If the chart type is a contiguous linear chart type (e.g. line chart, bar chart, area chart), 0 values are displayed to maintain continuity.

If the chart type is a non linear chart type (stacked bar chart, pie chart/donut chart etc.), 0 values will only be visible in legends or in overlays to avoid manipulating the data visualization.

No data

If data points are missing the highcharts default should be used to display gaps.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartLineWithGapsExample { options: Highcharts.Options = { chart: { type: 'line', }, xAxis: { type: 'datetime', }, yAxis: [ { title: null, type: 'linear', tickInterval: 25, labels: { format: '{value} %', }, }, ], plotOptions: { series: { marker: { enabled: false, }, }, }, }; series: Highcharts.LineChartSeriesOptions[] = [ { name: 'Requests', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, { name: 'Failed requests', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, { name: 'Failure rate', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, ]; } <dt-chart [options]="options" [series]="series"></dt-chart> export class ChartLineWithGapsExample { options: Highcharts.Options = { chart: { type: 'line', }, xAxis: { type: 'datetime', }, yAxis: [ { title: null, type: 'linear', tickInterval: 25, labels: { format: '{value} %', }, }, ], plotOptions: { series: { marker: { enabled: false, }, }, }, }; series: Highcharts.LineChartSeriesOptions[] = [ { name: 'Requests', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, { name: 'Failed requests', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, { name: 'Failure rate', data: generateData(40, 0, 75, 1370304000000, 600000, true), }, ]; }

It may happen that existing data points are displayed as gaps (e.g. timeseries, area charts where no data is retrieved before and after an existing data point). In order to avoid this, we recommend using single data points to make the data visible.

Data points in charts

Switching metrics

The metrics displayed in a chart can be switched by button groups that are placed above the chart.

Switch metrics