Chart.js: Horizontal Bars mix with lines

[joaofiliperocha]

Expected Behavior

Horizontal Bars mix with line

Current Behavior

I have vertical bar with mix line chart, when it changes the type to horizontal bar the other dataset desapear

[etimberg]

@joaofiliperocha do you have a test case that reproduces this issue?

[lwlwlwlw]

I also want to draw a horizontal bar chart mixed with a line chart, using data like this:

week, bar, line
Monday, 1, 10
Tuesday, 2, 20
Wednesday, 3, 30
Thursday, 4, 40
Friday, 5, 50
Saturday, 6, 60
Sunday, 7, 70

could you please help with a sample code? Thanks.

[rafaelCMoura]

@joaofiliperocha. I think that you can't plot a line chart mixed with a horizontalBar, because we don't have an "horizontalLine" chart type. @lwlwlwlw Try this sample. @etimberg

[fdefelici]

+1

[joaofiliperocha]

I found this .. hope it helps

https://plnkr.co/edit/ubR7Luf4NisgxqR2sVUr?p=preview

[rafaelCMoura]

Ok @joaofiliperocha, to make this with Chart.js see this:

http://stackoverflow.com/questions/30256695/chart-js-drawing-an-arbitrary-vertical-line

[johnpitchko]

Here is a codepen that demonstrates the issue, if that is useful:

https://codepen.io/johnpitchko/pen/OjzGrr

[EpicKip]

@etimberg So is this ever going to be supported? The website advertises Mixed charts... that gives the impression you can mix more then a handful of predefined mixes

[weberhofer]

It would be a great thing to have vertical lines, too

[jetfontanilla]

mixed chart still doesn't support horizontalBar + line yet?

[weberhofer]

No, verticalLines would be required, but there are none.

[nagix]

If you use {x: 1, y: 'label'} format for lines, they will be drawn. Try to replace the following part in https://codepen.io/johnpitchko/pen/OjzGrr.

data: {
  datasets: [{
    label: "Clients Signed",
    data: [2, 0, 3, 5, 1, 3, 6, 5, 3, 10]
  }, {
    label: 'Quota',
    data: [{x: 2, y: 'Q2 2015'}, {x: 2, y: 'Q3 2015'}, {x: 2, y: 'Q4 2015'}, {x: 2, y: 'Q1 2016'}, {x: 2, y: 'Q2 2016'}, {x: 2, y: 'Q3 2016'}, {x: 2, y: 'Q4 2016'}, {x: 2, y: 'Q1 2017'}, {x: 2, y: 'Q2 2017'}, {x: 2, y: 'Q3 2017'}],
    type: 'line'
  }],
  labels: ['Q2 2015', 'Q3 2015', 'Q4 2015', 'Q1 2016', 'Q2 2016', 'Q3 2016', 'Q4 2016', 'Q1 2017', 'Q2 2017', 'Q3 2017']
}

[wuahi]

What's the status of this, seems that the work-a-round (https://codepen.io/johnpitchko/pen/OjzGrr.) is not working anymore?

[EpicKip]

@wuahi That one was never working, look at the post above you. You still have to replace it :) The trick for lines is this part:

data: [{x: 2, y: 'Q2 2015'}, {x: 2, y: 'Q3 2015'}, {x: 2, y: 'Q4 2015'}, {x: 2, y: 'Q1 2016'}, {x: 2, y: 'Q2 2016'}, {x: 2, y: 'Q3 2016'}, {x: 2, y: 'Q4 2016'}, {x: 2, y: 'Q1 2017'}, {x: 2, y: 'Q2 2017'}, {x: 2, y: 'Q3 2017'}],

instead of just giving a value, you're giving an object with x as the value and y the label