[Solved] Extra label next to series labels?

[Peter]

Hey there -- This is probably easier than I think, but I'm stumped. I want to display a label to the left of our series labels that gives them context. The series labels give numeric ranges in terms of days in progress, so I'd like the chart to say "Days in Progress:" before step labels like "<= 3". How can I achieve this?

[Hetali]

Hello Peter,

Currently, we do not have a built-in feature to add text with the legend items. However, the following custom method will help you achieve the desired output:

1. Add an item in the series with the name 'Days in Progress' and set the visibility of the series to false as seen below:

<kendo-chart-series-item name="Days in Progress" [visible]="false">
</kendo-chart-series-item>

2. The above step will not show any data or space in the chart but the color of the legend will be lightened. In order to set the color of the inactive legend items, please use the following snippet:

<kendo-chart-legend-inactive-items [labels]="{color: 'black'}">
</kendo-chart-legend-inactive-items>

3. To prevent the user from toggling the legend item, please use the LegendItemClickEvent to preventDefault as follows:

In HTML file:

<kendo-chart (legendItemClick)="onLegendItemClick($event)">
</kendo-chart>

In TS file:

onLegendItemClick(e){
  if(e.seriesIndex===0)
    e.preventDefault();
}

4. To hide the marker for the particular legend and prevent setting the color of the other legend items to black when disabled, please use the visual in the LegendItemComponent to create a custom visual. For example:

In HTML file:

<kendo-chart-legend position="bottom" orientation="horizontal" [item]="{ visual: visual }">
</kendo-chart-legend>

In TS file:

visual(e: any): any{
  const index = e.series.index;
  const color = e.options.markers.background;
  const labelColor = e.options.labels.color;
  const rect = new geometry.Rect([0, 0], [120, 50]);
  const layout = new Layout(rect, {
    spacing: 5,
    alignItems: "center"
  });

  const overlay = new Rect(layout.bbox(), {
    fill: {
      color: "#fff",
      opacity: 0
    },
    stroke: {
      color: "none"
    },
    cursor: "pointer"
  });
  const label = new Text(e.series.name, [0, 0], {
    font: e.options.labels.font,
    fill: {
      color: labelColor
    }
  });

  if(index === 0){  //to hide the marker for "Days in Progress" legend
    var marker = new Rect(new geometry.Rect([0, 0], [0, 0]), {
      fill: {
        color: "white"
      },
      stroke: null
    });
  }

  else if(e.active){  //To set the default color of the marker for the legend items whose visibility is true i.e. when they are visible in the chart.
    var marker = new Rect(new geometry.Rect([0, 0], [15, 5]), {
      fill: {
        color: e.series.color
      },
      stroke: null
    });
  }

  else if(!e.active){  //To set the color of the marker and the label to gray when the visibility is set to false.
    var marker = new Rect(new geometry.Rect([0, 0], [15, 5]), {
      fill: {
        color: "gray",
        opacity: 0.5
      },
      stroke: null
    });

    const label = new Text(e.series.name, [0, 0], {
      font: e.options.labels.font,
      fill: {
        color: "gray",
        opacity: 0.5
      }
    });
  }

  layout.append(marker, label);
  layout.reflow();
  const group = new Group().append(layout, overlay);
  return group;
}

Please take a look at this StackBlitz example where 'Days in Progress' is added as a legend item but does not function as one.

To see the feature of adding text with the legend items in the future, you can submit a feature request in our Kendo UI for Angular Feedback Portal.

If you have any further questions pertaining to the legend items in the Kendo UI Chart, please let me know and I will be happy to assist.

Regards,
Hetali
Progress Telerik