ChartComponent
The root Chart component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button (click)="toggleLegend()">Toggle Legend</button>
<button (click)="toggleSeries()">Toggle Series</button>
<kendo-chart>
<kendo-chart-legend [visible]="legendVisible">
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item *ngIf="seriesVisible" name="Series #1"
type="line" [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public legendVisible: boolean = true;
public seriesVisible: boolean = true;
public toggleSeries(): void {
this.seriesVisible = !this.seriesVisible;
}
public toggleLegend(): void {
this.legendVisible = !this.legendVisible;
}
}Selector
kendo-chart
Export Name
Accessible in templates as #kendoChartInstance="kendoChart"
Inputs
axisDefaults AxisDefaults
The default options for all Chart axes. Accepts the options which are supported by
categoryAxis,
valueAxis,
xAxis,
and yAxis.
categoryAxis CategoryAxis | CategoryAxis[]
The configuration options of the category axis.
chartArea ChartArea
The configuration options of the Chart area.
Represents the entire visible area of the Chart.
legend Legend
The configuration options of the Chart legend.
panes Pane[]
The configuration of the Chart panes.
Panes are used to split the Chart into two or more parts. The panes are ordered from top to bottom.
To associate each axis with a pane, set its pane option to the name of the desired pane.
Axis that do not have a specified pane are placed in the top (default) pane.
To move a series to the desired pane, associate them with an axis.
pannable boolean | DragAction
Specifies if the Chart can be panned.
plotArea PlotArea
The configuration options of the plot area.
The plot area is the area which displays the series.
renderAs "svg" | "canvas"
Sets the preferred rendering engine.
If not supported by the browser, the Chart switches to the first available mode.
The supported values are:
-
"svg"—If available, renders the component as an inline.svgfile. -
"canvas"—If available, renders the component as acanvaselement.
resizeRateLimit number
Limits the automatic resizing of the Chart. Sets the maximum number of times per second
that the component redraws its content when the size of its container changes.
Defaults to 10. To disable the automatic resizing, set it to 0.
@Component({
selector: 'my-app',
template: `
<kendo-chart [resizeRateLimit]="2">
<!-- ^^^^^^^^^^^^^^^^^^^^^^
Will update the size of the Chart up to two times a second.
Resize the Plunkr pane or window to try it out.
-->
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
seriesData: number[] = [1, 2, 3, 5];
}series Series[]
The configuration of the Chart series.
The series type is determined by the value of the type field.
If a type value is missing, the Chart renders the type that is
specified in seriesDefaults.
Some options accept functions as arguments. These arguments are evaluated for each point
which is supplied as a parameter. If no value is returned, the Chart uses the theme or
seriesDefaults values.
seriesColors string[]
The default colors for the Chart series.
When all colors are used, new colors are pulled from the start again.
seriesDefaults SeriesDefaults
The default options of all series.
title string | Title
The configuration options or the text of the Chart title.
tooltip Tooltip
The configuration options of the Chart series tooltips.
The tooltip of the Chart series is displayed when the
tooltip.visible option is set to true.
transitions boolean
If set to true, the Chart plays animations when it displays the series.
By default, animations are enabled.
valueAxis ValueAxis | ValueAxis[]
The configuration options of the value axis.
xAxis XAxis | XAxis[]
The configuration options of the Scatter Chart X-axis.
Supports all valueAxis options.
yAxis YAxis | YAxis[]
The configuration options of the Scatter Chart Y-axis.
Supports all valueAxis options.
zoomable boolean | Zoomable
Specifies if the Chart can be zoomed.
Fields
surface Surface
The Drawing Surface of the Chart.
Events
axisLabelClick EventEmitter<AxisLabelClickEvent>
Fires when the user clicks an axis label (see example).
drag EventEmitter<DragEvent>
Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
dragEnd EventEmitter<DragEndEvent>
Fires when the user stops dragging the Chart.
dragStart EventEmitter<DragStartEvent>
Fires when the user starts dragging the Chart.
legendItemClick EventEmitter<LegendItemClickEvent>
Fires when a legend item is clicked before the selected series visibility is toggled.
Can be prevented.
legendItemHover EventEmitter<LegendItemHoverEvent>
Fires when the user hovers over a legend item (see example).
noteClick EventEmitter<NoteClickEvent>
Fires when the user clicks a note.
noteHover EventEmitter<NoteHoverEvent>
Fires when the user hovers over a note.
paneRender EventEmitter<PaneRenderEvent>
Fires when a pane is rendered because the Chart:
- Is rendered.
- Performs panning or zooming.
- Is exported with different options. The event is used to render custom visuals in the panes.
plotAreaClick EventEmitter<PlotAreaClickEvent>
Fires when the user clicks the plot area (see example).
The click event is triggered by the tap and contextmenu events.
To distinguish between the original events, inspect the e.originalEvent.type field.
plotAreaHover EventEmitter<PlotAreaHoverEvent>
Fires when the user hovers the plot area (see example).
render EventEmitter<RenderEvent>
Fires when the Chart is ready to render on screen (see example).
For example, you can use it to remove loading indicators.
Any changes made to the options are ignored.
select EventEmitter<SelectEvent>
Fires when the user modifies the selection.
The range units are:
- Generic axis—Category index (0-based).
- Date axis—Date instance.
selectEnd EventEmitter<SelectEndEvent>
Fires when the user completes the modification of the selection.
The range units are:
- Generic axis—Category index (0-based).
- Date axis—Date instance.
selectStart EventEmitter<SelectStartEvent>
Fires when the user starts modifying the axis selection.
The range units are:
- Generic axis—Category index (0-based).
- Date axis—Date instance.
seriesClick EventEmitter<SeriesClickEvent>
Fires when the user clicks the Chart series.
The click event will be triggered by the tap and contextmenu events (see example).
To distinguish between the original events, inspect the e.originalEvent.type field.
seriesHover EventEmitter<SeriesHoverEvent>
Fires when the user hovers the Chart series (see example).
zoom EventEmitter<ZoomEvent>
Fires as long as the user is zooming the Chart by using the mousewheel operation.
zoomEnd EventEmitter<ZoomEndEvent>
Fires when the user stops zooming the Chart.
zoomStart EventEmitter<ZoomStartEvent>
Fires when the user uses the mousewheel to zoom the Chart.
Methods
exportImage
Exports the Chart as an image. The export operation is asynchronous and returns a promise.
Parameters
options ImageExportOptions
The parameters for the exported image.
Returns
Promise
exportSVG
Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise.
Parameters
options SVGExportOptions
Parameters for the exported file
Returns
Promise
exportVisual
Exports the Chart as a Drawing Scene.
Parameters
options any
The parameters for the export operation.
Returns
Group - The root Group of the scene.
findAxisByName
Returns the axis with the specified name.
Parameters
name string
The axis name.
Returns
ChartAxis - The axis with a corresponding name.
findPaneByIndex
Returns the pane at the specified index.
Parameters
index number
The pane index.
Returns
ChartPane - The pane at the specified index.
findPaneByName
Returns the pane with the specified name.
Parameters
name string
The name of the pane.
Returns
ChartPane - The pane with the provided name.
getPlotArea
Returns the plot area of the Chart.
Returns
ChartPlotArea - The plot area of the Chart.
hideTooltip
Hides the tooltip of the Chart.
resize
Detects the size of the container and redraws the Chart.
Resizing is automatic unless you set the resizeRateLimit option to 0.
showTooltip
Shows the Chart tooltip of a specific point or the shared tooltip of a specific category.
Parameters
filter number | string | Date | (point: SeriesPoint) => boolean
The category for a shared tooltip or a function which will be called for each point until the function returns true.
toggleHighlight
Highlights the series points or the segments of a Pie, Donut, or Funnel charts.
In the following example, the callback is evaluated for each data point.
If the function returns true, the point is highlighted.
import { Component, ViewChild } from '@angular/core';
import { PlotBand, ChartComponent } from '@progress/kendo-angular-charts';
@Component({
selector: 'my-app',
template: `
<button (click)="toggleHighlight()">Toggle highlight for Google</button>
<kendo-chart #chart>
<kendo-chart-series>
<kendo-chart-title text="Job Growth"></kendo-chart-title>
<kendo-chart-series-item type="bubble" [data]="data"
xField="x" yField="y" sizeField="size" categoryField="category">
</kendo-chart-series-item>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [axisCrossingValue]="-5000" [majorUnit]="2000" [plotBands]="xPlotBands">
<kendo-chart-x-axis-item-labels format="{0:N0}" [skip]="1" rotation="auto">
</kendo-chart-x-axis-item-labels>
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item [labels]="{ format: '{0:N0}' }">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<kendo-chart-tooltip format="{3}: {2:N0} applications" [opacity]="1">
</kendo-chart-tooltip>
<kendo-chart-legend [visible]="false">
</kendo-chart-legend>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
xPlotBands: PlotBand[] = [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}];
public data: any = [{
x: -2500,
y: 50000,
size: 500000,
category: "Microsoft"
}, {
x: 500,
y: 110000,
size: 7600000,
category: "Starbucks"
}, {
x: 7000,
y: 19000,
size: 700000,
category: "Google"
}, {
x: 1400,
y: 150000,
size: 700000,
category: "Publix Super Markets"
}, {
x: 2400,
y: 30000,
size: 300000,
category: "PricewaterhouseCoopers"
}, {
x: 2450,
y: 34000,
size: 90000,
category: "Cisco"
}, {
x: 2700,
y: 34000,
size: 400000,
category: "Accenture"
}, {
x: 2900,
y: 40000,
size: 450000,
category: "Deloitte"
}, {
x: 3000,
y: 55000,
size: 900000,
category: "Whole Foods Market"
}];
@ViewChild('chart')
chart: ChartComponent;
private active: boolean = false;
toggleHighlight(): void {
this.active = !this.active;
this.chart.toggleHighlight(this.active, (p) => p.category === 'Google');
}
}Parameters
show boolean
A Boolean value that indicates whether the highlight is shown or hidden.
filter string | { category: string; series: string; } | (point: SeriesPoint) => boolean
A string that represents the series or category name, an object with the series and category name, or a function which will be called for each point. The function should return true for the points for which the highlight is toggled.