Edit this page

Hide Chart Legends That Have No Visual Appearance

Environment

Product Progress Kendo UI Chart
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version 60.0.3112.101 (Official Build) (64-bit)

Description

My Chart shows legends for all the series that are multiplied by the grouping and configured against the data source. Sometimes I will have no data against some of the dynamically created series.

How can I hide the specific legend items for which I will not have any data to show?

Solution

To allow the use of custom logic and determine whether a legend item will be added or not, use the legend.item.visual property of the Chart.

  <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        legend: {
          item: {
            visual: function (e) {
              var color = e.options.markers.background;
              var labelColor = e.options.labels.color;
              var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
              var layout = new kendo.drawing.Layout(rect, {
                spacing: 5,
                alignItems: "center"
              });
              var allZeroValues = false;
              if(e.series.data.length == 0 ){
                allZeroValues = true;
              }

              if(!allZeroValues){
                var marker = new kendo.drawing.Path({
                  fill: {
                    color: color
                  }
                }).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();

                var label = new kendo.drawing.Text(e.series.name, [0, 0], {
                  fill: {
                    color: labelColor
                  }
                });

                layout.append(marker, label);
                layout.reflow()
              }


              return layout;
            }
          }
        },
        series: [
          { name: "Series 1", data: [] },
          { name: "Series 2", data: [3, 4, 5] }
        ]
      });
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy