Creating a horizontal chart extension on Chart.js

Question

I am using Charts.js - obviously to create charts.

I want to have a horizontal bar chart in my application, but it seems that Chart.js does not have one, so I resorted to the fork of this repo called ChartNew.js.

ChartNew.js, however, is by no means responsive, and what appealed to me the most, Chart.js is its ability to have flexible charts.

I know that Charts.js allows a simple extension or “hack” of existing chart objects.

Is it possible to extend the regular chart chart Chart.js by becoming a horizontal histogram?

Answer 1

Chart.js does not have horizontal histograms by default.

However, it is built very modularly. This allows you to develop third-party plugins that do not interact with the main code.

Since I need horizontal histograms for the project I was working on, I took the liberty of creating the one you can find here.

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

You can install it using the gazebo:

$ bower install chart.horizontalbar 

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

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

This is a fairly hacky project, but it did a great job on what I needed! Hope this helps.

Answer 2

I know this may not be useful for you, but it can help someone else, google diagrams are really good, look at it https://developers.google.com/chart/