How do I draw a vertical line on a horizontal bar chart with ChartJS?

Question

There are many examples of extending a Chart to include a line, both horizontal and vertical. However, I have not found a way to draw a vertical line with a horizontal bar chart

Answer 1

Have you tried this? It's a horizontal line with vertical bar charts - so the opposite of you case. But maybe you can derive something useful out of it:

var chart = c3.generate({
 bindto: '#chartContainer',
 tooltip: {
        grouped: false 
    }, 
data: {

    columns: [

        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 340, 200, 500, 250, 350],
        ['data3', 30, 200, 100, 400, 150, 250],
        ['data4', 130, 340, 200, 500, 250, 350],
        ['data5', 130, 340, 200, 500, 250, 350],
        ['data6', 130, 340, 200, 500, 250, 350],
        ['data7', 130, 340, 200, 500, 250, 350],
        ['diif1', null, null, 700 ],
        ['diif2', null, null, 1200]
    ],
    types:{
     "data1" :"bar",
        "data2" :"bar",
        "data3" :"bar",
        "data4" :"bar",
        "data5" :"bar",
        "data6" :"bar",
        "data7" :"bar",
         "diff1" : "line",
        "diff2" : "line"

  },
     order:null,
    groups: [
        ['data1', 'data2','data3', 'data4'],
        ['data5', 'data6','data7']
    ],
     onclick: function (d, element) { 
         var name=d.name;
         drilldown(name);
     }

},
   grid: {
       y: {
        lines:[{value:1400,text:1400}, 
              {value: 1450,text: 1450}
             ]
         }
    } 
});


function drilldown(name){
 alert('Call for ' +name);   
}

http://jsfiddle.net/9nxcfzb9/12/

I'm looking for something similar to you but not with horizontal bar charts, but timespan bars, if you've got an idea, please let me know: How do I change or add the vertical line on a tooltip of a c3 graph?