Chart library suggestion request

Question

I have to find a library that is capable of creating charts, like the one in the picture. I have tried Chart.js and AnyChart, but they don't seem to be able to handle a chart like below.

The scenario is: the client has vehicles and he would like to see the vehicle activity percentage on a chart. The Y-axis is a range of hours from 6 am to 7 pm, the X-axis is days of the week on top and the percentage of "working" state compared to the "On ignition" and "No ignition" states. The columns have to be stacked and multiple of the same data type has to go in the same bar.

Example: on Monday, working state from 6 am to 8.40 am, on ignition (but no sensory work data) from 8.40 am to 12.50 pm, no ignition from 12.50 pm to 3 pm and doing work from 3 pm to 7 pm.

The problem with Chart.js is that it can't handle value ranges and I cannot add multiple of the same states for the same day. AnyChart is capable of handling value ranges, but that's a chart type that cannot be made stacked.

Could anyone suggest a chart library that is capable of this kind of data visualization or should I code it from scratch? Thank you in advance!

Answer 1

I suggest taking a look at the Open Source Plotly JavaScript library it is very flexible and powerful and includes stacked bar charts.

An example from the online documentation:

var trace1 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar'
};

var trace2 = {
  x: ['giraffes', 'orangutans', 'monkeys'],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar'
};

var data = [trace1, trace2];

var layout = {barmode: 'stack'};

Plotly.newPlot('myDiv', data, layout);

Gives (with the mouse hovering over the middle bar):

Answer 2

Give a try to https://c3js.org/ c3.js based on d3.js and can easily be customize and implemented.

Answer 3

LightningChart JS has RectangleSeries, which is made for these kind of custom stacking of bars, and even custom width for each.

Answer 4

Thank you for the suggestions!

Unfortunately, none of the suggested libraries worked the way I wanted to, so I made a custom column chart library for this task on my own in html, css and javascript.