search

sgratzl / chartjs-chart-boxplot

Chart.js Box Plots and Violin Plot Charts
https://www.sgratzl.com/chartjs-chart-boxplot/
MIT License
101 stars 23 forks source link

mix chart + horizontal boxplot #51

Closed bjaysheel closed 1 year ago

bjaysheel commented 1 year ago

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?

Screen Shot 2022-12-12 at 2 19 18 PM Screen Shot 2022-12-12 at 2 20 26 PM

sgratzl commented 1 year ago

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

bjaysheel commented 1 year ago

Hey I just started one here is the link

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

sgratzl commented 1 year ago

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

bjaysheel commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

creative solution!