mix chart + horizontal boxplot

[bjaysheel]

Hi,
I would like to create one chart with includes a histogram and a boxplot. Currently I have able to accomplish both using mixtype chartjs and two y-axis (screen shot 1).

However what I really want is to create a box plot with his horizontal, i.e use the x-axis drawn for histogram to act as y-axis for the boxplot. Wondering if this is even possible. By adding indexAxis: 'y' to option it would make the histogram sideways as well which is what I don't want.

I would like to get the historgram as is in screen shot 1, and get the boxplot overlayed as its drawn in screen shot 2. Is this possible to do with current library of charjs and charjs-chart-boxplot?

[sgratzl]

do you have a codepen or codesandbox or similar where I could play with?

[bjaysheel]

Hey I just started one here is the link

https://codepen.io/bjaysheel/pen/ExRBZLg

[sgratzl]

cannot you just specify yAxisId: 'x'` for the boxplot?

[bjaysheel]

aa yes didn't think of that. This kind of works but one trouble is that the plot is in the middle of the histogram, I would like for it to be on top so its is easy to see. I have updated the codepen to remove the second y axis, and increase the y-axis max for histogram to be 400 so there is the space on top of the histogram to place the boxplot.

[bjaysheel]

Closing this issue. I was able to get boxplot to use x-axis so I can print it sideways, and added second y-axis to ensure that the box plot was on top of the chart and not over laid on top of the histogram. Example in the codepen

`
// for boxplot set this options
yAxis: 'x',
xAxis: 'y1',

// I used following option for y1 axis
// set you min and max as you like, be sure to keep the the type of axis consistent
// i.e if you use type: 'linear', be sure to keep it the same I found that it may cause
// y1 to have a different start position than y and boxplot will not be displayed correctly.
y1: {
display: false,
min: 0,
max: 10,
position: 'right',
ticks:{
color: "#ffffff",
}
}
`

[sgratzl]

creative solution!