how to set group data for Bullet chart

[Pheeraphong]

 

Hi, I want to create a bullet chart in the form of group data and set a unique target data, color, tooltip-template for each bar like "column chart" in picture but I can't find how to bind data for bullet chart 

Is there a way to make the chart look like the example? Please advise if there is a more suitable graph format to display this type of data.

 

  var testData3 = [
        { name: "data 1", data: [[200, 350], [150, 170]], color: "#E56997", target: { color: "#E56997" }, tooltip: { template: "#= dataItem #" } },
        { name: "data 2", data: [[210, 250], [190, 300]], color: "#062cda", target: { color: "#062cda" }, tooltip: { template: "#= dataItem.name #" } },
        { name: "data 3", data: [[350, 200], [200, 200]], color: "#fd0166", target: { color: "#fd0166" }, tooltip: { template: "#= value #" } },
        { name: "data 4", data: [[450, 200], [270, 400]], color: "#9F00FF", target: { color: "#9F00FF" }, tooltip: { template: "#= value #" } },
    ]

    $("#testChart").kendoChart({
        title: {
            text: "Bullet",
            font: fontSize
        },
        legend: { visible: false },
        dataSource: {
            data: testData3,
        },
        seriesDefaults: {
            type: "verticalBullet",
            overlay: { gradient: "none" },
            labels: {
                visible: true,
                background: "transparent",
                color: "white"
            },
            tooltip: {
                visible: true,
            }
        },
        series: testData3,
        categoryAxis: {
            categories: ["Jul", "Aug", "Sep"]
        }
    });

[Georgi Denchev]

Hello, Pheeraphong,

Thank you for the provided code snippet.

To set individual tooltip templates, you would have to define separate series(like you have already done).You can check the Local Binding demo to see how you can bind the chart to a dataSource, however I don't believe this is the result that you're after.

In order to have the chart as it is in the screenshot, you should use the data structure that you currently have.

I don't think there is a more suitable graph for this type of chart. The closest alternative would be to combine column series with line series.

The following demo demonstrates such a chart:

https://demos.telerik.com/kendo-ui/charts/index 

Let me know in case I misunderstood something.

Best Regards,

Georgi