How to build a floating bar chart

Add elements to the page (Plotter + Bar)

First, make sure to include the Plotly.js library in your HTML file. You can either download it and host it locally, or include it via a CDN.

Prepare the Data

Organize your data for the floating bars. You need two points of data for each bar: the start point and the end point.

Insert Data to Bar Trace

Define Bar Base:

Use the base attribute to specify the starting point of each bar, and the x or y attribute (depending on orientation) to specify the length of each bar.

Define Bar Length

• Horizontal

  If

• Vertical