This is a migrated thread and some comments may be shown as answers.

Add Target Marker to Donut Chart

2 Answers 286 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jimmy
Top achievements
Rank 1
Jimmy asked on 16 Jun 2017, 06:24 PM

Is there a way to add a target marker in the donut chart?

There are three slices in the chart. The first slice is the actual value, the second slice is the remaining value to reach the target and the third slice is the remaining value to 100%. See image: kpi-target.png

If the target has been reached or surpassed then the chart will be two slices (actual value and remaining to 100%). See image: kpi-target-2.png

Thanks.

2 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 20 Jun 2017, 02:00 PM
Hi Jimmy,

This functionality is not supported.

A possible workaround might be adding another category with low value and display a label only for this category. For example:
seriesDefaults: {
        labels: {
            template: "80%",
            position: "outsideEnd",
            visible: function(e) {
                if (e.category === "targetPercentage") return true;
                return false
            },
            background: "transparent"
        }
    },
    series: [{
        type: "donut",
        data: [{
            category: "Resolved",
            value: 65
        }, {
            category: "Target",
            value: 15
        }, {
            category: "targetPercentage",
            value: 0.5,
            color: "black"
        }, {
            category: "Max",
            value: 20
        }]
    }]

For a runnable example, check this Dojo: http://dojo.telerik.com/@pkozovski/obAQiG

I hope this information helps.


Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jimmy
Top achievements
Rank 1
answered on 20 Jun 2017, 02:24 PM

Hi Preslav,

The solution you provided is perfect. Thank you very much.

Tags
Charts
Asked by
Jimmy
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Jimmy
Top achievements
Rank 1
Share this question
or