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

Donut Chart - Series Labels and Single Legend

10 Answers 667 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 03 Apr 2014, 07:02 PM
I am trying to create a donut chart with multiple series. I am using the basic example as a starting point http://demos.telerik.com/kendo-ui/dataviz/donut-charts/index.html.

I would like a single legend, I the example if I turn on legends it shows for each series (they are the same).
I would like to label the series by there name rather than the individual sections.

I have include what I get from the sample and what I would like.

Thanks,
Dan



10 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 07 Apr 2014, 09:04 AM
Hi Dan,

This scenario is not supported by Kendo UI Chart out-of-the-box. As a possible workaround I can suggest the following approach: 
- Set to the items in the second series visibleInLegend option to false;
- Prevent the legendItemClick event.
For your convenience I prepared a simple jsBin example which demonstrates the suggested approach in action.

Regards,
Iliana Nikolova
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Paul
Top achievements
Rank 1
answered on 01 Apr 2015, 02:28 PM
Hi there,

I just wanted to follow up on the answer above - I am encountering the same issue but am not sure how to implement the suggested fix.

In my case, I am using grouping on the datasource and declaring the series in a generic fashion - basically, I don't know how many series I will be receiving as I am consuming the data from a 3rd party and it can be dynamic.

var chartDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '/GetData',
                cache: false,
                dataType: "json"
            }
        },
        group: {
            field: "SeriesName"
        }
    });
 
$("#chart").kendoChart({
        dataSource: chartDataSource,
        seriesDefaults: {
            type: "donut",
        },
        series: [{
            field: "SeriesValue",
            name: "#= group.value #",
            categoryField: "Category"
        }],
        legend: {
            visible: true,
            position: "bottom"
        }});

Setting the visibleInLegend option has absolutely no effect. In any case, if it did work, it would surely be applied to all series?
            
0
Iliana Nikolova
Telerik team
answered on 03 Apr 2015, 10:29 AM
Hi Paul,

In this case you could use the series.visibleInLegendField option. For your convenience here is a basic example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Paul
Top achievements
Rank 1
answered on 10 Apr 2015, 08:18 AM

Hi Iliana,

If you note the last line in my post, I have already stated that the visibleInLegend option does not appear to have any effect.

In your example, your series are declared explicitly. In mine, they are declared using the groupings in the datasource and can be dynamic - perhaps this may explain the difference?

Thanks,

Paul

0
Paul
Top achievements
Rank 1
answered on 10 Apr 2015, 01:45 PM

Apologies, I've noticed the difference now - visibleInLegendField as you suggest.

I'll try this out and let you know if this resolves the issue.

Thanks,

0
Paul
Top achievements
Rank 1
answered on 13 Apr 2015, 12:46 PM

Hi there,

Just to confirm this did indeed resolve the problem, once I had put some logic into the datasource to set the value of the field correctly.

Thanks,

Paul

0
Peter
Top achievements
Rank 1
answered on 11 May 2017, 11:27 AM

Since this was 2 years ago, did anything change to make this easier?

I was able to fix the legend (kind-off) till now, but was not able to show the serie names yet. I can of course show them in the text when hovered, but i would like to have an always visible single label for each donut stating the series name.

0
Iliana Nikolova
Telerik team
answered on 15 May 2017, 07:52 AM
Hi Peter,

I am afraid there is no a different approach for this scenario which I could suggest. However, I am not quite sure why the series names are not shown in your application. Could you please provide a dojo which demonstrates your current implementation - this way I would be able to check what exactly is going wrong and provide concrete recommendations?

Regards,
Iliana Nikolova
Telerik by Progress
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
Peter
Top achievements
Rank 1
answered on 15 May 2017, 01:06 PM

I created http://dojo.telerik.com/eQazo/2 containing the current configuration. I would now like to show the serie names of each donut in a label. Something like the screenshot form the original question.

 

The onclick and onhover events of the legend are not included in the dojo, but i disabled them both in my current project.

0
Iliana Nikolova
Telerik team
answered on 17 May 2017, 07:24 AM
Hi Peter,

You could display only some of the series labels by using custom JavaScript in the labels.visible function (updated dojo). Another option is to use the series.labels.visual option and manually draw text where needed.

Regards,
Iliana Nikolova
Telerik by Progress
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.
Tags
Charts
Asked by
Daniel
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Paul
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or