Scatter Charts
The Kendo UI Scatter Chart widget shows data as points defined by the values of their items. Scatter Charts are useful for displaying the relation between different sets of data, such as scientific experimental results, and plotting two-dimensional data.
Getting Started
Create the Scatter Chart
Each data point is an array that contains two values—X and Y.
The example below demonstrates how to create a Scatter Line Chart.
Example
$("#chart").kendoChart({
title: {
text: "Charge current vs. charge time"
},
legend: {
visible: true
},
seriesDefaults: {
type: "scatterLine"
},
series: [{
name: "0.8C",
data: [[10, 10], [15, 20], [20, 25], [32, 40], [43, 50], [55, 60], [60, 70], [70, 80], [90, 100]]
}, {
name: "1.6C",
data: [[10, 40], [17, 50], [18, 70], [35, 90], [47, 95], [60, 100]]
}, {
name: "3.1C",
data: [[10, 70], [13, 90], [25, 100]]
}],
xAxis: {
max: 90,
labels: {
format: "{0}m"
},
title: {
text: "Time"
}
},
yAxis: {
max: 100,
labels: {
format: "{0}%"
},
title: {
text: "Charge"
}
}
});
Figure 1: A sample Scatter Line Chart.
Configuration
Types of Lines
The default line type is solid. However, dash styles are also available through the dashType option, as demonstrated in the example below.
Example
series: [{ type: "scatterLine", name: "3.1C", data: [[10, 70], [13, 90], [25, 100]], dashType: "dot" }]
Figure 2: Dash line types
Removal of Connecting Lines
To remove the connecting lines, specify "scatter" instead of "scatterLine", which results in the Scatter Chart below.
Figure 3: A Scatter Chart with removed connecting lines
See Also
Other articles on Kendo UI Charts and chart types:
