series.typeString(default: "column")
The type of the series.
The supported values are:
areabarbubblebulletcandlestickcolumndonutfunnelpyramidheatmaphorizontalWaterfalllinelinearTrendlineexponentialTrendlinelogarithmicTrendlinepowerTrendlinepolynomialTrendlinemovingAverageTrendlineohlcpiepolarAreapolarLinepolarScatterradarArearadarColumnradarLinerangeArearangeBarrangeColumnscatterscatterLineverticalAreaverticalBoxPlotverticalBulletverticalLineverticalRangeAreawaterfall
Different chart types expect data in specific formats:
- Simple values:
[1, 2, 3, 4]- Line, Area, Column, Bar - Category-value objects:
[{category: "A", value: 10}]- Pie, Donut, Funnel, Pyramid - Two-value arrays:
[[x, y], [x, y]]- Scatter, Range charts - Three-value arrays:
[[x, y, size]]- Bubble charts - Four-value arrays:
[[open, high, low, close]]- Candlestick, OHLC - Five-value arrays:
[[min, q1, median, q3, max]]- Box Plot - Target-current objects:
[{current: 750, target: 1000}]- Bullet charts
Example - area chart
<div id="area-chart"></div>
<script>
$("#area-chart").kendoChart({
series: [{
type: "area",
data: [1, 2, 3, 4, 5]
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"]
}
});
</script>Example - bar chart
<div id="bar-chart"></div>
<script>
$("#bar-chart").kendoChart({
series: [{
type: "bar",
data: [10, 20, 30, 40, 50]
}],
categoryAxis: {
categories: ["A", "B", "C", "D", "E"]
}
});
</script>Example - bubble chart
<div id="bubble-chart"></div>
<script>
$("#bubble-chart").kendoChart({
series: [{
type: "bubble",
data: [
[10, 20, 5],
[15, 25, 8],
[20, 30, 12]
]
}],
xAxis: { title: { text: "X Values" } },
yAxis: { title: { text: "Y Values" } }
});
</script>Example - bullet chart
<div id="bullet-chart"></div>
<script>
$("#bullet-chart").kendoChart({
series: [{
type: "bullet",
data: [
{ current: 750, target: 1000 },
{ current: 650, target: 900 }
]
}],
categoryAxis: {
categories: ["Product A", "Product B"]
}
});
</script>Example - candlestick chart
<div id="candlestick-chart"></div>
<script>
$("#candlestick-chart").kendoChart({
series: [{
type: "candlestick",
data: [
[100, 110, 95, 105],
[105, 115, 100, 110],
[110, 120, 105, 115]
]
}],
categoryAxis: {
categories: ["Day 1", "Day 2", "Day 3"]
}
});
</script>Example - column chart
<div id="column-chart"></div>
<script>
$("#column-chart").kendoChart({
series: [{
type: "column",
data: [5, 10, 15, 20, 25]
}],
categoryAxis: {
categories: ["Q1", "Q2", "Q3", "Q4", "Q5"]
}
});
</script>Example - donut chart
<div id="donut-chart"></div>
<script>
$("#donut-chart").kendoChart({
series: [{
type: "donut",
data: [
{ category: "Desktop", value: 40 },
{ category: "Mobile", value: 35 },
{ category: "Tablet", value: 25 }
]
}]
});
</script>Example - exponential trendline
<div id="exponential-trendline-chart"></div>
<script>
$("#exponential-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "column",
data: [2, 4, 8, 16, 32]
}, {
type: "exponentialTrendline",
for: "series1"
}],
categoryAxis: {
categories: ["1", "2", "3", "4", "5"]
}
});
</script>Example - funnel chart
<div id="funnel-chart"></div>
<script>
$("#funnel-chart").kendoChart({
series: [{
type: "funnel",
data: [
{ category: "Visitors", value: 1000 },
{ category: "Leads", value: 500 },
{ category: "Customers", value: 100 }
]
}]
});
</script>Example - heatmap chart
<div id="heatmap-chart"></div>
<script>
$("#heatmap-chart").kendoChart({
series: [{
type: "heatmap",
data: [
["A", "X", 10],
["A", "Y", 20],
["B", "X", 15],
["B", "Y", 25]
]
}],
xAxis: {
categories: ["A", "B"]
},
yAxis: {
categories: ["X", "Y"]
}
});
</script>Example - horizontal waterfall chart
<div id="horizontal-waterfall-chart"></div>
<script>
$("#horizontal-waterfall-chart").kendoChart({
series: [{
type: "horizontalWaterfall",
data: [100, 50, -30, 20, -10]
}],
categoryAxis: {
categories: ["Start", "+Revenue", "-Costs", "+Profit", "-Loss"]
}
});
</script>Example - line chart
<div id="line-chart"></div>
<script>
$("#line-chart").kendoChart({
series: [{
type: "line",
data: [2, 4, 6, 8, 10]
}],
categoryAxis: {
categories: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"]
}
});
</script>Example - linear trendline
<div id="linear-trendline-chart"></div>
<script>
$("#linear-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "column",
data: [10, 15, 12, 18, 20]
}, {
type: "linearTrendline",
for: "series1"
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May"]
}
});
</script>Example - logarithmic trendline
<div id="logarithmic-trendline-chart"></div>
<script>
$("#logarithmic-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "scatter",
data: [[1, 0], [10, 1], [100, 2], [1000, 3]]
}, {
type: "logarithmicTrendline",
for: "series1"
}],
xAxis: { type: "log" },
yAxis: { type: "numeric" }
});
</script>Example - moving average trendline
<div id="moving-average-trendline-chart"></div>
<script>
$("#moving-average-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "column",
data: [10, 12, 8, 15, 18, 14, 16, 20, 25, 22]
}, {
type: "movingAverageTrendline",
for: "series1",
period: 3
}],
categoryAxis: {
categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
}
});
</script>Example - ohlc chart
<div id="ohlc-chart"></div>
<script>
$("#ohlc-chart").kendoChart({
series: [{
type: "ohlc",
data: [
[100, 110, 95, 105],
[105, 115, 100, 110],
[110, 120, 105, 115]
]
}],
categoryAxis: {
categories: ["Period 1", "Period 2", "Period 3"]
}
});
</script>Example - pie chart
<div id="pie-chart"></div>
<script>
$("#pie-chart").kendoChart({
series: [{
type: "pie",
data: [
{ category: "Chrome", value: 65 },
{ category: "Firefox", value: 20 },
{ category: "Safari", value: 15 }
]
}]
});
</script>Example - polar area chart
<div id="polar-area-chart"></div>
<script>
$("#polar-area-chart").kendoChart({
series: [{
type: "polarArea",
data: [
[10, 10],
[30, 20],
[50, 30],
[70, 20],
[90, 10]
]
}]
});
</script>Example - polar line chart
<div id="polar-line-chart"></div>
<script>
$("#polar-line-chart").kendoChart({
series: [{
type: "polarLine",
data: [
[0, 0],
[15, 2],
[30, 4],
[45, 6],
[60, 8]
]
}]
});
</script>Example - polar scatter chart
<div id="polar-scatter-chart"></div>
<script>
$("#polar-scatter-chart").kendoChart({
series: [{
type: "polarScatter",
data: [
[0, 10],
[90, 20],
[180, 15],
[270, 25]
]
}]
});
</script>Example - polynomial trendline
<div id="polynomial-trendline-chart"></div>
<script>
$("#polynomial-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "column",
data: [1, 4, 9, 16, 25, 16, 9, 4, 1]
}, {
type: "polynomialTrendline",
for: "series1",
order: 2
}],
categoryAxis: {
categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
}
});
</script>Example - power trendline
<div id="power-trendline-chart"></div>
<script>
$("#power-trendline-chart").kendoChart({
series: [{
name: "series1",
type: "scatter",
data: [[1, 1], [2, 4], [3, 9], [4, 16]]
}, {
type: "powerTrendline",
for: "series1"
}],
xAxis: { title: { text: "X" } },
yAxis: { title: { text: "X²" } }
});
</script>Example - pyramid chart
<div id="pyramid-chart"></div>
<script>
$("#pyramid-chart").kendoChart({
series: [{
type: "pyramid",
data: [
{ category: "Level 1", value: 100 },
{ category: "Level 2", value: 75 },
{ category: "Level 3", value: 50 }
]
}]
});
</script>Example - radar area chart
<div id="radar-area-chart"></div>
<script>
$("#radar-area-chart").kendoChart({
series: [{
type: "radarArea",
data: [10, 15, 20, 25, 30]
}],
categoryAxis: {
categories: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"]
}
});
</script>Example - radar column chart
<div id="radar-column-chart"></div>
<script>
$("#radar-column-chart").kendoChart({
series: [{
type: "radarColumn",
data: [5, 10, 15, 20, 12]
}],
categoryAxis: {
categories: ["A", "B", "C", "D", "E"]
}
});
</script>Example - radar line chart
<div id="radar-line-chart"></div>
<script>
$("#radar-line-chart").kendoChart({
series: [{
type: "radarLine",
data: [8, 12, 16, 20, 14]
}],
categoryAxis: {
categories: ["Performance", "Quality", "Design", "Value", "Support"]
}
});
</script>Example - range area chart
<div id="range-area-chart"></div>
<script>
$("#range-area-chart").kendoChart({
series: [{
type: "rangeArea",
data: [
[5, 15],
[10, 25],
[15, 35],
[20, 40]
]
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr"]
}
});
</script>Example - range bar chart
<div id="range-bar-chart"></div>
<script>
$("#range-bar-chart").kendoChart({
series: [{
type: "rangeBar",
data: [
[10, 30],
[15, 35],
[20, 50],
[25, 45]
]
}],
categoryAxis: {
categories: ["Product A", "Product B", "Product C", "Product D"]
}
});
</script>Example - range column chart
<div id="range-column-chart"></div>
<script>
$("#range-column-chart").kendoChart({
series: [{
type: "rangeColumn",
data: [
[20, 40],
[25, 50],
[30, 60],
[35, 65]
]
}],
categoryAxis: {
categories: ["Q1", "Q2", "Q3", "Q4"]
}
});
</script>Example - scatter chart
<div id="scatter-chart"></div>
<script>
$("#scatter-chart").kendoChart({
series: [{
type: "scatter",
data: [
[10, 20],
[15, 25],
[20, 30],
[25, 35]
]
}],
xAxis: { title: { text: "X Axis" } },
yAxis: { title: { text: "Y Axis" } }
});
</script>Example - scatter line chart
<div id="scatterline-chart"></div>
<script>
$("#scatterline-chart").kendoChart({
series: [{
type: "scatterLine",
data: [
[1, 10],
[2, 20],
[3, 30],
[4, 25]
]
}],
xAxis: { title: { text: "X Values" } },
yAxis: { title: { text: "Y Values" } }
});
</script>Example - vertical area chart
<div id="vertical-area-chart"></div>
<script>
$("#vertical-area-chart").kendoChart({
series: [{
type: "verticalArea",
data: [10, 20, 30, 25, 15]
}],
categoryAxis: {
categories: ["A", "B", "C", "D", "E"]
}
});
</script>Example - vertical box plot chart
<div id="vertical-boxplot-chart"></div>
<script>
$("#vertical-boxplot-chart").kendoChart({
series: [{
type: "verticalBoxPlot",
data: [
[5, 15, 20, 25, 35],
[10, 18, 25, 30, 40]
]
}],
categoryAxis: {
categories: ["Dataset 1", "Dataset 2"]
}
});
</script>Example - vertical bullet chart
<div id="vertical-bullet-chart"></div>
<script>
$("#vertical-bullet-chart").kendoChart({
series: [{
type: "verticalBullet",
data: [
{ current: 750, target: 1000 },
{ current: 650, target: 900 }
]
}],
categoryAxis: {
categories: ["Metric A", "Metric B"]
}
});
</script>Example - vertical line chart
<div id="vertical-line-chart"></div>
<script>
$("#vertical-line-chart").kendoChart({
series: [{
type: "verticalLine",
data: [5, 10, 15, 20, 25]
}],
categoryAxis: {
categories: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5"]
}
});
</script>Example - vertical range area chart
<div id="vertical-range-area-chart"></div>
<script>
$("#vertical-range-area-chart").kendoChart({
series: [{
type: "verticalRangeArea",
data: [
[10, 25],
[15, 30],
[20, 35],
[25, 40]
]
}],
categoryAxis: {
categories: ["Period 1", "Period 2", "Period 3", "Period 4"]
}
});
</script>Example - waterfall chart
<div id="waterfall-chart"></div>
<script>
$("#waterfall-chart").kendoChart({
series: [{
type: "waterfall",
data: [100, 50, -30, 20, -10]
}],
categoryAxis: {
categories: ["Start", "+Income", "-Expenses", "+Bonus", "-Tax"]
}
});
</script>In this article