Edit this page

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.

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

Dash Type

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

Scatter Chart

See Also

Other articles on Kendo UI Charts and chart types:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy