Questions on Kendo UI for jQuery Forum

2 questions

1 answer

78 views

Need Source code Below Format Kendo Chart with in the Angular Support

Need Source code Below Format Kendo Chart with in the Angular

Present below is jQuery, but instead of jQuery using angular support source code

https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution

Please find the reference image

BulletChart

Charts

OrgChart

ToolTip

answered on 01 Feb 2023

0 answers

73 views

how to set group data for Bullet chart

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"]
}
});

BulletChart

Charts

Data Source