Creating a horizontal bar chart extension on Chart.js

Question

I am using Charts.js - obviously for creating charts.

I want to have a horizontal bar chart in my app, but it seems that Chart.js does not have it, therefore I resorted to a fork of that repo called ChartNew.js.

ChartNew.js however is not at all responsive, and the thing that attracted me the most to Chart.js is the ability to have responsive charts.

I am aware that Charts.js allows easy extension or 'hacking' of the existing chart objects.

Is it possible to 'extend' Chart.js regular bar chart into becoming a horizontal bar chart?

Answer 1

Chart.js does not come with horizontal bar charts by default.

However it is built in a very modular fashion. This allows third party plugins to be developed that do not mess with the core code.

As I needed horizontal bar charts for a project I was working on I took the liberty of creating one which you can find here.

https://github.com/tomsouthall/Chart.HorizontalBar.js

You can install it using bower:

$ bower install chart.horizontalbar

The syntax for creating a chart is exactly the same as for creating a standard (vertical) bar chart:

var myChart = new Chart(ctx).HorizontalBar(data, options);

It's a pretty quickly hacked together project but it worked great for what I needed! Hope it helps.

Answer 2

I know it might be not helpful to you but might help someone else, google charts are really good take a look at it https://developers.google.com/chart/