put a text in all categories in Highcharts

Question

took a long time with this same question, then I appreciate too if I can help.

I researched a lot and understand that by this method that I have in my code will not run. then I can make it work, how I can do? I have tried many things. I do not understand how to adapt a render text or so ago all of my series.

I want to set the VALUE to RIGHT of the bar, and the value of the SERIES (in my case bar1, bar2, bar3) that are always at the LEFT of the bar. as it is in the picture.

this is my code:

http://jsfiddle.net/pb1q9wzk/

plotOptions: {
 bar: {
 dataLabels: {
   padding: 0,
   allowOverlap: true,
   enabled: true,
   align: 'left',
   color: '#FFFFFF',
   inside: true,
   crop: false,
   overflow: "none",
   formatter: function() {            
      return this.series.name + " " + this.y;                       
    },
  style: {
  width:100
 }                       
. 
.
.

UPDATE

when it is less than 30, so it appears.

when it is less than 30, "bar" and the value must be outside of the bar.

and when the value is 0, I want to be displayed to the right of "bar".

I appreciate the help, very little css and this library. I still can not get used.

width: 100 what? 100px 100% 100em ? – Carol McKay Jan 17 '16 at 07:46 — Carol McKay, Jan 17 '16 at 07:46

score 2 · Answer 1 · answered Jan 18 '16 at 16:15

You can do it using dataLabels formatter: http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.formatter

      formatter: function() {
        var string = this.series.name + ' ';
        if (this.y <= 30) {
          string += this.y;
        }
        return string;
      },

Here you will have two possible dataLabels strings, depending on your point value.

You can add custom function responsible for adding second dataLabel in your chart, using Renderer.text: http://api.highcharts.com/highcharts#Renderer.text

  var addSecondLabel = function(chart) {
    $('.labelText').remove();
    var series = chart.series,
      dataLabel, barHeight;
    Highcharts.each(series, function(ob, j) {
      Highcharts.each(ob.data, function(p, i) {
        if (p.y > 30) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          chart.renderer.text(p.y, dataLabel.x + chart.plotLeft + barHeight, dataLabel.y + chart.plotTop + 11).attr({
            zIndex: 100
          }).addClass('labelText').css({
            "color": "contrast",
            "fontSize": "11px",
            "fontWeight": "bold",
            "textShadow": "0 0 6px contrast, 0 0 3px contrast"
          }).add();
        } else if (p.y > 0) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          p.dataLabel.translate(dataLabel.x + barHeight, dataLabel.y);
        }
      });
    });
  }

Here I am iterating over all points and adding second label if value of my point is bigger than 30. I am using x and y parameters of this point dataLabel, but I need to add chart.plotLeft and chart.plotTop because chart plotArea is not directly at top left corner.

I am adding class to my labels because I will change their position on redraw and I need to delete previous labels to add labels with new positions.

If my point is bigger than 0 but smaller than 30 I am not adding new label. I am just translating old one so it can be on the left side of column.

example: http://jsfiddle.net/pb1q9wzk/31/

score 0 · Answer 2 · answered Jan 17 '16 at 08:52

0

I update the following part

    formatter: function() { 
                        return '<div style="position: absolute; left: 40px"> my label this in other line!<div class="row">bar1</div><div class="row">bar2</div><div class="row">bar3</div></div> <img style="height: 30px; width: 30px; margin-top: 10px"  src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'  
}

http://jsfiddle.net/pb1q9wzk/21/

It is kinda messy but I couldn't figure a better way to do it. Hope it helps

answered Jan 17 '16 at 08:52

SadiRubaiyet

328
2
9

you are a genious! You saved me almost. I do not understand that I have to do to change a little the position of the value or bar. the last thing I need and I beg you to help me is this. When the value is small (eg 30). "bar" and the value remain together. want when less than 30 the value of a bar, "bar" and value are at the right of the bar. (I UPDATE THE POST) – Jan 17 '16 at 16:21
please help me, you are the only one who understands how to do this. I'd appreciate it too – Jan 17 '16 at 16:32
Unfortunately in highcharts you can's set datalabels true/false based on y value. Take a look at [fiddle](http://jsfiddle.net/2e6v8zjk/6/) For some reason series 1 is not getting the value properly, I can see the value being set when I debug. I am not sure why this is happening but I believe its related to the exception highcharts throws. – SadiRubaiyet Jan 17 '16 at 21:29
there is another way to kinda get around it [padding hack] (http://jsfiddle.net/nwebo9qo/) hope either helps – SadiRubaiyet Jan 17 '16 at 21:45
thanks friend. I am desperate to try to solve my problem. still I do not get what I want. – Jan 17 '16 at 22:06

put a text in all categories in Highcharts

2 Answers2