Donut Chart - Series Labels and Single Legend

[Daniel]

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

[Iliana Dyankova]

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

 

 

[Paul]

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?
            

[Iliana Dyankova]

Hi Paul,

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

Regards,
Iliana Nikolova
Telerik

 

 

[Paul]

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

[Paul]

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,

[Paul]

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

[Peter]

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.

[Iliana Dyankova]

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

[Peter]

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.

[Iliana Dyankova]

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