kendo.dataviz.ui.Chart
Edit this docNo results. Try clearing the filter.
If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the
data source is fired. By default the widget will bind to the data source specified in the configuration.
Setting autoBind to false is useful when multiple widgets are bound to the same data source. Disabling automatic binding ensures that the shared data source doesn't make more than one request to the remote service.
Example - disable automatic binding
<div id="chart"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/stockdata",
dataType: "jsonp"
}
}
});
$("#chart").kendoChart({
autoBind: false,
dataSource: dataSource,
series: [
{ field: "Volume" }
]
});
dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
</script>
The default options for all chart axes. Accepts the options supported by categoryAxis, valueAxis, xAxis and yAxis.
Example - set the default axis options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
axisDefaults: {
categories: [ "2012", "2013"]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The category axis configuration options.
Example - configure the category axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
categories: ["2012", "2013"],
color: "#ff0000"
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The discrete categoryAxis.baseUnitStep values when
either categoryAxis.baseUnit is set to "fit" or
categoryAxis.baseUnitStep is set to "auto".
Example - set category axis auto base unit steps
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/02/01 00:00:00"),
new Date("2012/02/02 00:00:00"),
new Date("2012/02/20 00:00:00")
],
baseUnitStep: "auto",
autoBaseUnitSteps: {
days: [3]
}
}
});
</script>
The years unit steps.
Example
Category index at which the first value axis crosses this axis (when set as an object).
Category indices at which the value axes cross the category axis (when set as an array).
set an index greater than or equal to the number of categories to denote the far end of the axis.
Example - set the category axis crossing values
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
axisCrossingValue: [0, 10]
},
valueAxis: [{}, {}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The base time interval for the date axis. The default base unit is determined automatically from the minimum difference
between subsequent categories.
The supported values are:
- "days"
- "fit"
- "hours"
- "minutes"
- "months"
- "weeks"
- "years"
Setting baseUnit to "fit" will set such base unit and categoryAxis.baseUnitStep
that the total number of categories does not exceed categoryAxis.maxDateGroups.
Series data is aggregated for the specified base unit using the series.aggregate function.
The step (interval) between categories in base units. Setting it to "auto" will set the step to such value
that the total number of categories does not exceed categoryAxis.maxDateGroups.
This option is ignored if categoryAxis.baseUnit is set to "fit".
The category names. The chart will create a category for every item of the array.
Example - set the categories
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb. Can be overridden by categoryAxis.labels.color and
categoryAxis.line.color.
Example - set the category axis color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
color: "#aa00bb"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
color: "rgb(128, 0, 255)"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
color: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The crosshair configuration options.
Example - set the category axis crosshair options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
color: "green",
width: 2,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis crosshair color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
color: "green",
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The dash type of the crosshair.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category crosshair line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
dashType: "dashDot",
visible: true
}
},
series: [
{
type: "line",
data: [1, 2, 3]
}
]
});
</script>
The opacity of the crosshair. By default the crosshair is opaque.
Example - set the category axis crosshair opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
opacity: 0.1,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The crosshar tooltip options.
Example - configure the category axis crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
background: "green",
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{
type: "line",
data: [1, 2, 3]
}
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis crosshair tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
background: "green",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The border options.
Example - set the category axis crosshair tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis crosshair tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis crosshair tooltip border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
border: {
dashType: "dashDot",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the category axis crosshair tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
border: {
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis crosshair tooltip color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
color: "#aa00bb",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
Example - set the category axis crosshair tooltip color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
color: "rgb(128, 0, 255)",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
Example - set the category axis crosshair tooltip color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
color: "green",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The tooltip font.
Example - set the category axis crosshair tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
font: "20px sans-serif",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The format used to display the tooltip. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set the category axis crosshair tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
format: "Year: {0}",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The padding of the crosshair tooltip. A numeric value will set all paddings.
Example - set the category axis crosshair tooltip padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
padding: 20,
visible: true
},
visible: true
}
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the crosshair tooltip.
Example - set the category axis crosshair tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
padding: {
bottom: 20
},
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the crosshair tooltip.
Example - set the category axis crosshair tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
padding: {
left: 20
},
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the crosshair tooltip.
Example - set the category axis crosshair tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
padding: {
right: 20
},
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the crosshair tooltip.
Example - set the category axis crosshair tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
padding: {
top: 20
},
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
- value - the category value
Example - set the category axis crosshair tooltip template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
template: "Year: #: value #",
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis crosshair tooltip template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
crosshair: {
tooltip: {
template: kendo.template("Year: #: value #"),
visible: true
},
visible: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis crosshair tooltip. By default the category axis crosshair tooltip is not visible.
Example - show the category axis crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
tooltip: {
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis crosshair. By default the category axis crosshair is not visible.
Example - show the category axis crosshair
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The width of the crosshair in pixels.
Example - set the category axis crosshair width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
crosshair: {
width: 2,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The data item field which contains the category name. Requires the dataSource option to be set.
Example - set the category axis field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
field: "year"
},
series: [
{ field: "value" }
],
dataSource: [
{ year: "2012", value: 1 },
{ year: "2013", value: 2 }
]
});
</script>
If set to true the chart will position categories and series points on major ticks. This removes the empty space before and after the series.
This option is ignored if the series.type option is set to "bar", "column", "ohlc" or "candlestick".
Example - justify categories and series
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
justified: true,
categories: ["2012", "2013"]
}],
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The axis labels configuration.
Example - configure the category axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
background: "green",
color: "white"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis label background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
background: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis label background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
background: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis label background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the labels.
Example - set the category axis label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
border: {
color: "green",
dashType: "dashDot",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis label border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
border: {
color: "green",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
border: {
dashType: "dashDot",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the category axis label border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
border: {
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
labels: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The format used to display the labels when the categories are dates. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set category axis date formats
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
labels: {
dateFormats: {
days:"M-d"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The format used when categoryAxis.baseUnit is set to "days".
Example - set the days format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
baseUnit: "days",
labels: {
dateFormats: {
days: "M-d"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The format used when categoryAxis.baseUnit is set to "hours".
Example - set the hours format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
baseUnit: "hours",
labels: {
dateFormats: {
hours: "HH mm"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The format used when categoryAxis.baseUnit is set to "months".
Example - set the months format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
baseUnit: "months",
labels: {
dateFormats: {
months: "MMM-yy"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The format used when categoryAxis.baseUnit is set to "weeks".
Example - set the weeks format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
baseUnit: "weeks",
labels: {
dateFormats: {
weeks: "M-d"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The format used when categoryAxis.baseUnit is set to "years".
Example - set the years format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02")
],
type: "date",
baseUnit: "years",
labels: {
dateFormats: {
years: "yy"
}
}
},
series: [{
data: [1,2,3]
}]
});
</script>
The font style of the labels.
Example - set the category axis label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
font: "20px sans-serif",
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set the category axis label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
format: "Year: {0}"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the labels. A numeric value will set all margins.
Example - set the category axis label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
margin: 20
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the labels.
Example - set the category axis label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
margin: {
bottom: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the labels.
Example - set the category axis label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
margin: {
left: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the labels.
Example - set the category axis label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
margin: {
right: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the labels.
Example - set the category axis label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
margin: {
top: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will mirror the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.
Example - mirror the category axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
mirror: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the labels. A numeric value will set all paddings.
Example - set the category axis label padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
padding: 20
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the labels.
Example - set the category axis label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
padding: {
bottom: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the labels.
Example - set the category axis label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
padding: {
left: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the labels.
Example - set the category axis label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
padding: {
right: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the labels.
Example - set the category axis label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
padding: {
top: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The rotation angle of the labels. By default the labels are not rotated.
Example - rotate the category axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
rotation: 90
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The number of labels to skip. By default no labels are skipped.
Example - skip category axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
skip: 1
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The label rendering step - render every n-th label. By default every label is rendered.
Example - render every odd category axis label
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
step: 2
},
categories: ["2011", "2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the labels.
The fields which can be used in the template are:
- value - the category value
Example - set the category axis template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
template: "Year: #: value #"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
template: kendo.template("Year: #: value #")
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis labels. By default the category axis labels are visible.
Example - hide the category axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
labels: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
Example - configure the category axis line
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
line: {
color: "#aa00bb",
width: 3
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the lines. Accepts a valid CSS color string, including hex and rgb.
Setting the color option affects the major and minor ticks, but not the grid lines.
Example - set the category axis line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
line: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
line: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
line: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the line.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
line: {
dashType: "dashDot"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis lines. By default the category axis lines are visible.
Example - hide the category axis lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
line: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the line in pixels. Also affects the major and minor ticks, but not the grid lines.
Example - set the category axis line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
line: {
width: 3
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.
Example - configure the category axis major grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorGridLines: {
width: 3,
color: "green"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the major grid lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis major grid line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorGridLines: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis major grid line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorGridLines: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis major grid line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorGridLines: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the major grid lines.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis major grid line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorGridLines: {
dashType: "dashDot"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the major grid lines. By default the major grid lines are visible.
Example - hide the category axis major grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorGridLines: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the category axis major grid lines in pixels.
Example - set the category axis major grid lines width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorGridLines: {
width: 3
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the category axis major ticks.
Example - configure the category axis major ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorTicks: {
size: 6,
color: "green",
width: 5
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the category axis major ticks lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis major ticks color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorTicks {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis major ticks color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorTicks {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis major ticks color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
majorTicks {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The length of the tick line in pixels.
Example - set the category axis major ticks size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorTicks: {
size: 6
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis major ticks. By default the category axis major ticks are visible.
Example - hide the category axis major ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorTicks: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the major ticks in pixels.
Example - set the category axis major ticks width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
majorTicks: {
width: 3
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The last date displayed on the category date axis. By default, the minimum date is the same as the last category.
This is often used in combination with the categoryAxis.min and categoryAxis.roundToBaseUnit options to
set up a fixed date range.
The first date displayed on the category date axis. By default, the minimum date is the same as the first category.
This is often used in combination with the categoryAxis.min and categoryAxis.roundToBaseUnit options to
set up a fixed date range.
The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the
body of the chart.
Example - configure the category axis minor grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorGridLines: {
width: 3,
color: "green"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the minor grid lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis minor grid line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorGridLines: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis minor grid line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorGridLines: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis minor grid line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorGridLines: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the minor grid lines.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis minor grid line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorGridLines: {
dashType: "dashDot"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the minor grid lines. By default the minor grid lines are visible.
Example - hide the category axis minor grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorGridLines: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the category axis minor grid lines in pixels.
Example - set the category axis minor grid lines width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorGridLines: {
width: 3
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the category axis minor ticks.
Example - configure the category axis minor ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorTicks: {
size: 6,
color: "green",
width: 5
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the category axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis minor ticks color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorTicks {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis minor ticks color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorTicks {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis minor ticks color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
minorTicks {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The length of the tick line in pixels.
Example - set the category axis minor ticks size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorTicks: {
size: 6
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis minor ticks. By default the category axis minor ticks are visible.
Example - hide the category axis minor ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorTicks: {
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the minor ticks in pixels.
Example - set the category axis minor ticks width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
minorTicks: {
width: 3
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The unique axis name. Used to associate a series with a category axis using the series.categoryAxis option.
Example - set the category axis name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [
{ name: "month", categories: [ "Jan", "Feb" ] },
{ name: "year", categories: [ 2012 ] }
],
series: [
{ categoryAxis: "month", data: [1, 2, 3] }
]
});
</script>
The name of the pane that the category axis should be rendered in.
The axis will be rendered in the first (default) pane if not set.
Example - set the category axis pane
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1,2,3] },
{ data: [1,2,3,4],
axis: "secondValueAxis",
categoryAxis: "secondCategoryAxis"
}
],
panes:[
{ name: "topPane" },
{ name: "bottomPane" }
],
valueAxis: [
{ pane: "topPane" },
{ name: "secondValueAxis", pane: "bottomPane" }
],
categoryAxis: [
{ pane: "topPane" },
{ name: "secondCategoryAxis", pane: "bottomPane" }
]
});
</script>
The plot bands of the category axis.
Example - set the category plot bands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the plot band.
Example - set the category plot band color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The start position of the plot band in axis units.
Example - set the category plot band start position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The opacity of the plot band.
Example - set the category plot band opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
plotBands: [
{ from: 1, to: 2, color: "red", opacity: 0.5 }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The end position of the plot band in axis units.
Example - set the category plot band end position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the category axis direction will be reversed. By default categories are listed from left to right and from bottom to top.
Example - reverse the category axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
reverse: true
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will round the first and last date to the nearest base unit.
The roundToBaseUnit option will be ignored if series.type is set to "bar", "column", "ohlc" or "candlestick".
The selected axis range. If set, axis selection will be enabled.
The range units are:
- Category index (0-based)
- Date
Example - configure category axis selection
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
max: 3
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The lower boundary of the selected range.
Example - set the category axis selection lower boundary
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The maximum value which the user can select.
The category with the specified index (date) is not included in the selected range
unless the axis is justified. In order to select all categories set
a value larger than the last category index (date).
Example - set the category axis selection maximum
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
max: 3
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The minimum value which the user can select.
Example - set the category axis selection minimum
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
min: 1
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The mouse wheel configuration of the selection.
Example - configure the category axis selection mouse wheel behavior
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
mousewheel: {
reverse: false,
zoom: "left"
}
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
If set to true will reverse the mouse wheel direction. The normal direction is down for "zoom out", up for "zoom in".
Example - disable reverse mouse wheel selection
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
mousewheel: {
reverse: false
}
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The zoom direction.
The supported values are:
"both" - zooming expands and contracts the selection both sides
"left" - zooming expands and contracts the selection left side only
"right" - zooming expands and contracts the selection right side only
Example - set the category axis selection zoom
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2,
mousewheel: {
zoom: "left"
}
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The upper boundary of the selected range.
The category with the specified index (date) is not included in the selected range
unless the axis is justified. In order to select all categories set
a value larger than the last category index (date).
Example - set the category axis selection lower boundary
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
select: {
from:1,
to: 2
}
},
series: [
{ data: [1, 2, 3, 4] }
]
});
</script>
The title configuration of the category axis.
Example - set the category axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
title: {
text: "Years",
background: "green",
border: {
width: 1,
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis title background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
title: {
text: "Years",
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the title.
Example - set the category axis title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
border: {
color: "green",
dashType: "dashDot",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
border: {
color: "green",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the category axis title border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
border: {
dashType: "dashDot",
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the category axis title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
border: {
width: 1
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the category axis title color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
title: {
text: "Years",
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis title color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
title: {
text: "Years",
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the category axis title color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [ "2012", "2013"],
title: {
text: "Years",
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The font style of the title.
Example - set the category axis title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
font: "20px sans-serif",
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the title. A numeric value will set all margins.
Example - set the category axis title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
margin: 20
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the title.
Example - set the category axis title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
margin: {
bottom: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the title.
Example - set the category axis title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
margin: {
left: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the title.
Example - set the category axis title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
margin: {
right: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the title.
Example - set the category axis title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
margin: {
top: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the title. A numeric value will set all paddings.
Example - set the category axis title padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
padding: 20
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the title.
Example - set the category axis title bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
padding: {
bottom: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the title.
Example - set the category axis title left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
padding: {
left: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the title.
Example - set the category axis title right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
padding: {
right: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the title.
Example - set the category axis title top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
padding: {
top: 20
}
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The position of the title.
The supported values are:
- "top" - the axis title is positioned on the top (applicable to vertical axis)
- "bottom" - the axis title is positioned on the bottom (applicable to vertical axis)
- "left" - the axis title is positioned on the left (applicable to horizontal axis)
- "right" - the axis title is positioned on the right (applicable to horizontal axis)
- "center" - the axis title is positioned in the center
Example - set the category axis title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: ["2012", "2013"],
title: {
text: "Years",
position: "left"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The rotation angle of the title. By default the title is not rotated.
Example - rotate the category axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years",
rotation: 90
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text of the title.
Example - set the category axis title text
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years"
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis title. By default the category axis title is visible.
Example - hide the category axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: [{
title: {
text: "Years"
visible: false
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The category axis type.
The supported values are:
Example - set the category axis type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2011/12/20"),
new Date("2011/12/21")
],
type: "date"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the category axis. By default the category axis is visible.
Example - hide the category axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2011/12/20"),
new Date("2011/12/21")
],
visible: false
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The week start day when categoryAxis.baseUnit is set to "weeks".
The supported values are:
- kendo.days.Sunday - equal to 0
- kendo.days.Monday - equal to 1
- kendo.days.Tuesday - equal to 2
- kendo.days.Wednesday - equal to 3
- kendo.days.Thursday - equal to 4
- kendo.days.Friday - equal to 5
- kendo.days.Saturday - equal to 6
The chart area configuration options. Represents the entire visible area of the chart.
The background color of the chart area. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart area background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
background: "#aa00bb"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the chart area background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
background: "rgb(128, 0, 255)"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the chart area background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
background: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the chart area.
Example - set the chart area border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart area border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart area border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
border: {
width: 2,
dashType: "dashDot"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart area border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The height of the chart area.
Example - set the chart area height
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
height: 200
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the chart area. A numeric value will set all margins.
Example - set the chart area margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
margin: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the chart area.
Example - set the chart area bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
margin: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the chart area.
Example - set the chart area left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
margin: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the chart area.
Example - set the chart area right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
margin: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the chart area.
Example - set the chart area top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
margin: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background opacity of the chart area. By default the background is opaque.
Example - set the chart area opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
background: "green",
opacity: 0.1
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the chart area.
Example - set the chart area width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
chartArea: {
width: 500
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The data source of the chart which is used to display the series. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.DataSource
instance.
If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.DataSource instance using that value as data source configuration.
If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.
Example - set dataSource as a JavaScript object
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: {
data: [
{ price: 10 },
{ price: 20 }
]
},
series: [
{ field: "price" }
]
});
</script>
Example - set dataSource as a JavaScript array
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: [
{ price: 10 },
{ price: 20 }
],
series: [
{ field: "price" }
]
});
</script>
Example - set dataSource as an existing kendo.data.DataSource instance
<div id="chart"></div>
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.kendoui.com/service/stockdata",
dataType: "jsonp"
}
}
});
$("#chart").kendoChart({
dataSource: dataSource,
series: [
{ field: "Volume" }
]
});
</script>
The chart legend configuration options.
Example - configure the chart legend
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
background: "green",
position: "left",
labels: {
font: "20px sans-serif",
color: "red"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The background color of the legend. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart legend background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
background: "#aa00bb"
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend background as a RGB value
$("#chart").kendoChart({
legend: {
background: "rgb(128, 0, 255)"
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend background by name
$("#chart").kendoChart({
legend: {
background: "green"
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The border of the legend.
Example - set the chart legend border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
border: {
width: 2,
color: "green"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart legend border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
border: {
width: 2,
color: "green"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart legend border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
border: {
width: 2,
dashType: "dashDot"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart legend border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
border: {
width: 2
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The chart inactive legend items configuration.
Example - configure the chart legend inactive items
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
background: "green",
color: "white"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The chart legend label configuration.
Example - configure the chart legend labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
background: "green",
color: "white"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart legend label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
color: "#aa00bb"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
color: "rgb(128, 0, 255)"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
color: "green"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The font style of the labels.
Example - set the chart legend label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: {
labels: {
font: "20px sans-serif"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The template which renders the labels.
The fields which can be used in the template are:
- text - the text the legend item.
- series - the data series.
- value - the point value. (only for donut and pie charts)
- percentage - the point value represented as a percentage value. (only for donut and pie charts)
- dataItem - the original data item used to construct the point. (only for donut and pie charts)
Example - set the chart legend label template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
template: "Name: #: text #"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
template: kendo.template("Name: #: text #")
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The chart legend label configuration.
Example - configure the chart legend labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
background: "green",
color: "white"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart legend label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
color: "#aa00bb"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
color: "green"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The font style of the labels.
Example - set the chart legend label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
font: "20px sans-serif"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The margin of the labels. A numeric value will set all margins.
Example - set the chart legend label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
margin: 20
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The bottom margin of the labels.
Example - set the chart legend label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
margin: {
bottom: 20
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The left margin of the labels.
Example - set the chart legend label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
margin: {
left: 20
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The right margin of the labels.
Example - set the chart legend label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
margin: {
right: 20
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The top margin of the labels.
Example - set the chart legend label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
margin: {
top: 20
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The template which renders the labels.
The fields which can be used in the template are:
- text - the text the legend item.
- series - the data series.
- value - the point value. (only for donut and pie charts)
- percentage - the point value represented as a percentage value. (only for donut and pie charts)
- dataItem - the original data item used to construct the point. (only for donut and pie charts)
Example - set the chart legend label template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
template: "Name: #: text #"
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
Example - set the chart legend label template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
labels: {
template: kendo.template("Name: #: text #")
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The margin of the chart legend. A numeric value will set all paddings.
Example - set the chart legend margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
margin: 20
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The bottom margin of the chart legend.
Example - set the chart legend bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
margin: {
bottom: 20
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The left margin of the chart legend.
Example - set the chart legend left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
margin: {
left: 20
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The right margin of the chart legend.
Example - set the chart legend right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
margin: {
right: 20
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The top margin of the chart legend.
Example - set the chart legend top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
margin: {
top: 20
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The X offset of the chart legend. The offset is relative to the default position of the legend.
For instance, a value of 20 will move the legend 20 pixels to the right of its initial position.
A negative value will move the legend to the left of its current position.
Example - set the chart legend horizontal offset
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
offsetX: 10
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The Y offset of the chart legend. The offset is relative to the current position of the legend.
For instance, a value of 20 will move the legend 20 pixels down from its initial position.
A negative value will move the legend upwards from its current position.
Example - set the chart legend vertical offset
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
offsetY: 10
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The positions of the chart legend.
The supported values are:
"top" - the legend is positioned on the top.
"bottom" - the legend is positioned on the bottom.
"left" - the legend is positioned on the left.
"right" - the legend is positioned on the right.
"custom" - the legend is positioned using legend.offsetX and legend.offsetY.
If set to true the chart will display the legend. By default the chart legend is visible.
Example - hide the legend
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
visible: false
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
The chart panes configuration.
Panes are used to split the chart in two or more parts. The panes are ordered from top to bottom.
Each axis can be associated with a pane by setting its pane option to the name of the desired pane.
Axis that don't have specified pane are placed in the top (default) pane.
Series are moved to the desired pane by associating them with an axis.
Example - configure the chart panes
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane" },
{ name: "bottom-pane" }
]
});
</script>
The background color of the chart pane. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart panes background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", background: "#00ff00" },
{ name: "bottom-pane", background: "#ff00ff" }
]
});
</script>
Example - set the chart panes background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", background: "rgb(0, 255, 0)" },
{ name: "bottom-pane", background: "rgb(255, 0, 255)" }
]
});
</script>
Example - set the chart panes background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", background: "red" },
{ name: "bottom-pane", background: "green" }
]
});
</script>
The border of the chart pane.
Example - set the chart pane border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
border: {
color: "red",
width: 2
}
},
{ name: "bottom-pane",
border: {
color: "green",
width: 2
}
}
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart pane border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
border: {
color: "red",
width: 2
}
},
{ name: "bottom-pane",
border: {
color: "green",
width: 2
}
}
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart pane border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
border: {
dashType: "dashDot",
width: 2
}
},
{ name: "bottom-pane",
border: {
dashType: "dashDot",
width: 2
}
}
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart pane border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
border: {
width: 2
}
},
{ name: "bottom-pane",
border: {
width: 2
}
}
]
});
</script>
The chart pane height in pixels.
Example - set the chart pane height
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", height: 200 },
{ name: "bottom-pane", height: 300 }
]
});
</script>
The margin of the pane. A numeric value will set all margins.
Example - set the chart pane margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", margin: 10 },
{ name: "bottom-pane", margin: 10 }
]
});
</script>
The bottom margin of the chart panes.
Example - set the chart pane bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
margin: {
bottom: 10
}
},
{
name: "bottom-pane",
margin: {
bottom: 10
}
}
]
});
</script>
The left margin of the chart panes.
Example - set the chart pane left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
margin: {
left: 10
}
},
{
name: "bottom-pane",
margin: {
left: 10
}
}
]
});
</script>
The right margin of the chart panes.
Example - set the chart pane right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
margin: {
right: 10
}
},
{
name: "bottom-pane",
margin: {
right: 10
}
}
]
});
</script>
The top margin of the chart panes.
Example - set the chart pane top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
margin: {
top: 10
}
},
{
name: "bottom-pane",
margin: {
top: 10
}
}
]
});
</script>
The unique name of the chart pane.
Example - set the chart pane name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane" },
{ name: "bottom-pane" }
]
});
</script>
The padding of the pane. A numeric value will set all paddings.
Example - set the chart pane padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane", padding: 10 },
{ name: "bottom-pane", padding: 10 }
]
});
</script>
The bottom padding of the chart panes.
Example - set the chart pane bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
padding: {
bottom: 10
}
},
{
name: "bottom-pane",
padding: {
bottom: 10
}
}
]
});
</script>
The left padding of the chart panes.
Example - set the chart pane left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
padding: {
left: 10
}
},
{
name: "bottom-pane",
padding: {
left: 10
}
}
]
});
</script>
The right padding of the chart panes.
Example - set the chart pane right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
padding: {
right: 10
}
},
{
name: "bottom-pane",
padding: {
right: 10
}
}
]
});
</script>
The top padding of the chart panes.
Example - set the chart pane top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{
name: "top-pane",
padding: {
top: 10
}
},
{
name: "bottom-pane",
padding: {
top: 10
}
}
]
});
</script>
The title configuration of the chart pane.
Example - set the chart pane title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom"
}
}
]
});
</script>
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart pane title background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
background: "red"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
background: "green"
}
}
]
});
</script>
The border of the title.
Example - set the chart pane title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
border: {
color: "red",
width: 2
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
border: {
color: "green",
width: 2
}
}
}
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart pane title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
border: {
color: "red",
width: 2
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
border: {
color: "green",
width: 2
}
}
}
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart pane title border dashType
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
border: {
dashType: "dashDot",
width: 2
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
border: {
dashType: "dashDot",
width: 2
}
}
}
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the category axis title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
border: {
width: 2
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
border: {
width: 2
}
}
}
]
});
</script>
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart pane title color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
color: "#aa00bb"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
color: "#a0b0c0"
}
}
]
});
</script>
Example - set the chart pane title color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
color: "rgb(128, 0, 255)"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
color: "rgb(128, 0, 255)"
}
}
]
});
</script>
Example - set the chart pane title color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
color: "red"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
color: "green"
}
}
]
});
</script>
The font style of the title.
Example - set the chart pane title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
font: "20px sans-serif"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
color: "green"
}
}
]
});
</script>
The margin of the title. A numeric value will set all margins.
Example - set the chart pane title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
margin: 10
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
margin: 10
}
}
]
});
</script>
The bottom margin of the title.
Example - set the chart pane title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
margin: {
bottom: 10
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
margin: {
bottom: 10
}
}
}
]
});
</script>
The left margin of the title.
Example - set the chart pane title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
margin: {
left: 10
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
margin: {
left: 10
}
}
}
]
});
</script>
The right margin of the title.
Example - set the chart pane title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
margin: {
right: 10
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
margin: {
right: 10
}
}
}
]
});
</script>
The top margin of the title.
Example - set the chart pane title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
margin: {
top: 10
}
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
margin: {
top: 10
}
}
}
]
});
</script>
The position of the title.
The supported values are:
- "left" - the axis title is positioned on the left (applicable to horizontal axis)
- "right" - the axis title is positioned on the right (applicable to horizontal axis)
- "center" - the axis title is positioned in the center
Example - set the chart pane title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
position: "left"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
position: "left"
}
}
]
});
</script>
The text of the title.
Example - set the chart pane title text
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top"
}
},
{ name: "bottom-pane",
title: {
text: "Bottom"
}
}
]
});
</script>
If set to true the chart will display the pane title. By default the pane title is visible.
Example - hide the chart pane title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] },
{ data: [1, 2, 3, 4], axis: "bottom" }
],
valueAxis: [
{ pane: "top-pane" },
{ pane: "bottom-pane", name: "bottom" }
],
panes: [
{ name: "top-pane",
title: {
text: "Top",
visible: false
}
},
{ name: "bottom-pane",
title: {
text: "Bottom",
visible: false
}
}
]
});
</script>
The plot area configuration options. The plot area is the area which displays the series.
Example - configure the chart plot area
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
background: "green",
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the chart plot area. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart plot area background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
background: "#aa00bb"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the chart plot area background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
background: "rgb(128, 0, 255)"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the chart plot area background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
background: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the chart plot area.
Example - set the chart plot area border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart plot area border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart plot area border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
border: {
width: 2,
dashType: "dashDot"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart plot area border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the chart plot area. A numeric value will set all margins.
Example - set the chart plot area margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
margin: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the chart plot area.
Example - set the chart plot area bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
margin: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the chart plot area.
Example - set the chart plot area left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
margin: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the chart plot area.
Example - set the chart plot area right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
margin: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the chart plot area.
Example - set the chart plot area top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
margin: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background opacity of the chart plot area. By default the background is opaque.
Example - set the chart plot area opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
plotArea: {
background: "green",
opacity: 0.1
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
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 type is assumed to be the one specified in seriesDefaults.
Some options accept function as argument. They will be evaluated for each point (supplied as parameter). The theme/seriesDefaults value will be used if no value is returned.
Example - configure the chart series
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "line", data: [1, 2, 3] },
{ type: "bar", data: [4, 5, 6] }
]
});
</script>
The aggregate function to apply for date series.
This function is used when a category (an year, month, etc.) contains two or more points.
The function return value is displayed instead of the individual points.
The supported values are:
- "avg" - the average of all values for the date period.
- "count" - the number of values for the date period.
- "max" - the highest value for the date period.
- "min" - the lowest value for the date period.
- "sum" - the sum of all values for the date period.
- function (values, series) - user-defined aggregate function.
- object - (compound aggregate) Applicable to "candlestick" and ohlc "series". Specifies the aggregate for each data item field.
Example - set the chart series aggregate
<div id="chart"></div>
<script>
$("#chart").kendoChart({
categoryAxis: {
categories: [
new Date("2012/01/01"),
new Date("2012/01/02"),
new Date("2012/01/02")
],
type: "date"
},
series: [{
data: [1, 2, 3],
aggregate: "avg"
}]
});
</script>
The name of the value axis to use.
The axis option is supported when series.type is set to "area", "bar", "column", "line", "candlestick" or "ohlc".
Example - set the chart series value axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [
{ name: "first" },
{ name: "second" }
],
series: [
{ data: [800, 100, 300], axis: "first" },
{ data: [1, 5], axis: "second" }
]
});
</script>
The border of the chart series.
The border option is supported when series.type is set to "bar", "column", "donut", "pie", "bubble", "candlestick" or "ohlc".
Example - set the chart series border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
border: {
width: 2,
color: "black",
dashType: "dash",
},
data: [1, 2]
}
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb. By default it is set to color of the current series.
Example - set the chart series border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
border: {
width: 2,
color: "black"
},
data: [1, 2]
}
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart series border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
border: {
width: 2,
color: "black",
dashType: "dash",
},
data: [1, 2]
}
]
});
</script>
The opacity of the border. By default the border is opaque.
Example - set the chart series border opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
border: {
width: 2,
color: "black",
opacity: 0.5
},
data: [1, 2]
}
]
});
</script>
The width of the border in pixels.
Example - set the chart series border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
border: {
width: 2
},
data: [1, 2]
}
]
});
</script>
The data item field which contains category name.
The categoryField option is supported when series.type is set to "bubble", "donut" or "pie".
Example - set the chart series category field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "pie",
categoryField: "type",
data: [
{ value: 1, type: "Category 1" },
{ value: 2, type: "Category 2" },
]
}
]
});
</script>
The data field containing the close value.
The closeField option is supported when series.type is set to "candlestick" or "ohlc".
Example - set the chart series high field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "candlestick",
closeField: "closePrice",
data: [
{ open: 1, high: 2, low: 0.5, closePrice: 1.5},
{ open: 2, high: 3, low: 1, closePrice: 1.5}
]
}
]
});
</script>
The series base color. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2],
color: "#a0b0c0"
}
]
});
</script>
Example - set the chart series color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2],
color: "rgb(128, 0, 255)"
}
]
});
</script>
Example - set the chart series color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2],
color: "red"
}
]
});
</script>
Example - set the chart series color as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2],
color: function(point) {
if (point.value > 1) {
return "red";
}
// use the default series theme color
}
}
]
});
</script>
The data item field which contains the series color.
The colorField option is supported when series.type is set to "bar", "column", "bubble", "donut", "pie", "candlestick" or "ohlc".
Example - set the chart series color field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
colorField: "valueColor",
data: [
{ value: 1, valueColor: "red" },
{ value: 2, valueColor: "green" }
]
}]
});
</script>
The label connectors options.
Example - configure the label connectors
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "pie",
labels: {
visible: true
},
connectors: {
width: 4,
color: "red"
},
data: [1 , 2]
}]
});
</script>
The color of the connector. Accepts a valid CSS color string, including hex and rgb.
Example - configure the label connector color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "pie",
labels: {
visible: true
},
connectors: {
color: "red"
},
data: [1 , 2]
}]
});
</script>
The padding between the connector line and the label, and connector line and donut chart.
Example - configure the label connector padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "pie",
labels: {
visible: true
},
connectors: {
padding: 10
},
data: [1 , 2]
}]
});
</script>
The width of the connector line.
Example - configure the label connector width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "pie",
labels: {
visible: true
},
connectors: {
width: 10
},
data: [1 , 2]
}]
});
</script>
The data item field containing the current value.
The currentField option is supported when series.type is set to "bullet" or "verticalBullet".
Example - set the bullet chart series current field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
currentField: "price",
data: [
{ price: 1, target: 2 }
]
}
]
});
</script>
The dash type of line chart.
The dashType option is taken into consideration only if the series.type option is set to "line".
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart legend border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
dashType: "dashDot",
type: "line",
data: [1, 2, 3]
}
]
});
</script>
The array of data items which represent the series data.
Can be set to :
- Array of objects. Each point is bound to the field specified via the series.field option.
- Array of numbers. Supported when the series.type option is set to "area", "bar", "column", "donut", "pie" or "line".
- Array of arrays of numbers. Supported when the series.type option is set to "bubble", "scatter", "scatterLine" or "ohlc".
- Bubble series need arrays of three values - X value, Y value and Size value e.g.
[1, 1, 10] - Scatter and scatter line series need arrays of two values - X value and Y value
- OHLC and candlestick series need arrays of four values - open, high, low and close
Example - set the chart series data as array of objects
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
field: "price",
data: [
{ price: 1 },
{ price: 2 },
{ price: 3 }
]
}
]
});
</script>
Example - set the chart series data as array of numbers
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the chart series data as array of arrays
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bubble",
data: [
[1, 2, 15],
[2, 3, 4]
]
}
]
});
</script>
The series color when the open value is greater than the close value.
The downColor option is supported when series.type is set to "candlestick".
Example - set the chart series down color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "candlestick",
downColor: "green",
color: "red",
data: [
{ open: 4, high: 5, low: 2, close: 3 },
{ open: 3, high: 5, low: 2, close: 4 }
]
}]
});
</script>
The data field containing the color applied when the open value is greater than the close value.
The downColorField option is supported when series.type is set to "candlestick".
Example - set the chart series down color field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "candlestick",
color: "red",
downColorField:"down",
data: [
{ open: 4, high: 5, low: 2, close: 3, down: "green" },
{ open: 3, high: 5, low: 2, close: 4 }
]
}]
});
</script>
The data item field which contains a boolean value indicating whether the sector is exploded.
The explodeField option is supported when series.type is set to "donut" or "pie".
Example - set the chart series explode field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "pie",
explodeField: "isExploded",
data: [
{ value: 1, isExploded: true },
{ value: 2 }, // isExpaded is missing, "false" is asumed
{ value: 3, isExploded: false }
]
}
]
});
</script>
The data item field which contains the series value.
Example - set the chart series field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "pie",
field: "price",
data: [
{ price: 1 },
{ price: 2 },
{ price: 3 }
]
}
]
});
</script>
The distance between the category clusters.
The gap option is supported when series.type is set to "bar", "column", "candlestick" or "ohlc".
Example - set the chart series gap
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
gap: 0,
data: [1, 2]
}]
});
</script>
The template which sets the name of the series when bound to grouped data source.
The fields which can be used in the template are:
- series - the series options
- group - the data group
- group.field - the name of the field used for grouping
- group.value - the field value for this group.
Example - set the chart series group name template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: {
data: [
{ value: 1, category: "One"},
{ value: 2, category: "Two"}
],
group: { field: "category" }
},
series: [
{
field: "value",
groupNameTemplate: "Category: #: group.value #"
}
]
});
</script>
The data field containing the high value.
The highField option is supported when series.type is set to "candlestick" or "ohlc".
Example - set the chart series high field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "candlestick",
highField: "highPrice",
data: [
{ open: 1, highPrice: 2, low: 0.5, close: 1.5},
{ open: 2, highPrice: 3, low: 1, close: 1.5}
]
}
]
});
</script>
The chart series highlighting configuration options.
Example - configure the chart series highlighting
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
border: {
opacity: 1,
width: 5,
color: "black"
}
}
}]
});
</script>
The border of the highlighted chart series. The color is computed automatically from the base point color.
The border option is supported when series.type is set to "donut", "bubble", "pie", "candlestick" or "ohlc".
Example - set the chart highlight border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
border: {
width: 5,
color: "black"
}
}
}]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart highlight border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
border: {
color: "red",
width: 5
}
}
}]
});
</script>
The opacity of the border. By default the border is opaque.
Example - set the chart highlight border opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
border: {
opacity: 0.5,
width: 5
}
}
}]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart highlight border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
border: {
width: 5
}
}
}]
});
</script>
The highlight color. Accepts a valid CSS color string, including hex and rgb.
The color option is supported when series.type is set to "donut" or "pie".
Example - set the chart highlight color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "donut",
data: [1, 2],
highlight: {
color: "green"
}
}]
});
</script>
The line of the highlighted chart series. The color is computed automatically from the base point color.
The line option is supported when series.type is set to "candlestick" or "ohlc".
Example - set the highlight line
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "ohlc",
data: [
{ open: 1, high: 3, low: 0, close: 1 },
{ open: 2, high: 4, low: 1, close: 1.5 },
],
highlight: {
line: {
width: 5,
color: "green"
}
}
}]
});
</script>
The line color. Accepts a valid CSS color string, including hex and rgb.
Example - set the highlight line color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "ohlc",
data: [
{ open: 1, high: 3, low: 0, close: 1 },
{ open: 2, high: 4, low: 1, close: 1.5 },
],
highlight: {
line: {
color: "green"
}
}
}]
});
</script>
The opacity of the line. By default the border is opaque.
Example - set the highlight line opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "ohlc",
data: [
{ open: 1, high: 3, low: 0, close: 1 },
{ open: 2, high: 4, low: 1, close: 1.5 },
],
highlight: {
line: {
opacity: 0.5,
width: 10
}
}
}]
});
</script>
The width of the line.
Example - set the highlight line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "ohlc",
data: [
{ open: 1, high: 3, low: 0, close: 1 },
{ open: 2, high: 4, low: 1, close: 1.5 },
],
highlight: {
line: {
width: 5
}
}
}]
});
</script>
The opacity of the highlighted points.
The opacity option is supported when series.type is set to "bubble", "pie" or "donut".
Example - set the highlight opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
opacity: 0.5
}
}]
});
</script>
If set to true the chart will highlight the series when the user hovers it with the mouse.
By default chart series highlighting is enabled.
Example - prevent the chart series highlighting
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
type: "pie",
data: [1, 2],
highlight: {
visible: false
}
}]
});
</script>
The diameter of the donut hole in pixels.
The holeSize option is supported when series.type is set to "donut".
Example - set the donut chart hole size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "donut",
holeSize: 80,
data: [1, 2, 3]
}
]
});
</script>
The chart series label configuration.
Example - configure the chart series label
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
background: "green",
border: {
width: 2,
color: "black"
}
},
data: [1, 2]
}]
});
</script>
The label alignment when series.type is set to "donut" or "pie".
The supported values are:
- "circle" - the labels are positioned in circle around the chart.
- "column" - the labels are positioned in columns to the left and right of the chart.
Example - set the chart series label alignment
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
align: "column"
},
type: "pie",
data: [1, 2, 3, 4, 5, 6]
}]
});
</script>
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
background: "green"
},
data: [1, 2]
}]
});
</script>
The border of the labels.
Example - set the chart series label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2, 3],
labels: {
visible: true,
border: {
color: "green",
dashType: "dashDot",
width: 1
}
}
}
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2, 3],
labels: {
visible: true,
border: {
color: "green",
width: 1
}
}
}
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart series label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2, 3],
labels: {
visible: true,
border: {
dashType: "dashDot",
width: 1
}
}
}
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series label border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
data: [1, 2, 3],
labels: {
visible: true,
border: {
width: 1
}
}
}
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
labels: {
visible: true,
color: "#aa00bb"
},
data: [1, 2, 3]
}
]
});
</script>
Example - set the chart series label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
labels: {
visible: true,
color: "rgb(128, 0, 255)"
},
data: [1, 2, 3]
}
]
});
</script>
Example - set the chart series label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
labels: {
visible: true,
color: "green"
},
data: [1, 2, 3]
}
]
});
</script>
The distance of the labels when series.type is set to "donut" or "pie".
Example - set the chart series label distance
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
distance: 70
},
type: "pie",
data: [1, 2, 3, 4, 5, 6]
}]
});
</script>
The font style of the labels.
Example - set the chart series label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
font: "20px sans-serif"
},
data: [1, 2, 3]
}]
});
</script>
The format of the labels. Uses kendo.format.
Example - set the chart series label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
format: "{0:C}"
},
data: [1, 2, 3]
}]
});
</script>
The margin of the labels. A numeric value will set all margins.
Example - set the chart series label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
margin: 10,
data: [1, 2, 3]
}
]
});
</script>
The bottom margin of the labels.
Example - set the chart series label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
margin: {
bottom: 10
},
data: [1, 2, 3]
}
]
});
</script>
The left margin of the labels.
Example - set the chart series label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
margin: {
left: 10
},
data: [1, 2, 3]
}
]
});
</script>
The right margin of the labels.
Example - set the chart series label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
margin: {
right: 10
},
data: [1, 2, 3]
}
]
});
</script>
The top margin of the labels.
Example - set the chart series label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
margin: {
top: 10
},
data: [1, 2, 3]
}
]
});
</script>
The padding of the labels. A numeric value will set all paddings.
Example - set the chart series label padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
padding: 10,
data: [1, 2, 3]
}
]
});
</script>
The bottom padding of the labels.
Example - set the chart series label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
padding: {
bottom: 10
},
data: [1, 2, 3]
}
]
});
</script>
The left padding of the labels.
Example - set the chart series label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
padding: {
left: 10
},
data: [1, 2, 3]
}
]
});
</script>
The right padding of the labels.
Example - set the chart series label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
padding: {
right: 10
},
data: [1, 2, 3]
}
]
});
</script>
The top padding of the labels.
Example - set the chart series label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
padding: {
top: 10
},
data: [1, 2, 3]
}
]
});
</script>
The position of the labels.
- "above" - the label is positioned at the top of the marker. * Applicable for area, bubble, line, scatter and scatterLine series. *
- "below" - the label is positioned at the bottom of the marker. * Applicable for area, bubble, line, scatter and scatterLine series. *
- "center" - the label is positioned at the point center. * Applicable for bar, column, donut and pie series. *
- "insideBase" - the label is positioned inside, near the base of the bar. * Applicable for bar and column series. *
- "insideEnd" - the label is positioned inside, near the end of the point. * Applicable for bar, column, donut and pie series. *
- "left" - the label is positioned to the left of the marker. * Applicable for area, bubble, line, scatter and scatterLine series. *
- "outsideEnd" - the label is positioned outside, near the end of the bar. * Applicable for bar, column, donut and pie series. Not applicable for stacked series. *
- "right" - the label is positioned to the right of the marker. * Applicable for area, bubble, line, scatter and scatterLine series. *
Example - set the chart series label position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
position: "center"
},
data: [1, 2, 3]
}]
});
</script>
The template which renders the chart series label.
The fields which can be used in the template are:
- category - the category name. Available for area, bar, column, bubble, donut, line and pie series.
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- percentage - the point value represented as a percentage value. Available for donut and pie series.
- series - the data series
- value - the point value. Can be a number or object containing each bound field.
Example - set the chart series label template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
template: "Value: #: value #%"
},
data: [1, 2, 3]
}]
});
</script>
If set to true the chart will display the series labels. By default chart series labels are not displayed.
Example - show the chart series labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
labels: {
visible: true
},
data: [1, 2, 3]
}]
});
</script>
The chart line configuration options.
The line option is supported when the series.type option is set to "area", "candlestick" or "ohlc".
Example - configure the chart line options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "area",
line: {
color: "green",
width: 5
},
data: [1, 2, 3]
}]
});
</script>
The line color. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart line color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "area",
line: {
color: "green",
width: 5
},
data: [1, 2, 3]
}]
});
</script>
The line opacity. By default the line is opaque.
Example - set the chart line opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "area",
line: {
color: "green",
opacity: 0.5,
width: 5
},
data: [1, 2, 3]
}]
});
</script>
The line width in pixels.
Example - set the chart line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "area",
line: {
color: "green",
opacity: 0.5,
width: 5
},
data: [1, 2, 3]
}]
});
</script>
The data field containing the low value.
The lowField option is supported when series.type is set to "candlestick" or "ohlc".
Example - set the chart series high field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "candlestick",
lowField: "lowPrice",
data: [
{ open: 1, high: 2, low: 0.5, lowPrice: 1.5},
{ open: 2, high: 3, low: 1, lowPrice: 1.5}
]
}
]
});
</script>
The margin around each donut series (ring). A numeric value will set all margins.
Example - set the chart donut series margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
margin: 30,
data: [1, 2, 3]
},{
type: "donut",
data: [1, 2, 3]
}]
});
</script>
The bottom margin of the labels.
Example - set the chart donut series bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
margin: {
bottom: 30
},
data: [1, 2, 3]
},{
type: "donut",
data: [1, 2, 3]
}]
});
</script>
The left margin of the labels.
Example - set the chart donut series left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
margin: {
left: 30
},
data: [1, 2, 3]
},{
type: "donut",
data: [1, 2, 3]
}]
});
</script>
The right margin of the labels.
Example - set the chart donut series right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
margin: {
right: 30
},
data: [1, 2, 3]
},{
type: "donut",
data: [1, 2, 3]
}]
});
</script>
The top margin of the labels.
Example - set the chart donut series top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
margin: {
top: 30
},
data: [1, 2, 3]
},{
type: "donut",
data: [1, 2, 3]
}]
});
</script>
The chart series marker configuration.
The chart displays the series labels when the series.markers.visible option is set to true.
The markers option is supported when series.type is set to "area", "line", "scatter" or "scatterLine".
Example - set the chart series markers
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
background: "green",
size: 30
},
data: [1, 2, 3]
}]
});
</script>
The background color of the series markers.
Example - set the chart series markers background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
background: "green"
},
data: [1, 2, 3]
}]
});
</script>
The border of the markers.
Example - set the chart series markers border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
border: {
width: 2,
color: "green"
}
},
data: [1, 2, 3]
}]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series markers border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
border: {
width: 2,
color: "green"
}
},
data: [1, 2, 3]
}]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series markers border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
border: {
width: 2
}
},
data: [1, 2, 3]
}]
});
</script>
The marker size in pixels.
Example - set the chart markers size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
size: 30
},
data: [1, 2, 3]
}]
});
</script>
The markers shape.
The supported values are:
* "circle" - the marker shape is circle.
* "square" - the marker shape is square.
* "triangle" - the marker shape is triangle.
Example - set the chart series marker shape
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true,
type: "triangle",
},
data: [1, 2, 3]
}]
});
</script>
If set to true the chart will display the series markers. By default chart series markers are not displayed.
Example - display the chart series markers
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
markers: {
visible: true
},
data: [1, 2, 3]
}]
});
</script>
The maximum size of the chart bubble series marker.
Example - set the bubble chart series max marker size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
maxSize: 40,
data: [
[1, 2, 3],
[2, 3, 4]
]
}]
});
</script>
The minimum size of the chart bubble series marker.
Example - set the bubble chart series min marker size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
minSize: 40,
data: [
[1, 2, 3],
[2, 3, 4]
]
}]
});
</script>
The behavior for handling missing values.
The missingValues option is supported when series.type is set to "area", "line" or "scatterLine".
The supported values are:
- "gap" - the plot stops before the missing point and continues after it.
- "interpolate" - the value is interpolated from neighboring points.
- "zero" - the value is assumed to be zero.
Example - set the missing values behavior
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "line",
missingValues: "interpolate",
data: [1, 3, null, 4, 5]
}]
});
</script>
The name of the chart series which is visible in the legend.
Example - set the chart series name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ name: "Series 1", data: [1, 2] },
{ name: "Series 2", data: [2, 3] }
]
});
</script>
The color to use for bar or column series with negative values. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart column series negative color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
missingValues: "interpolate",
data: [-1, 1, 2, -2],
negativeColor: "green"
}]
});
</script>
The options for displaying the chart negative bubble values.
Example - set the chart negative bubbles
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
negativeValues: {
color: "green",
visible: true
},
data: [
[-1, 2, -3],
[2, 3, 4]
]
}]
});
</script>
The color of the chart negative bubble values.
Example - set the chart negative bubbles color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
negativeValues: {
color: "green",
visible: true
},
data: [
[-1, 2, -3],
[2, 3, 4]
]
}]
});
</script>
If set to true the chart will display the negative bubbles. By default the negative bubbles are not displayed.
Example - show the chart negative bubbles
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
negativeValues: {
visible: true
},
data: [
[-1, 2, -3],
[2, 3, 4]
]
}]
});
</script>
The series opacity. By default the series are opaque.
Example - set the chart series opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
opacity: 0.5,
data: [ 1, 2, 3]
}]
});
</script>
The data field containing the open value.
The openField option is supported when series.type is set to "candlestick" or "ohlc".
Example - set the chart series high field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "candlestick",
openField: "openPrice",
data: [
{ open: 1, high: 2, low: 0.5, openPrice: 1.5},
{ open: 2, high: 3, low: 1, openPrice: 1.5}
]
}
]
});
</script>
The chart series overlay options.
Example - set the chart series overlay options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
overlay: {
gradient: "none"
},
data: [ 1, 2, 3]
}]
});
</script>
The chart series gradient.
The supported values are:
- "glass" (bar, column and candlestick series)
- "none"
- "roundedBevel" (donut and pie series)
- "sharpBevel" (donut and pie series)
Example - set the chart series gradient options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
overlay: {
gradient: "none"
},
data: [ 1, 2, 3]
}]
});
</script>
The padding around the chart (equal on all sides).
The padding option is supported when series.type is set to "donut" or "pie".
Example - set the donut chart series padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
padding: 60,
data: [ 1, 2, 3]
}]
});
</script>
The or radius of the chart donut series in pixels. If not set, the available space is split evenly between the series.
Example - set the donut chart series size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
size: 100,
data: [ 1, 2, 3]
}]
});
</script>
The data field containing the bubble size value.
Example - set the bubble chart series size field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
sizeField: "price",
data: [
{ x: 1, y: 2, price: 3 }
]
}]
});
</script>
The space between the chart series as proportion of the series width.
The spacing option is supported when series.type is set to "bar", "column", "candlestick" or "ohlc".
Example - set the chart series spacing
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ spacing: 0.1, data: [ 1, 2 ,3 ] },
{ data: [ 1, 2 ,3 ] }
]
});
</script>
A value indicating if the series should be stacked. String value indicates that the series should be stacked in a group with the specified name.
The stack option is supported when series.type is set to "bar" or "column".
Example - enable chart series stacking
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ stack: true, data: [ 1, 2 , 3] },
{ data: [ 4, 5 , 6] }
]
});
</script>
The start angle of the first donut or pie segment.
Example - set the donut chart series start angle
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "donut",
startAngle: 180,
data: [ 1, 2, 3]
}]
});
</script>
The configuration options of the target
The target option is supported when series.type is set to "bullet" or "verticalBullet".
Example - configure the bullet chart target
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
color: "green",
border: {
width: 3,
color: "red"
},
line: {
width: 10
}
},
data: [
{ current: 1, target: 2 }
]
}
]
});
</script>
The border of the target.
Example - set the bullet chart target border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
border: {
width: 3,
color: "red"
}
},
data: [
[1, 2]
]
}
]
});
</script>
The color of the border.
Example - set the bullet chart target border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
border: {
width: 3,
color: "red"
}
},
data: [
[1, 2]
]
}
]
});
</script>
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the bullet chart target border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
border: {
width: 3,
dashType: "dashDot"
}
},
data: [
[1, 2]
]
}
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the bullet chart target border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
border: {
width: 3
}
},
data: [
[1, 2]
]
}
]
});
</script>
The target color.
Example - set the bullet chart target color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
color: "green"
},
data: [
[1, 2]
]
}
]
});
</script>
The target line options.
Example - set the bullet chart target line options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
line: {
width: 10
}
},
data: [
[1, 2]
]
}
]
});
The width of the line.
Example - set the bullet chart target line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
target: {
line: {
width: 10
}
},
data: [
[1, 2]
]
}
]
});
The data item field containing the target value.
The currentField option is supported when series.type is set to "bullet" or "verticalBullet".
Example - set the bullet chart series current field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "bullet",
targetField: "price",
data: [
{ current: 1, price: 2 }
]
}
]
});
</script>
The chart series tooltip configuration options.
Example - configure the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
background: "green"
},
data: [1, 2, 3]
}
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
background: "green"
},
data: [1, 2, 3]
}
]
});
</script>
The border configuration options.
Example - set the chart series tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
},
data: [1, 2, 3]
}
]
});
</script>
The color of the border.
Example - set the chart series tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
},
data: [1, 2, 3]
}
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
border: {
width: 2
}
},
data: [1, 2, 3]
}
]
});
</script>
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
color: "green"
},
data: [1, 2, 3]
}
]
});
</script>
The tooltip font.
Example - set the chart series tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
font: "20px sans-serif"
},
data: [1, 2, 3]
}
]
});
</script>
The format of the labels. Uses kendo.format.
Format placeholders:
- Area, bar, column, line and pie
- Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
- Scatter and scatterLine
- {0} - x value
- {1} - y value
- Candlestick and OHLC
- {0} - open value
- {1} - high value
- {2} - low value
- {3} - close value
- {4} - category name
Example - set the chart series tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
format: "{0} x {1} ({2:C})"
},
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
The padding of the tooltip. A numeric value will set all paddings.
Example - set the chart series tooltip padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
padding: 10
},
data: [1, 2, 3]
}
]
});
</script>
The bottom padding of the tooltip.
Example - set the chart series tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
padding: {
bottom: 10
}
},
data: [1, 2, 3]
}
]
});
</script>
The left padding of the tooltip.
Example - set the chart series tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
padding: {
left: 10
}
},
data: [1, 2, 3]
}
]
});
</script>
The right padding of the tooltip.
Example - set the chart series tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
padding: {
right: 10
}
},
data: [1, 2, 3]
}
]
});
</script>
The top padding of the tooltip.
Example - set the chart series tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
padding: {
top: 10
}
},
data: [1, 2, 3]
}
]
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
- category - the category name
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- series - the data series
- value - the point value (either a number or an object)
Example - set the chart series tooltip template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true,
template: "#: value.x # - #: value.y # (#: value.size #)"
},
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
If set to true the chart will display the series tooltip. By default the series tooltip is not displayed.
Example - show the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
tooltip: {
visible: true
},
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
The type of the series.
The supported values are:
- area
- bar
- bubble
- bullet
- candlestick
- column
- donut
- line
- ohlc
- pie
- scatterLine
- verticalArea
- verticalBullet
- verticalLine
Example - set the chart series type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
A value indicating whether to show the point category name (for bubble, donut and pie series)
or series name (for other available series types) in the legend.
Example - hide a chart series from the legend
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
name: "Series 1",
visibleInLegend: false,
data: [1, 2, 3]
},
{ name: "Series 2", data: [1, 2, 3] }
]
});
</script>
The data item field which indicates whether to show the point category name in the legend.
The visibleInLegendField option is supported when series.type is set to "buble", "donut" or "pie".
Example - set the chart series visible in legend field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: {
data: [
{ value: 1, category: "firstValue", visible: false },
{ value: 2, category: "secondValue", visible: true }
]
},
series: [
{
type: "pie",
field: "value",
visibleInLegendField: "visible"
}
]
});
</script>
The line width.
The width option is supported when series.type is set to "line" or "scatterLine".
Example - set the chart line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "line",
width: 6,
data: [1, 2, 3]
}
]
});
</script>
The name of the X axis to use.
The xAxis option is supported when series.type is set to "bubble", "scatter" or "scatterLine".
The data item field containing the X value.
The xField option is supported when series.type is set to "bubble", "scatter" or "scatterLine".
Example - set the chart series x field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
xField: "price",
data: [
{ price: 1, y: 2, size: 3 }
]
}]
});
</script>
The name of the Y axis to use.
* Available for bubble, scatter and scatterLine series. *
The data item field containing the Y value.
The yField option is supported when series.type is set to "bubble", "scatter" or "scatterLine".
Example - set the chart series y field
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [ {
type: "bubble",
yField: "price",
data: [
{ x: 1, yField: 2, size: 3 }
]
}]
});
</script>
The default colors for the chart's series. When all colors are used, new colors are pulled from the start again.
Example - set the chart series colors
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesColors: ["red", "green"],
series: [
{ data: [1, 2] },
{ data: [1, 2] },
{ data: [1, 2] }
]
});
</script>
The default options for all series.
The area chart series options. Accepts all values supported by the series option.
Example - set the area chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
area: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "area", data: [1, 2] },
{ data: [3, 4] }
]
});
</script>
The bar chart series options. Accepts all values supported by the series option.
Example - set the bar chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
bar: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "bar", data: [1, 2] },
{ data: [3, 4] }
]
});
</script>
The border of the series.
Example - set the chart series border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the chart series border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart series border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
border: {
dashType: "dashDot",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bubble chart series options. Accepts all values supported by the series option.
Example - set the bubble chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
bubble: {
color: "green",
opacity: 0.5
}
},
series: [
{ type: "bubble", data: [ [1, 2, 3] ] }
]
});
</script>
The candlestick chart series options. Accepts all values supported by the series option.
Example - set the candlestick chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
candlestick: {
color: "red",
opacity: 0.3
}
},
series: [
{ type: "candlestick", data: [ [1, 2, 0.5, 1.5] ] }
]
});
</script>
The column chart series options. Accepts all values supported by the series option.
Example - set the column chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
column: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "column", data: [3, 4] }
]
});
</script>
The donut chart series options. Accepts all values supported by the series option.
Example - set the donut chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
donut: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "donut", data: [3, 4] }
]
});
</script>
The distance between category clusters.
Example - set the gap between the chart categories
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
gap: 4
},
series: [
{ data: [1, 2] }
]
});
</script>
The chart series label configuration.
Example - configure the chart series label
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
background: "green",
border: {
width: 2,
color: "black"
}
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
background: "green"
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The border of the labels.
Example - set the chart series label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
border: {
width: 2,
color: "black"
}
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
border: {
width: 2,
color: "black"
}
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart series label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
border: {
width: 2,
dashType: "dashDot"
}
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series label border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
border: {
width: 2
}
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
color: "#aa00bb"
}
},
series: [
{ data: [1, 2] }
]
});
</script>
Example - set the chart series label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2] }
]
});
</script>
Example - set the chart series label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
color: "green"
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The font style of the labels.
Example - set the chart series label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
font: "20px sans-serif"
}
},
series: [
{ data: [1, 2] }
]
});
</script>
The format of the labels. Uses kendo.format.
Example - set the chart series label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
format: "{0:C}"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the labels. A numeric value will set all margins.
Example - set the chart series label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
margin: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the labels.
Example - set the chart series label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
margin: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the labels.
Example - set the chart series label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
margin: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the labels.
Example - set the chart series label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
margin: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the labels.
Example - set the chart series label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
margin: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the labels. A numeric value will set all margins.
Example - set the chart series label padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
padding: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the labels.
Example - set the chart series label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
padding: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the labels.
Example - set the chart series label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
padding: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the labels.
Example - set the chart series label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
padding: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the labels.
Example - set the chart series label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
padding: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the chart series label.
The fields which can be used in the template are:
- category - the category name. Available for area, bar, column, bubble, donut, line and pie series.
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- percentage - the point value represented as a percentage value. Available for donut and pie series.
- series - the data series
- value - the point value. Can be a number or object containing each bound field.
Example - set the chart series label template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true,
template: "Value: #: value #%"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the series labels. By default chart series labels are not displayed.
Example - show the chart series labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
labels: {
visible: true
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The line chart series options. Accepts all values supported by the series option.
Example - set the line chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
line: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "line", data: [1, 2] }
]
});
</script>
The ohlc chart series options. Accepts all values supported by the series option.
Example - set the ohlc chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
ohlc: {
color: "red",
opacity: 0.3
}
},
series: [
{ type: "ohlc", data: [ [1, 2, 0.5, 1.5] ] }
]
});
</script>
The chart series overlay options.
Example - set the chart series overlay options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
overlay: {
gradient: "none"
}
},
series: [
{ data: [ 1, 2, 3] }
]
});
</script>
The chart series gradient.
The supported values are:
- "glass" (bar, column and candlestick series)
- "none"
- "roundedBevel" (donut and pie series)
- "sharpBevel" (donut and pie series)
Example - set the chart series gradient options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
overlay: {
gradient: "none"
}
},
series: [
{ data: [ 1, 2, 3] }
]
});
</script>
The pie chart series options. Accepts all values supported by the series option.
Example - set the pie chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
pie: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "pie", data: [1, 2] }
]
});
</script>
The scatter chart series options. Accepts all values supported by the series option.
Example - set the scatter chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
color: "green"
},
series: [ {
type: "scatter",
data: [
[1, 2],
[2, 3]
]
}]
});
</script>
The scatterLine chart series options. Accepts all values supported by the series option.
Example - set the scatterLine chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
color: "green"
},
series: [ {
type: "scatterLine",
data: [
[1, 2],
[2, 3]
]
}]
});
</script>
The space between the chart series as proportion of the series width.
The spacing option is supported when series.type is set to "bar", "column", "candlestick" or "ohlc".
Example - set the chart series spacing
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
spacing: 0.1
},
series: [
{ data: [ 1, 2 ,3 ] },
{ data: [ 1, 2 ,3 ] }
]
});
</script>
A value indicating if the series should be stacked. String value indicates that the series should be stacked in a group with the specified name.
The stack option is supported when series.type is set to "bar" or "column".
Example - enable chart series stacking
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
stack: true
},
series: [
{ data: [ 1, 2 , 3] },
{ data: [ 4, 5 , 6] }
]
});
</script>
The chart series tooltip configuration options.
Example - configure the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border configuration options.
Example - set the chart series tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border.
Example - set the chart series tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
border: {
width: 2
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The tooltip font.
Example - set the chart series tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
font: "20px sans-serif"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The format of the labels. Uses kendo.format.
Format placeholders:
- Area, bar, column, line and pie
- Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
- Scatter and scatterLine
- {0} - x value
- {1} - y value
- Candlestick and OHLC
- {0} - open value
- {1} - high value
- {2} - low value
- {3} - close value
- {4} - category name
Example - set the chart series tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
format: "{0} x {1} ({2:C})"
}
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
The padding of the tooltip. A numeric value will set all paddings.
Example - set the chart series tooltip padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
padding: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the tooltip.
Example - set the chart series tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
padding: {
bottom: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the tooltip.
Example - set the chart series tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
padding: {
left: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the tooltip.
Example - set the chart series tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
padding: {
right: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the tooltip.
Example - set the chart series tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
padding: {
top: 10
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
- category - the category name
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- series - the data series
- value - the point value (either a number or an object)
Example - set the chart series tooltip template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true,
template: "#: value.x # - #: value.y # (#: value.size #)"
}
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
If set to true the chart will display the series tooltip. By default the series tooltip is not displayed.
Example - show the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
tooltip: {
visible: true
}
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
},
]
});
</script>
The verticalArea chart series options. Accepts all values supported by the series option.
Example - set the verticalArea chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
verticalArea: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "verticalArea", data: [1, 2] }
]
});
</script>
The verticalLine chart series options. Accepts all values supported by the series option.
Example - set the verticalLine chart default options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
seriesDefaults: {
verticalLine: {
color: "red",
opacity: 0.1
}
},
series: [
{ type: "verticalLine", data: [1, 2] }
]
});
</script>
The chart theme.
The supported values are:
- "black"
- "blueopal"
- "bootstrap"
- "default"
- "highcontrast"
- "metro"
- "metroblack"
- "moonlight"
- "silver"
- "uniform"
The chart title configuration options or text.
Example - set the chart title as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: "Title",
series: [
{ data: [1, 2] }
]
});
</script>
Example - configure the chart title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
align: "left
},
series: [
{ data: [1, 2] }
]
});
</script>
The alignment of the title.
- "center" - the text is aligned to the middle.
- "left" - the text is aligned to the left.
- "right" - the text is aligned to the right.
Example - configure the chart alignment
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
align: "left
},
series: [
{ data: [1, 2] }
]
});
</script>
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - configure the chart alignment
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
background: "green"
},
series: [
{ data: [1, 2] }
]
});
</script>
The border of the series.
Example - set the chart title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
color: "green",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the chart title border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the chart title border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
dashType: "dashDot",
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The font of the title.
Example - set the chart title border font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
font: "20px sans-serif"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the title. A numeric value will set all margins.
Example - set the chart series label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the title.
Example - set the chart series label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the title.
Example - set the chart series label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the title.
Example - set the chart series label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the title.
Example - set the chart series label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
margin: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the title. A numeric value will set all margins.
Example - set the chart series label padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the title.
Example - set the chart series label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the title.
Example - set the chart series label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the title.
Example - set the chart series label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the title.
Example - set the chart series label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
padding: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The position of the title.
- "bottom" - the title is positioned on the bottom.
- "top" - the title is positioned on the top.
Example - set the chart title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
position: "bottom"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text of the chart title. You can also set the text directly for a title with default options.
Example - set the chart title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
position: "bottom"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the title. By default the title is not displayed.
Example - hide the title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
title: {
text: "Title",
visible: false
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The chart series tooltip configuration options.
The chart series tooltip is displayed when the tooltip.visible option is set to true.
Example - configure the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
background: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
background: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border configuration options.
Example - set the chart series tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border.
Example - set the chart series tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
border: {
width: 2,
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the chart series tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
border: {
width: 2
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the chart series tooltip color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
color: "green"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The tooltip font.
Example - set the chart series tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
font: "20px sans-serif"
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The format of the labels. Uses kendo.format.
Format placeholders:
- Area, bar, column, line and pie
- Bubble
- {0} - x value
- {1} - y value
- {2} - size value
- {3} - category name
- Scatter and scatterLine
- {0} - x value
- {1} - y value
- Candlestick and OHLC
- {0} - open value
- {1} - high value
- {2} - low value
- {3} - close value
- {4} - category name
Example - set the chart series tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
format: "{0} x {1} ({2:C})"
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
The padding of the tooltip. A numeric value will set all paddings.
Example - set the chart series tooltip padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
padding: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the tooltip.
Example - set the chart series tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
padding: {
bottom: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the tooltip.
Example - set the chart series tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
padding: {
left: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the tooltip.
Example - set the chart series tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
padding: {
right: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the tooltip.
Example - set the chart series tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
padding: {
top: 10
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display a single tooltip for every category.
Example - display shared tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [1,2,3]
},{
data: [1,2,3]
},{
data: [1,2,3]
}],
tooltip: {
visible: true,
shared: true
}
});
</script>
The template which renders the shared tooltip.
The fields which can be used in the template are:
- points - the category points
- category - the category name
Example - set the shared tooltip template
<div id="chart"></div>
<script id="template" type="text/x-kendo-template">
<div>#: category #</div>
# for (var i = 0; i < points.length; i++) { #
<div>#: points[i].series.name# : #: points[i].value #</div>
# } #
</script>
<script>
$("#chart").kendoChart({
series: [
{ name: "Series 1", data: [1,2] },
{ name: "Series 2", data: [1,2] }
],
categoryAxis: {
categories: [2012, 2013]
},
tooltip: {
visible: true,
shared: true,
sharedTemplate:kendo.template($("#template").html())
}
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
- category - the category name
- dataItem - the original data item used to construct the point. Will be null if binding to array.
- series - the data series
- value - the point value (either a number or an object)
Example - set the chart series tooltip template
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true,
template: "#: value.x # - #: value.y # (#: value.size #)"
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
}
]
});
</script>
If set to true the chart will display the series tooltip. By default the series tooltip is not displayed.
Example - show the chart series tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
tooltip: {
visible: true
},
series: [
{
type: "bubble",
data: [ [1, 2, 3] ]
},
]
});
</script>
If set to true the chart will play animations when displaying the series. By default animations are enabled.
Example - disable the chart animations
<div id="chart"></div>
<script>
$("#chart").kendoChart({
transitions: false,
series: [
{ data: [1, 2, 3] }
]
});
</script>
The value axis configuration options.
Example - configure the chart value axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
min: 0,
max: 10,
majorUnit: 2
},
series: [
{ data: [1, 2] }
]
});
</script>
Value at which the category axis crosses this axis. (Only for object)
Value indices at which the category axes cross the value axis. (Only for array)
Date at which the category axis crosses this axis. (Only for date)
Example - set the value axis crossing values
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [{
data: [4,7,10]
}],
categoryAxes: [{
categories: ["A", "B", "C"]
}, {
categories: ["D", "E", "F"]
}],
valueAxis: {
axisCrossingValues: [0, 12]
}
});
</script>
The color of the value axis. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
color: "green"
},
series: [
{ data: [1, 2] }
]
});
</script>
The crosshair configuration options.
Example - set the value axis crosshair options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
color: "green",
width: 2,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis crosshair color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
color: "green",
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The dash type of the crosshair.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value crosshair line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
dashType: "dashDot",
visible: true
}
},
series: [
{
type: "line",
data: [1, 2, 3]
}
]
});
</script>
The opacity of the crosshair. By default the crosshair is opaque.
Example - set the value axis crosshair opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
opacity: 0.1,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The crosshar tooltip options.
Example - configure the value axis crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
background: "green",
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{
type: "line",
data: [1, 2, 3]
}
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis crosshair tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
background: "green",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The border options.
Example - set the value axis crosshair tooltip border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis crosshair tooltip border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis crosshair tooltip border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
border: {
dashType: "dashDot",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the value axis crosshair tooltip border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
border: {
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The text color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis crosshair tooltip color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
color: "#aa00bb",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
Example - set the value axis crosshair tooltip color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
color: "rgb(128, 0, 255)",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
Example - set the value axis crosshair tooltip color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
color: "green",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The tooltip font.
Example - set the value axis crosshair tooltip font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
font: "20px sans-serif",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The format used to display the tooltip. Uses kendo.format. Contains one placeholder ("{0}") which represents the value value.
Example - set the value axis crosshair tooltip format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
format: "Year: {0}",
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The padding of the crosshair tooltip. A numeric value will set all paddings.
Example - set the value axis crosshair tooltip padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
padding: 20,
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the crosshair tooltip.
Example - set the value axis crosshair tooltip bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
padding: {
bottom: 20
},
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the crosshair tooltip.
Example - set the value axis crosshair tooltip left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
padding: {
left: 20
},
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the crosshair tooltip.
Example - set the value axis crosshair tooltip right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
padding: {
right: 20
},
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the crosshair tooltip.
Example - set the value axis crosshair tooltip top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
padding: {
top: 20
},
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the tooltip.
The fields which can be used in the template are:
Example - set the value axis crosshair tooltip template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
template: "Year: #: value #",
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis crosshair tooltip template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
crosshair: {
tooltip: {
template: kendo.template("Year: #: value #"),
visible: true
},
visible: true
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis crosshair tooltip. By default the value axis crosshair tooltip is not visible.
Example - show the value axis crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
tooltip: {
visible: true
},
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis crosshair. By default the value axis crosshair is not visible.
Example - show the value axis crosshair
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The width of the crosshair in pixels.
Example - set the value axis crosshair width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
crosshair: {
width: 2,
visible: true
}
},
series: [
{ type: "line", data: [1, 2, 3] }
]
});
</script>
The axis labels configuration.
Example - configure the value axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
background: "green",
color: "white"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis label background as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
background: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis label background as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
background: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis label background by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the labels.
Example - set the value axis label border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
border: {
color: "green",
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis label border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
border: {
color: "green",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis label border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
border: {
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the value axis label border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
border: {
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the labels. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis label color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis label color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis label color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
labels: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The font style of the labels.
Example - set the value axis label font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
font: "20px sans-serif",
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.
Example - set the value axis label format
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
format: "{0:C}"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the labels. A numeric value will set all margins.
Example - set the value axis label margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
margin: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the labels.
Example - set the value axis label bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
margin: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the labels.
Example - set the value axis label left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
margin: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the labels.
Example - set the value axis label right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
margin: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the labels.
Example - set the value axis label top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
margin: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will mirror the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.
Example - mirror the value axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
mirror: true
},
categories: ["2012", "2013"]
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the labels. A numeric value will set all margins.
Example - set the value axis label padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
padding: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the labels.
Example - set the value axis label bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
padding: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the labels.
Example - set the value axis label left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
padding: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the labels.
Example - set the value axis label right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
padding: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the labels.
Example - set the value axis label top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
padding: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The rotation angle of the labels. By default the labels are not rotated.
Example - rotate the value axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
rotation: 90
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The number of labels to skip. By default no labels are skipped.
Example - skip value axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
skip: 1
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The template which renders the labels.
The fields which can be used in the template are:
Example - set the value axis template as a string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
template: "Year: #: value #"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis template as a function
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
template: kendo.template("Year: #: value #")
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis labels. By default the category axis labels are visible.
Example - hide the value axis labels
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
labels: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.
Example - configure the value axis line
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "#aa00bb",
width: 3
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the lines. Accepts a valid CSS color string, including hex and rgb.
Setting the color option affects the major and minor ticks, but not the grid lines.
Example - set the value axis line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
line: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the line.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
dashType: "dashDot"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis lines. By default the value axis lines are visible.
Example - hide the value axis lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the line in pixels. Also affects the major and minor ticks, but not the grid lines.
Example - set the value axis line width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
line: {
width: 3
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the major grid lines. These are the lines that are an extension of the major ticks through the
body of the chart.
Example - configure the value axis major grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
majorGridLines: {
width: 3,
color: "green"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the major grid lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis major grid line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
majorGridLines: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis major grid line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
majorGridLines: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis major grid line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
majorGridLines: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the major grid lines.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis major grid line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
majorGridLines: {
dashType: "dashDot"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the major grid lines. By default the major grid lines are visible.
Example - hide the value axis major grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
majorGridLines: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the value axis major grid lines in pixels.
Example - set the value axis major grid lines width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
majorGridLines: {
width: 3
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The interval between major divisions.
Example - set the value axis major unit
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
majorUnit: 1
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The maximum value of the axis.
Example - set the value axis maximum
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
max: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The minimum value of the axis.
Example - set the value axis minimum
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
min: 10
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the minor grid lines. These are the lines that are an extension of the minor ticks through the
body of the chart.
Example - configure the value axis minor grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorGridLines: {
width: 3,
color: "green"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the minor grid lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis minor grid line color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorGridLines: {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis minor grid line color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorGridLines: {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis minor grid line color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorGridLines: {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the minor grid lines.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis minor grid line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorGridLines: {
dashType: "dashDot"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the minor grid lines. By default the minor grid lines are visible.
Example - hide the value axis minor grid lines
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorGridLines: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the value axis minor grid lines in pixels.
Example - set the value axis minor grid lines width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorGridLines: {
width: 3
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The configuration of the value axis minor ticks.
Example - configure the value axis minor ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorTicks: {
size: 6,
color: "green",
width: 5
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the value axis minor ticks lines. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis minor ticks color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorTicks {
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis minor ticks color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorTicks {
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis minor ticks color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorTicks {
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The length of the tick line in pixels.
Example - set the value axis minor ticks size
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorTicks: {
size: 6
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis minor ticks. By default the value axis minor ticks are visible.
Example - hide the value axis minor ticks
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorTicks: {
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the minor ticks in pixels.
Example - set the value axis minor ticks width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
minorTicks: {
width: 3
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The interval between minor divisions. It defaults to 1/5th of the valueAxis.majorUnit.
Example - set the value axis minor unit
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
minorUnit: 2
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The unique axis name. Used to associate a series with a value axis using the series.axis option.
Example - set the value axis name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1,2,3] },
{ data: [1,2,3,4],
axis: "secondValueAxis"
}
],
panes:[
{ name: "topPane" },
{ name: "bottomPane" }
],
valueAxis: [
{ pane: "topPane" },
{ name: "secondValueAxis", pane: "bottomPane" }
]
});
</script>
If set to true the chart will prevent the automatic axis range from snapping to 0.
Example - prevent automatic axis range snapping
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
narrowRange: false
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The name of the pane that the value axis should be rendered in.
The axis will be rendered in the first (default) pane if not set.
Example - set the value axis pane
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ data: [1,2,3] },
{ data: [1,2,3,4],
axis: "secondValueAxis"
}
],
panes:[
{ name: "topPane" },
{ name: "bottomPane" }
],
valueAxis: [
{ pane: "topPane" },
{ name: "secondValueAxis", pane: "bottomPane" }
]
});
</script>
The plot bands of the value axis.
Example - set the value plot bands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the plot band.
Example - set the value plot band color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The start position of the plot band in axis units.
Example - set the value plot band start position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The opacity of the plot band.
Example - set the value plot band opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red", opacity: 0.5 }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The end position of the plot band in axis units.
Example - set the value plot band end position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the value axis direction will be reversed. By default categories are listed from left to right and from bottom to top.
Example - reverse the value axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
categories: ["2012", "2013"],
reverse: true
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The title configuration of the value axis.
Example - set the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
background: "green",
border: {
width: 1,
}
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The background color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
background: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The border of the title.
Example - set the value axis title border
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
color: "green",
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The color of the border. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title border color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
color: "green",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The dash type of the border.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value axis title border dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
dashType: "dashDot",
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.
Example - set the value axis title border width
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
border: {
width: 1
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text color of the title. Accepts a valid CSS color string, including hex and rgb.
Example - set the value axis title color as a hex string
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "#aa00bb"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis title color as a RGB value
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "rgb(128, 0, 255)"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
Example - set the value axis title color by name
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
color: "green"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The font style of the title.
Example - set the value axis title font
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
font: "20px sans-serif",
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The margin of the title. A numeric value will set all margins.
Example - set the value axis title margin as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom margin of the title.
Example - set the value axis title bottom margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left margin of the title.
Example - set the value axis title left margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right margin of the title.
Example - set the value axis title right margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top margin of the title.
Example - set the value axis title top margin
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
margin: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The padding of the title. A numeric value will set all paddings.
Example - set the value axis title padding as a number
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: 20
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The bottom padding of the title.
Example - set the value axis title bottom padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
bottom: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The left padding of the title.
Example - set the value axis title left padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
left: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The right padding of the title.
Example - set the value axis title right padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
right: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The top padding of the title.
Example - set the value axis title top padding
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
padding: {
top: 20
}
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The position of the title.
The supported values are:
- "top" - the axis title is positioned on the top (applicable to vertical axis)
- "bottom" - the axis title is positioned on the bottom (applicable to vertical axis)
- "left" - the axis title is positioned on the left (applicable to horizontal axis)
- "right" - the axis title is positioned on the right (applicable to horizontal axis)
- "center" - the axis title is positioned in the center
Example - set the value axis title position
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
title: {
text: "Years",
position: "left"
}
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The rotation angle of the title. By default the title is not rotated.
Example - rotate the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years",
rotation: 90
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
The text of the title.
Example - set the value axis title text
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years"
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis title. By default the value axis title is visible.
Example - hide the value axis title
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: [{
title: {
text: "Years"
visible: false
}
}],
series: [
{ data: [1, 2, 3] }
]
});
</script>
If set to true the chart will display the value axis. By default the value axis is visible.
Example - hide the value axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
visible: false
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
The X-axis configuration options of the scatter chart X-axis. Supports all valueAxis options.
Example - set the scatter chart x axis
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
color: "red",
min: -5,
max: 5,
labels: {
background: "green",
color: "white"
}
}
});
</script>
Value at which the Y axis crosses this axis. (Only for object)
Value indices at which the Y axes cross the value axis. (Only for array)
Date at which the Y axis crosses this axis. (Only for date)
Set a value greater than or equal to the axis maximum value to denote the far end of the axis.
Example - set the scatter chart x axis crossing values
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
axisCrossingValue: [1, 2]
}
});
</script>
The base time interval for the axis labels. The default baseUnit is determined automatically from the value range. Available options:
- days
- hours
- minutes
- months
- weeks
- years
Example - set the scatter chart x axis base unit
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{
type: "scatter",
data: [
[new Date("01/01/2013"), 2],
[new Date("01/02/2013"), 2],
[new Date("01/03/2013"), 2]
]
}
],
xAxis: {
type: "date",
baseUnit: "hours"
}
});
</script>
The color of the axis. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
series: [
{ type: "scatter", data: [[1, 2]] }
],
xAxis: {
color: "red"
}
});
</script>
The crosshair configuration options.
Example - set the scatter chart x axis crosshair options
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
color: "green",
width: 2,
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>
The color of the crosshair. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis crosshair color
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
color: "green",
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>
The dash type of the crosshair.
The following dash types are supported:
- "dash" - a line consisting of dashes
- "dashDot" - a line consisting of a repeating pattern of dash-dot
- "dot" - a line consisting of dots
- "longDash" - a line consisting of a repeating pattern of long-dash
- "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
- "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
- "solid" - a solid line
Example - set the value crosshair line dash type
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
dashType: "dashDot",
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>
The opacity of the crosshair. By default the crosshair is opaque.
Example - set the scatter chart x axis crosshair opacity
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
opacity: 0.1,
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>
The crosshar tooltip options.
Example - configure the scatter chart x axis crosshair tooltip
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
tooltip: {
background: "green",
border: {
color: "black",
width: 2
},
visible: true
},
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>
The background color of the tooltip. Accepts a valid CSS color string, including hex and rgb.
Example - set the scatter chart x axis crosshair tooltip background
<div id="chart"></div>
<script>
$("#chart").kendoChart({
xAxis: {
crosshair: {
tooltip: {
background: "green",
visible: true
},
visible: true
}
},
series: [
{ type: "scatter", data: [[1, 2]] }
]
});
</script>