2

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! enter image description here

2

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):

Example Chart

| improve this answer | |
2

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

| improve this answer | |
2

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

Stacked bars

| improve this answer | |
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.