CODEWITHSUNDEEP
javascriptkendo-uikendo-mobilekendo-datavizbullet-chart
Rodney Hickman
Rodney Hickman

Reputation: 3143

Using Kendo Dataviz Vertical Bullet Graph, How to add labels similar to Bar Graph?

Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:

enter image description here

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

I've tried to set the labels property from the Kendo Documentation:

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

Here is my script that isn't working:

        $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.

Upvotes: 7

Views: 1476

Answers (3)

Brian MacKay
Brian MacKay

Reputation: 32037

To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).

You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband 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 band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual

Upvotes: 0

John Bristowe
John Bristowe

Reputation: 611

What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/@jbristowe/aDIf/7

Upvotes: 0

tnt-rox
tnt-rox

Reputation: 5558

Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.

Upvotes: 1

Related Questions