Hide Chart Legends That Have No Visual Appearance

Environment

Product	Progress® Kendo UI® Chart for jQuery
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>