Drawing a mixed bar/line and having the bars span across an axis

[UglyHobbitFeet]

I've looked at the docs/examples for chartjs, but is there any support for the following?

• Create bars where the width (x-axis) is variable but the height is always full (aka the entire y-axis)?
• There can be x number of those bars in a chart
• Create a line that spans all the way across the x axis but can change it's y-axis (aka not a straight line, but a curvy one).

I have a crude drawing here where the yellow is the bars and the black is the line

• https://ibb.co/3M95JGv

I kinda got the first part down using stacked bars and swapping the axis, but the y-axis (the bars height) is only set to 1. That's a problem when trying to draw a curved line in mixed mode since there is only one y-axis point (instead of many y-axis points):

• https://codepen.io/anon/pen/wVqONp

Here's another attempt that has multiple y-axis points, but I cannot control the bar widths:

• https://codepen.io/uglyhobbitfeet/pen/YzzLmNE?editors=1010

A third attempt is here, but I need a border around the overall bar (instead of each mini-bar that comprises it) as well as no gaps between the mini-bars.

• https://jsbin.com/dubofajefo/1/edit?js,output

[benmccann]

That's a problem when trying to draw a curved line in mixed mode since there is only one y-axis point (instead of many y-axis points)

Maybe try using two y axes?

[UglyHobbitFeet]

Hi, thanks. I'm not exactly sure what you mean. How do I go about doing that?

[benmccann]

https://stackoverflow.com/questions/38085352/how-to-use-two-y-axes-in-chart-js-v2
https://www.chartjs.org/samples/2.6.0/charts/line/multi-axis.html

[UglyHobbitFeet]

Hi, Correct me if I'm wrong, but I'm not sure that's what I want since the bars should take up the max height based on whatever the line points are. In other words if the y-axis for the line goes between -100 to 100, I would like the bar to automatically be that tall (the y-axis for the bar would also be from -100 to 100 and the bar would take up its full height) As a related side-note, is there any support for a bar spanning any number of ticks in both the x and y direction? Thanks!

…

On Tue, Nov 12, 2019 at 5:52 PM Ben McCann ***@***.***> wrote: https://stackoverflow.com/questions/38085352/how-to-use-two-y-axes-in-chart-js-v2 https://www.chartjs.org/samples/2.6.0/charts/line/multi-axis.html — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6733?email_source=notifications&email_token=ALBDS7TK7YVK326NZNEJ6VDQTMXRXA5CNFSM4JMIANS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED4HLTY#issuecomment-553153999>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBDS7XQT5ZX4GJNOYQTWCLQTMXRXANCNFSM4JMIANSQ> .

[kurkle]

Ben means something like that: https://codepen.io/kurkle/pen/pooOBKQ?editors=1010

[UglyHobbitFeet]

Thanks I think I understand better. But to have a variable width bar, I'd need a horizontalBar stacked instead of a regular bar. That's kinda the main issue driving this request. I thought I read that mixed line/horizontal stacked bar don't play together well, so can what you shown be converted to that?

…

On Wed, Nov 13, 2019 at 9:15 AM Jukka Kurkela ***@***.***> wrote: Ben means something like that: https://codepen.io/kurkle/pen/pooOBKQ?editors=1010 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6733?email_source=notifications&email_token=ALBDS7W25DYEZ3T5KX6WOX3QTQDYDA5CNFSM4JMIANS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED6IXUY#issuecomment-553421779>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBDS7SAA2RKAT342RQBEPTQTQDYDANCNFSM4JMIANSQ> .

[benmccann]

I thought I read that mixed line/horizontal stacked bar don't play together well

I'm not aware of any such issues

[UglyHobbitFeet]

I thought I interpreted that from here: #4096

…

On Wed, Nov 13, 2019 at 11:04 AM Ben McCann ***@***.***> wrote: I thought I read that mixed line/horizontal stacked bar don't play together well I'm not aware of any such issues — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6733?email_source=notifications&email_token=ALBDS7V6634SLPYCSXBQHETQTQQSVA5CNFSM4JMIANS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED6ULDY#issuecomment-553469327>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBDS7WLCENZOSHCCSTR4Y3QTQQSVANCNFSM4JMIANSQ> .

[benmccann]

There's an example of a horizontal line chart later on in that discussion though: #4096 (comment)

[kurkle]

You can use new the new floating bars feature too: https://codepen.io/kurkle/pen/ExxdyXQ

[UglyHobbitFeet]

That's awesome, looks like it solves my problem! I looked at the code and don't see anything about 'floating bars' though. Is there a special line of code in there you are referring to?

…

On Wed, Nov 13, 2019 at 5:05 PM Jukka Kurkela ***@***.***> wrote: You can use new the new floating bars feature too: https://codepen.io/kurkle/pen/ExxdyXQ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6733?email_source=notifications&email_token=ALBDS7UCCOGSMHBHSPIHO5DQTR23ZA5CNFSM4JMIANS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOED72QRY#issuecomment-553625671>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALBDS7V26VBLCPH4FCD5GVDQTR23ZANCNFSM4JMIANSQ> .

[kurkle]

Float bars are configured as [start, end]
So for example if "normal" bar is data: [1, 2, 3], float bar is data: [[1,2], [3,4], [5,6]]
(pay attention only in the format, not the values)

[benmccann]

https://www.chartjs.org/docs/latest/charts/bar.html#data-structure

[kurkle]

Closing as resolved