Legend template

10 posts, 1 answers
  1. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 28 Jun 2013 Link to this post

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

    Thanks
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 28 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 01 Jul 2013 Link to this post

    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 #";
  4. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Ande2013
    Ande2013 avatar
    17 posts
    Member since:
    Jun 2013

    Posted 18 Jul 2013 Link to this post

    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).
  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 01 Apr 2015 in reply to Iliana Nikolova Link to this post

    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>
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 03 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 03 Apr 2015 in reply to Iliana Nikolova Link to this post

    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

  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Apr 2015 Link to this post

    Hi Rajesh,

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

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top