0

Please see the line I have highlighted.

  1. How to add labels on Y-axis

  2. How to make 0 position verticle line as a dotted line.

  3. How to make rounded corner as mention in the photo.

I need to modify the chart js bar graph.

enter image description here

But it's very complicated to modify it. If someone has an idea about chart js your help will be highly appreciated.

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
crm
  • 9
  • 6

1 Answers1

0

Figuring this out requires looking through chart.js configurations here.

  1. To add a label on another line for the Y-axis your labels need the following structure labels: [["Dept1", 81], ["Dept2", 82], ["Dept3", 83]].

  2. Chart.js 2.0 can handle negative values by default so all you need to do is pass in your respective data points. Something like this should be fine: data: [12, -19, 5],

  3. The rounded corners problem is a little trickier. I used an external library linked here. There is some canvas rendering trickery going on. Be sure to star his repo to give the author credit!

Resulting Fiddle here: https://codepen.io/anon/pen/gKRQZG?editors=1000

Joseph Cho
  • 4,033
  • 4
  • 26
  • 33
  • Can we add image in labels..? – crm Jun 18 '18 at 12:39
  • I thought about this problem when trying to add icons to labels. It turns out chart.js doesn't support it. There may be a way to do it, but it's not a simple task. – Joseph Cho Jun 18 '18 at 13:53
  • Did you get any idea about the image to add on yaxis. – crm Sep 07 '18 at 08:50
  • I would look into: https://stackoverflow.com/questions/36979474/how-to-change-the-labels-to-the-image-icon-in-bar-chart-js?rq=1 and https://github.com/chartjs/Chart.js/issues/1554 – Joseph Cho Sep 11 '18 at 19:55
  • Hi Joseph,I can achieve the dotted line now. If you have idea on how to reduce the size of y-axis label while resizing the window. **'Department 1'** **'-10'** which come in two row. – crm Sep 21 '18 at 06:33
  • You could try editing the canvas, but you would need to edit chart.js source code. Unfortunately there is no simple way to do it in chart.js API https://www.chartjs.org/docs/latest/axes/labelling.html – Joseph Cho Sep 21 '18 at 08:44
  • Thanks for your time. Yes, by modifying the chart we can achieve that. I have resolved it. – crm Sep 22 '18 at 11:33