Chart

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 it.

´ 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 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), }, ]; } // 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 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), }, ]; } // tslint:enable:no-magic-numbers

Variants

The following chart types are available:

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

Donut or pie chart

In donut charts the visualization of the legend can vary.

´ 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.

The min/max chart can be combined with a bar chart. In this case the blend mode of the min/max chart is set to multiply.

´ 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, }, ]; }

Chart colors

It depends on the number of shown metrics what colors should be used for the chart.

Up to 3 metrics

If there are not more than 3 metrics in the chart, use the theme color of the entity. Consider the shades and order described in the themed chart colors.

More than 3 metrics

If more colors are needed (e.g. for custom charting), please use the sorted chart colors.

Chart colors

Chart 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 (see above).

Legend icons

The icons in the chart legend are always 16x16px. Please use the following icons as legends:

Behavior

There are many possible interactions with a chart component.

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, therefore it's possible to focus on individual metrics in a chart. Clicking the legend a second time re-enables the metric.

´ 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 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), }, ]; } // 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 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), }, ]; } // tslint:enable:no-magic-numbers

Chart selection area

The chart selection area allows you to interact with existing charts. The component allows for two types of interaction. A user is either able to select a specific timestamp, or, select specific time range in order to analyze one or more metrics.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-timestamp aria-label-close="Close the selection" ></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)" > <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; } /** 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" ></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)" > <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; } /** 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), }, ]; }

Behavior & corner cases

Our selection area offers the following functionalities:

  • Timestamp: A timestamp selects a specific moment based on the xAxis. The selection will be indicated with a hairline and an overlay.
  • Range: If you want to analyze one or more metrics, selecting a range is the best option. The component allows you to select a desired range of values by dragging the mouse across the chart. The selected range is indicated with a transparent, turquoise area and an overlay which gives you the possibility to "zoom" into a specific part of the chart.

We are working on keyboard and touch support, which will be available soon.

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").

0 values

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

0 value in area chart
0 value in area chart
0 value in bar chart
0 value in bar chart
0 value in line chart
0 value in line chart
0 value in min max area
0 value in min/max chart

If the chart type is a 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.

0 value in donut chart
0 value in donut chart
0 value in stacked bar chart
0 value in stacked bar chart

Missing data points (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
single data points in charts

For micro charts interpolation can be used. This ensures that the series continues without gaps. In this case empty data points will be calculated by interpolating the previous and the next data point. If missing data occurs at the beginning or end of a series the next or the previous value will be repeated to avoid having gaps. Visit the micro charts page to view specific examples.

Empty states

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
Too much data to render

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

Charts in use

Loading chart values

When chart values are not yet available a loading indicator is shown until all data has been loaded and can be displayed. Have a look at the loading distractor component for details about styling and usage.

´ 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

Chart overlays

For detailed information about chart metrics overlays are used. They appear on hover over specific value points within the chart. For information about styling and behavior of chart overlays view the overlay styleguide.

Overlay example chart

Heatfield

Problems and events in charts can be displayed as heatfields. On click, further information is displayed in an interactive overlay. This overlay contains 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

Overload prevention

Dynatrace only shows a maximum of data to protect the system and prevent an overload. Overload preventions will be indicated with a bar. Further information will be displayed in an overlay.

´ 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

Switching metrics

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

Switch metrics

The dt-chart component wraps highcharts to be used within angular.

Imports

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

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

Initialization

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

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 it's own 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 closes or opens
tooltipDataChange EventEmitter<DtChartTooltipEvent | null> Event emitted when the tooltip data changes

Theming

The chart will take a chart color for the series data if no color is specified for the series. If no theme is set the default color palette is used. For charts within themes with no more than 3 series a theme palette is available. For charts with more than 3 series, an ordered list of chart colors is used to ensure enough contrast.

<div dtTheme="purple">
  <dt-chart options="myoptions" series="myseries"></dt-chart>
</div>

Reflow

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

Tooltip

The chart supports adding a tooltip that wraps other angular components. The dt-chart component takes a dt-chart-tooltip component as a content child. The dt-chart-tooltip component needs a 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>

Heatfield

The chart supports adding heatfields. The dt-chart component takes dt-chart-heatfield components as content children. The dt-chart-heatfield component is themeable. By setting the color to main you can use the heatfield in theme color (for example for the overload prevention usecase).

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

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 Wether the heatfield is active
aria-label string The aria label used for the heatfield button
color 'error' | 'main' 'error' Sets the color for the heatfield button

Outputs

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

Examples

Default

´ 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 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), }, ]; } // 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 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), }, ]; } // tslint:enable:no-magic-numbers

Stream example with colors

´ 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

Chart with more than 3 series example

´ 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

Loading example

´ 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

Categorized

´ 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

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), }, ]; }

Line chart with data 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), }, ]; }

Bar chart

´ 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], }, ]; }

Pie chart

´ 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

Donut 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, }, ], }, ]; }

AreaRange 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

Min-Max chart

´ 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, }, ]; }

Heatfield & Overload prevention

´ 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
´ 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

Chart Selection Area

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"> <dt-chart-timestamp aria-label-close="Close the selection" ></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)" > <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; } /** 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" ></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)" > <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; } /** 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), }, ]; }

The chart selection area creates the possibility to select a specific time frame or moment in a chart. The Timestamp is used therefore to select a specific moment on the xAxis of the chart. The Range empowers the user to select a desired time frame between two dates. To apply a valid range on a chart it is important to meet the provided constraints. First of all the selected range has to be larger as 5minutes by default. Furthermore the developer can specify a max constraint as well. Once a range was created the user can resize it by the two handles on the left and right side.

To specify an action inside the overlay that is shown by the selection area you can project a button with the dtChartSelectionAreaAction directive inside the dt-chart-timestamp or dt-chart-range. This empowers the developer to have full control on all actions that should be performed.

The close button that will destroy the selection is mandatory!

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

Furthermore it is possible to have both dt-chart-range and dt-chart-timestamp along side in a chart. This enables the user to either select a moment or a time frame on the x-Axis of the chart.

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

Range

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

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

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 non is set, the range will cap at the borders of the chart.
value [number, number] [0,0] The time frame on the charts xAxis 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 selection are have changed. Emits when the drag is complete. (Not triggered programmatically)
valid BehaviorSubject<boolean> Event emitted when the selection area is valid (greater than the minimum constraint)
Methods
Name Type Description
focus void Focuses the range element

Timestamp

Adding the ability to select one specific moment in a chart with a dt-chart-timestamp.

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

Accessibility

You have to provide meaningful labels to the range 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 xAxis where the timestamp should be placed.
aria-label-selected string '' Aria label for the selected moment.
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)
Methods
Name Type Description
focus void Focuses the timestamp element