Chart

The chart component represents one or more metrics over time.

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartDefaultExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; 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 export class ChartDefaultExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; 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 types

Area chart

Area chart

Bar chart

Bar chart
Stacked bar chart
Horizontal bar chart

Donut or pie chart

In donut charts the visualization of the legend can vary.

Donut chart

Donut chart

Donut chart

Pie chart

Line chart

Line chart
line: 2px

Min/Max chart

The min/max chart shows the area between min and max value. The average or median is represented by a line. It can be combined with a bar chart. Therefore, it gets multiplied with the background.

Min/max chart

Mixed chart

In mixed charts use a dark shade for the lines, to ensure readability. Area charts are drawn in a bright colors and moved to the back.

Mixed chart

Chart legend

Click on chart legend

If there is more than one metric in a chart, clicking a chart legend can toggle the metric in the chart.

Disabled chart legend

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.

Disabled chart legend
font-color: $gray-300, icon-color: $gray-300

Legend icons

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

Chart colors

Up to 3 metrics

If there are not more than 3 metrics in the chart, use the basic 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

Behavior

Zooming and panning in charts

On hover, the zooming and dragging buttons appear in the upper left corner of the chart.

Panning behavior

On click and drag the cursor changes from the default one to a horizontal move cursor (ew-resize), the user can drag the chart to the left and right. Clicking the arrow buttons on the top left, the chart jumps a whole time interval to the right or left.

Zooming behavior

Zooming in charts is possible via pressing shift + alt + scrolling up or down. On click of the zoom buttons + and -, to the selected time.

Zooming and panning in charts
Zooming and panning buttons
x: 8px, y: 28px, icon: 20px

Please have a look at the style of the secondary button for hover and disabled states. For zooming in, use the plus icon, for zooming out the minus icon. For panning to the left and right, use the arrow icon.

Switching displayed metrics

The metrics displayed in the chart can be switched by tabs.

Loading chart values

Loading chart

Have a look at the loading distractor for details.

Chart overlays

Example with chart

For the styling of chart overlays view the overlay styleguide.

Heatfields (optional)

Problems and events in charts can be displayed as heatfields. On hover, further information is displayed in an interactive overlay. This overlay contains a short description and a link. It can be fixated with a click. The overlay will appear on the left- or right side of the heatfield.

Chart with heat field

Default

Heatfields default

height: 8px
fill: $red-500
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px

Hover

Heatfields hover

fill: $red-600
outline: 2px solid white

Selected

Heatfields selected

x: 8px
height: 12px
fill: $red-700
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px
chart-background: $red-100 //heatfield area only

Interactive Overlay

Chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartDefaultExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; 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 export class ChartDefaultExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; 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

This 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:

Options & Properties

Name Type Default Description
@Input() 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
@Input() series Observable<Highcharts.IndividualSeriesOptions[]> | Highcharts.IndividualSeriesOptions[] | undefined undefined Sets the series of the chart. The type can either be a stream of series data for continues updates or a static array.
@Output() updated EventEmitter<void> Event emitted when the chart options or series are updated

Methods

Name Description Return value
getSeries Gets the series currently used in the chart DtChartSeries
getAllIds returns all series ids used in the chart Array<string>

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 for good contrast is used.

Example:


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

Reflow

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

Examples

Stream example with colors

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series$"></dt-chart> export class ChartStreamExampleComponent { 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 export class ChartStreamExampleComponent { 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} ${this.y}`; }, }, }; series$: Observable; 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> export class ChartOrderdColorsExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; 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 export class ChartOrderdColorsExampleComponent { 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, }, }, }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; 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"></dt-chart> export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.ROYALBLUE_700, data: generateData(40, 0, 20, 1370304000000, 900000), }]; this.series = !this.series ? dummyData : null; } } // tslint:enable:no-magic-numbers export class ChartLoadingExampleComponent { options: Highcharts.Options = { xAxis: { type: 'datetime', }, yAxis: [ { title: null, labels: { format: '{value}', }, tickInterval: 10, }, ], tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; series: DtChartSeries[] | null; toggleData(): void { const dummyData = [{ name: 'Failure rate', type: 'line', color: Colors.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> export class ChartCategorizedExampleComponent { 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 export class ChartCategorizedExampleComponent { 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} ${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

Pie chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartPieExampleComponent { 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 export class ChartPieExampleComponent { options: Highcharts.Options = { chart: { type: 'pie', }, tooltip: { formatter(): string | boolean { return `${this.key} ${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

AreaRange chart

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series"></dt-chart> export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, tooltip: { formatter(): string | boolean { return `${this.series.name}&nbsp${this.y}`; }, }, }; 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 export class ChartAreaRangeExampleComponent { options: Highcharts.Options = { chart: { type: 'arearange', }, xAxis: { type: 'datetime', }, tooltip: { formatter(): string | boolean { return `${this.series.name} ${this.y}`; }, }, }; 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