Geek Answers Handbook

Using the Kendo Dataviz Vertical Bullet Chart, How to add tags like Bar Graph?

Trying to build a Bullet diagram is exactly the same as marketing desires. The desired schedule is as follows:

enter image description here

How do you add labels at the top of the columns?

I tried to set the label property from the Kendo documentation:

labels: { visible: true, format: "{0}", font: "14px Arial", },

Here is my script that does not work:

  $barChart = $("#bar-chart").empty(); $barChart.kendoChart({ theme: global.app.chartsTheme, renderAs: "svg", legend: { position: "bottom" }, seriesDefaults: { type: "column" }, series: [ { type: "verticalBullet", currentField: "score", targetField: "average", target: { color: "#444", dashType: "dot", line: { width: 1, } }, labels: { visible: true, format: "{0}", font: "14px Arial", }, data: [ { score: 93.7, average: 65.2, }, { score: 80.2, average: 22.2, }, { score: 60.8, average: 35.2, }, { score: 82.1, average: 45.2, }, { score: 74.2, average: 55.2, } ] } ], categoryAxis: { labels: { rotation: -45 }, categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"], line: { visible: false }, color: "#444", axisCrossingValue: [0, 0, 100, 100] }, tooltip: { visible: false } }).data("kendoChart");

Any help would be greatly appreciated.

+7
source share
3 answers

Since this is not a supported feature, any attempt to do this is inherently a hack. I looked at the demo version of kendo and noticed that there is a tooltip element with a tooltip of class k that contains the final value for the bar on hover. You should look at this mouseover to display the totals.

+1
source

What you are trying to do is possible. I created an example on our Try Kendo website here: http://trykendoui.telerik.com/@jbristowe/aDIf/7

0
source

Recall that markers do not support the type of label that you need, and histograms do not support the visual you need (a special line on the chart).

You can switch back to the histograms and write your own visual. However, an easier way is to use the plot on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands

 <div id="chart"></div> <script> $("#chart").kendoChart({ valueAxis: { plotBands: [ { from: 1, to: 2, color: "red" } ] }, series: [ { data: [1, 2, 3] } ] }); </script>

If you make a very narrow group, it will work beautifully. It will not be dashed, as in your reference image, and will be below the line, which may be a problem ... To go deeper, you will need a custom visual, and it will be involved: https://docs.telerik.com/kendo-ui/ api / javascript / dataviz / ui / chart / configuration / series.visual

0
source

More articles:


All Articles