Kendo Line Chart with additional bubble axis

Question

I'm trying to create a line chart and add an additional bubble point(s) on top of it. The charts are using DataSource as opposed to standard series.

So my line chart is structured like this:

http://dojo.telerik.com/@dmathisen/EZOTI

And now I'm trying to add a bubble to it. Something like this, but it doesn't work. I'm not sure how to make them play well together.

http://dojo.telerik.com/@dmathisen/IgEWA

Ideally, lines and bubbles would be on the same axis, but if it's not possible that's fine.

ezanker ezanker · Accepted Answer · 2017-04-06T20:30:41

The line chart uses categoryAxis and value Axis, while the bubble chart uses xAxis and yAxis. So instead of line, use the scatterline type of series.

Given data like this:

{
    "date": "12/30/2011",
    "close": 405,
    "volume": 6414369,
    "open": 403.51,
    "high": 406.28,
    "low": 403.49,
    "symbol": "2. AAPL"
},

Create your chart like this:

$("#chart").kendoChart({
    dataSource: {   
        data: data,
        sort: {
            field: "date",
            dir: "asc"
        },
        schema: {
            model: {
                fields: {
                    date: {
                        type: "date"
                    }
                }
            }
        }
    },
    seriesDefaults: {
        type: "scatterLine",
        markers: {size: 6}
    },
    series: [
        // lines
        { xField: "date", yField: "close" },
        { xField: "date", yField: "open" },
        { xField: "date", yField: "high" },
        // bubble
        { type: "bubble",  xField: "date", yField: "close", sizeField: "volume"}
    ],
    xAxis: [{}],
    yAxis: [{}]
});

Kendo Line Chart with additional bubble axis

1 Answers

DEMO