-1

I am looking for chart like this in highcharts. Can any one help to find chart like this. I really needed but I am not able to make similar chart of my own in highcharts.

UPDATE:

I got this one in the internet.

Jeffrin John
  • 675
  • 2
  • 7
  • 16

1 Answers1

1

Check how to customize legend

 legend: {
  align: 'right',
  verticalAlign: 'top',
  layout: 'vertical',
  x: 0, 
  y: 100, //distance from top
  padding: 3,
  itemMarginTop: 5,  
  itemMarginBottom: 5,
  useHTML: true, //now you can customize label with various kind of styling
  labelFormatter: function() {

    return '<div style="width:100px;"><span style="float:left; margin-left:10px">' + names[this.index - 1] + '</span><span style="float:right">' + values[this.index - 1] + '</span></div>';
  },
  symbolRadius: 0, //square symbols
},

updated fiddle

Deep 3015
  • 9,929
  • 5
  • 30
  • 54
  • Thank you so much for your kind reply, @Deep. Thanks for your update. I would like to know if we can center align every bar to its corresponding x axis period just like the original image. – Jeffrin John Aug 14 '17 at 08:03
  • Hi @Deep, I have found the solution for center aligning every bar to its corresponding xaxis and I have updated in [JSFIDDLE](http://jsfiddle.net/dhcbnbso/1/). Just add groupPadding: 0.5 to the first series. – Jeffrin John Aug 14 '17 at 08:28
  • hi got your solution. – Deep 3015 Aug 14 '17 at 08:41
  • looks good @Deep.. Great Job.. Once again thanks for helping me in this issue. – Jeffrin John Aug 14 '17 at 12:52
  • Hi, @Deep, I have another question. Please take a look at [JSFIDDLE](http://jsfiddle.net/dhcbnbso/3/). 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 hidding the value. – Jeffrin John Aug 14 '17 at 15:28
  • Please use this [link](https://stackoverflow.com/questions/45678049/how-to-fix-hidden-datalabel-in-highcharts) to answer. – Jeffrin John Aug 14 '17 at 15:54
  • Please use have a look at this [link](https://stackoverflow.com/questions/45679142/how-to-add-extra-tearsticks-in-highcharts) too. @Deep – Jeffrin John Aug 14 '17 at 16:43
  • Hi deep, can you please help me to solve this problem. Please look at this [thread](https://stackoverflow.com/questions/45750623/how-to-prevent-bars-overlapping-eachother-in-highcharts). – Jeffrin John Aug 18 '17 at 07:15