This is a migrated thread and some comments may be shown as answers.

Displaying custom label next to bar stack chart

3 Answers 290 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Marjaneh
Top achievements
Rank 1
Marjaneh asked on 06 Mar 2019, 07:58 PM

Hello,

I've been struggling with this for quite a while now with no good results.

We are going to create stacked bar charts with the labels next to them as I have in the image

 Is there a way to create single stack chart with the label beside that?

 

Thanks

 

 

 

3 Answers, 1 is accepted

Sort by
0
Marjaneh
Top achievements
Rank 1
answered on 07 Mar 2019, 02:49 PM

To clarify my question, my chart consists of only one vertical bar, is there a way to display 2 sets of labels for each subpart (or segment) as follows: (a) a count value inside the subpart and (b) a text value to the right outside the subpart.

Please refer to the attached image in the original post above.

Thank you

0
Tsvetina
Telerik team
answered on 08 Mar 2019, 01:40 PM
Hi Marjaneh,

To display such a label, you can show the default series label and assign it a visual function which appends and additional Text element to it:
seriesDefaults: {
  type: "column",
  stack: true,
  labels: {
    visible: true,
    position: "insideBase",
    background: "transparent",
    visual: function(e){
      var defaultLbl = e.createVisual(),
          rect = e.rect.bottomRight();
 
      var newPosition = [rect.x + 10, rect.y-20];
      var additionalLabel = new kendo.drawing.Text(e.series.name, newPosition);
 
      defaultLbl.append(additionalLabel);
      return defaultLbl;
    }
  }
}

Here, you can see a runnable example:
https://dojo.telerik.com/URuVAgAq

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Marjaneh
Top achievements
Rank 1
answered on 11 Mar 2019, 01:22 PM
Hi Tsvetina,

Thank you very much for your reply.
That's indeed the solution to my problem.

Regards,
Marjaneh
Tags
Charts
Asked by
Marjaneh
Top achievements
Rank 1
Answers by
Marjaneh
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or