2

Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43
Jeffrin John
  • 675
  • 2
  • 7
  • 16
  • The combination of your `rotation: -90`, and the `align: 'left'` seems to thwart the default behavior - the default is to behave exactly like you're asking. While I don't have a solution to that specific problem, I have to ask - why would you want to rotate the labels anyway?? Makes them harder to read, and introduces a problem that won't exist otherwise. FWIW, I would suggest simply keeping the labels at `0` rotation and fix two problems at once :) – jlbriggs Aug 14 '17 at 15:54
  • Seriously I need this feature. I have enabled both horizontal and vertical view of dataLabels for charts in my project. If you can find a way to help me, it will be so nice. @jlbriggs – Jeffrin John Aug 14 '17 at 16:03
  • Set the inside property with true value for a green column. Example: http://jsfiddle.net/d7a49u1L/. – pawel_d Aug 15 '17 at 11:08

1 Answers1

1

For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info

 series: [{
    color: colors[0],
    showInLegend: false,
     data: [{
     ....//first value
     , {
      y: 3500,
      name: 'Second',
      color: colors[1],
      dataLabels: {
        inside: true //labels  will be inside column
      }
    },... // third and remaining
   });

Fiddle demonstration

Deep 3015
  • 9,929
  • 5
  • 30
  • 54