Search code examples
highchartshighcharts-ng

How to fix hidden dataLabel in highcharts?


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.


Solution

  • 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