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 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, }, }, }, }; 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 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, }, }, }, }; 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 ChartAreaRangeExampleComponent { 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 ChartAreaRangeExampleComponent { 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

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

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

Line chart

Line chart
line: 2px

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.

Min/max chart

Mixed chart

Mixed charts combine different chart types, e.g. a bar chart and a line chart. In mixed charts use a dark shade for the lines to ensure readability. Area charts use bright colors and are moved to the back.

Mixed chart

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.

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

Zooming, panning and interacting in charts

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

Panning

Clicking the arrow buttons on the top left, the chart jumps a whole time interval to the right or left.

Zooming

Zooming in charts is possible via pressing shift + alt + scrolling up or down or using the zoom buttons + and -.

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 the zoom in button use the plus icon, for the zoom out button the minus icon. For the panning buttons use the arrow icon.

Selection area

The selection area component allows us to interact with existing charts. Visit the selection area component page to view further information.

Pin to dashboard

Charts can be pinned to an existing dashboard.

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

No data

If the chart type is a contiguous linear chart type (e.g. line chart, bar chart, area chart) dashed lines are added to the chart. They represent empty data points. This ensures that the series continues without gaps. 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.

No data in area chart
no data in area chart
no data in bar chart
no data in bar chart
No data in line chart
no data in line chart
No data in min max charts
no data in min/max chart

If the chart type is a a non linear chart type empty data will be displayed as text information in legends or in overlays to avoid manipulating the data visualization.

No data in donut chart
no data in donut chart
No data in stacked bar chart
no data in stacked bar chart

The same principles apply to micro charts. To use 0 values and no data properly please visit the micro charts page and have a look at existing Angular components.

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 ChartLoadingExampleComponent { 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 ChartLoadingExampleComponent { 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.

Example with chart

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 fixed with a click. The overlay will appear on the left or right side of the heatfield depending on the available space.

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

Switching metrics

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

Chart tabs

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

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.

Options & Properties

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

Stream example with colors

´ Loading interactive demo...
<dt-chart [options]="options" [series]="series$" loading-text="Loading..."></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 <dt-chart [options]="options" [series]="series$" loading-text="Loading..."></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

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 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, }, }, }, }; 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 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, }, }, }, }; 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 ChartLoadingExampleComponent { 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 ChartLoadingExampleComponent { 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 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 <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 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

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

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 ChartAreaRangeExampleComponent { 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 ChartAreaRangeExampleComponent { 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

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 ChartHeatfieldExampleComponent { 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 ChartHeatfieldExampleComponent { 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 ChartHeatfieldMultipleExampleComponent { 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 ChartHeatfieldMultipleExampleComponent { 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