Create chart using one of the given javascript libraries

Question

I'm trying to create a chart that looks like this using ChartJS, D3.js, NVD3 or c3.js but I'm having trouble. Is this even possible with any of these libraries?

Answer 1

You can use C3.js bar charts and hide some of the x-axis but that may require extra JS to do so unless you make the x axis label ' '. If you want all the bars the same colour you'll need to use CSS (unless you declare a pattern). It will not be generated to look identical to that in C3.js without extra manipulation of the code. You can edit data around on https://c3js.org/samples/chart_bar.html to see how your data would look if you would like to.

You can add

color: {
        pattern: ['#0e9999','#06754b','#eb7a02','#9734b0']
    },

To your generation of the chart with whatever pattern of colours you would like (you can have as many or as few colours as you would like. I just happened to need 4 for my code)

In your case you can do

color: {
        pattern: ['#FFA500']
    },

In data you can declare an 'x' to have your supplied x labels

    data: {
        x: 'x',
        columns: [your data goes here including x labels],
        type: 'bar'
    }

I'm not sure about the other libraries but C3.js is essentially a wrapper for D3.js so anything that can be done in one is most likely theoretically possible in both. C3.js is just easier to understand the code for. (see: https://c3js.org/)

Update: If this wasn't clear enough you can do:

var chart = c3.generate({
data: {
      x: 'x',
    columns: [
        ['x', '1',' .','3','. ','. ','6'],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    type: 'bar'
},
  axis: {
        x: {
            type: 'category',

        }},
color: {
    pattern: ['#FFA500']
},
bar: { 
    space: 0.05, //sets the gap between the bars
    width: {ratio:1}
},
grid: { //the lines (remove if you didn't want grid lines)
        y: {
            show: true 
        },
        x: {
            show: true 
        }
    },
legend: { //hides the legends 
    show: false
}
});

To do something similar to what you have (you'll need to edit the data to be the exact data you want but that'll be a simple edit on your part)

If you don't want dashed grid lines add:

.c3 .c3-grid line {
  stroke-dasharray: 0!important;
  stroke: #808080 !important;
 } 

to your CSS file

Answer 2

I use recharts with React. I think it's the best charting library out there.