How can I implement a sub X-axis in a Cartesian chart and tiled subplot visualization in Plotly JavaScript

[shijo]

Hello Everyone,

I have two questions regarding the Plotly JavaScript library:

1. How can I implement a sub X-axis in a Cartesian chart?
   I have attached an example of a Cartesian bar chart that features two X-axes: one representing “Day” and the other representing “Sex.” How can I achieve similar functionality with multiple sub-X-axes in the Plotly JavaScript library?
2. How can I create a tiled subplot visualization similar to the attached tile chart?
   The tile chart I’ve attached is configured as follows (referencing the chartConfig setup):

• Column By: Domain, Sex, and Group Description
• Row By: Test Name, Conventional Units, and Sample Type
• Y-Axis: Conventional Result
• X-Axis: Nominal Day
• Group By: Group DescriptionAdditionally, the “Common X-axis” and “Common Y-axis” options are selected. This configuration produces the attached tile chart.In my attempt to recreate this functionality using Plotly, I encountered the following issues:

1. I couldn’t place the X-axis labels at the top of each subplot.
2. I was unable to display the “Column By” values (Domain, Sex, Group Description) above the subplots.
3. In the tile chart, the “Column By” details and X-axis labels remain fixed at the top while scrolling. I couldn’t replicate this sticky behavior in Plotly.

How can I achieve these functionalities in the Plotly JavaScript library?
Regards,
Shijo