Legend template

[Ande2013]

Is it possible to define a template for the legend? Just as it's possible to do for the tooltips and labels?

Thanks

[Iliana Dyankova]

Hello Andreas,

Basically there is a legend.labels.template option which can be used for this purpose. In case you have specific requirements please elaborate a bit more on the exact outcome you would like to achieve - this way I would be able to advice you further and provide concrete recommendations.

Regards,
Iliana Nikolova
Telerik

[Ande2013]

I am using the ASP.NET MVC wrappers and there is no Legend.Labels property.

I have tried using JavaScript as suggested but this didn't make any difference:

 $("#Chart").data("kendoChart").legend.labels.template= "Name: #: text #";

[Iliana Dyankova]

Hi Andreas,

There was an issue with legend.labels.template in the previous versions of Kendo UI Chart for ASP.NET MVC, however our developers have managed to address it and everything is working as expected with Kendo UI Q2 2013 Beta release (v2013.2.626). For example you could specify the template in the following way: 

@(Html.Kendo().Chart()
  //....
  .Legend(l => l.Labels(a => a.Template("Name: #= text #")))
)

As for the JavaScript version,  the correct syntax is as follows: 

$("#chart").kendoChart({
  //....
  legend: {
    labels: {
       template: "Name: #= text #"
     }
   }
});

Regards,
Iliana Nikolova
Telerik

[Ande2013]

I have got the new version of the controls, and there is indeed a new property called template and I can set a template as suggested in your example.  (this is using the ASP.NET MVC wrappers)

However, if I try to make the label show the same as the tooltip by using #= text#: #= value#, then I get an error saying value is undefined? ( #= value#  works just fine for the tooltip).

[Iliana Dyankova]

Hello Andreas,

The error is caused by value is not a valid field for the legend.labels.template (link). Please keep in mind the legend is due to the whole series, not to particular points from the series (while value is due to particular points from the series). In case you would like to display some values in the legend you should create a custom function which calculates them. 

Regards,
Iliana Nikolova
Telerik

[Rajesh]

I am using a stacked bar chart that could have upto 15 series. I'd like to only show the legend for the series that have values greater than 0. Is there a way to do this ?

For instance, I'd only like to show 2 legends for the graph below.


Here is my kendo chart
<div class="device-installed-bar">
                                <div kendo-chart="connectorMetadata.deviceDetailsKChart"
                                     k-title="{visible: 'false'}"
                                     k-chart-area="{background:'', width:800, height:100}"
                                     k-legend=" {position:'right', labels: {template: '#: text #'}, padding:0, margin:-5}"
                                     k-series-defaults="{ overlay: {gradient: 'none'},type: 'bar', markers: { visible: false }, stack: 'true' }"
                                     k-series="[
                                        {name: 'Stopped Devices', field: 'stoppedCount', color: '#f5985a', labels: {visible: 'true', position: 'left', background: ''} },
                                        {name: 'Running Devices', field: 'runningCount', color: '#65C178', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Failed Install Devices', field: 'failedInstallCount', color: '#e45b6d', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Stop failed Devices', field: 'stopFailedCount', color: '#FFBD0B', labels: {visible: 'true', position: 'left', background: ''} },
                                        {name: 'Start failed Devices', field: 'startFailedCount', color: '#db64f9', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Uninstall failed Devices', field: 'uninstallFailedCount', color: '#fcb2b2', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Upgrade failed Devices', field: 'upgradeFailedCount', color: '#d4a43e', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Configuration failed Devices', field: 'configFailedCount', color: '#a67669', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Installing Devices', field: 'installingCount', color: '#39f5b5', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Upgrading Devices', field: 'upgradingCount', color: '#3636c2', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Uninstalling Devices', field: 'uninstallingCount', color: '#861616', labels: {visible: 'true', position: 'left', background: ''}},
                                        {name: 'Editing configuration Devices', field: 'configuringCount', color: '#a4b111', labels: {visible: 'true', position: 'left', background: ''}}
                                     ]"
                                     k-data-source="connectorMetadata.deviceDetailsKDataSource"
                                     k-value-axis="{labels: { format: '{0}' }, visible: false, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }, axisCrossingValue:0}"
                                     k-category-axis="{line: { visible: false }, majorGridLines: { visible: false }, majorTicks: { visible: false, width: 0 }}"
                                     k-tooltip="{visible: true, format: '{0}%', template: '#= series.name #: #= value #'}"
                                     k-series-hover="onSeriesHover"
                                     k-on-series-click="onDevicesSeriesClick(kendoEvent)"
                                     k-transitions="false"
                                >
                                </div>

[Iliana Dyankova]

Hi Rajesh,

As I mentioned in my previous post, chart legend is due to the whole series, not to the points values in the series. If you would like to hide particular series from the legend you could set their visibleInLegend options to false: 

<!--...-->
k-series="[
 {name: 'Stopped Devices', field: 'stoppedCount', color: '#f5985a', labels: {visible: 'true', position: 'left', background: ''} },
 {name: 'Running Devices', field: 'runningCount', color: '#65C178', labels: {visible: 'true', position: 'left', background: '', visibleInLegend: false }},
 //...

Regards,
Iliana Nikolova
Telerik

 

 

[Rajesh]

Hi Iliana,

 I fully understand your explanation. Can the condition for visible in legend be the value of the item being greatar than zero ? Something like visibleInLeged: (dataItem.max > 0)

 

-Rajesh

[Iliana Dyankova]

Hi Rajesh,

I am afraid this requirement is not supported - the visibleInLegend option accepts only boolean values.

Regards,
Iliana Nikolova
Telerik