The ScrollZoom feature is buggy as it doesn't work for ranges in Time-price graph

plotly.js
,
1

Hi Plotly community, I have a query to ask.

Problem → When I am zooming out and in the green bar is disappearing (I don’t know why) but when I am scrolling enough I reappears
Solution I want (or close to) → The bars should be visible when viewed from greater Time Frame so that I don’t have to zoom in enough as it would be very time taking.

image
image257×514 4.1 KB

[You can directly copy the code, and run it in Nodejs and React environment]

import React, { useEffect, useState } from "react";
import Plotly from "plotly.js-dist";
import { data, Iceberg1 } from "./Convertfunctions/horizontal";
import "bootstrap/dist/css/bootstrap.min.css";

function HorizontalBar() {
  const [startDate, setStartDate] = useState("2023-01-01 00:00:00");
  const [endDate, setEndDate] = useState("2024-05-01 00:00:00");
  const [quantity, setQuantity] = useState("");
  const [intervalType, setIntervalType] = useState("Default");
  const [sideFilter, setSideFilter] = useState("");

  useEffect(() => {
    let interval = 0;
    if (intervalType === "days") {
      interval = 86400000 * 5;
    } else if (intervalType === "months") {
      interval = 2592000000;
    } else {
      interval = 31536000000;
    }

    let dataFinal = Iceberg1.filter(
      (coords) =>
        coords.Quantity >= quantity &&
        (sideFilter === "" || coords.Side === sideFilter)
    ).map((coords) => ({
      type: "scatter",
      mode: "lines",
      x: [coords.Start_Time, coords.End_Time],
      y: [coords.Price, coords.Price],
      line: {
        color: coords.Side === "Ask" ? "red" : "green",
        width: coords.Quantity,
      },
      hovertemplate: `Start Time: ${coords.Start_Time} <br> End Time: ${coords.End_Time} <br> Price: ${coords.Price} <br> Quantity: ${coords.Quantity}`,
      showlegend: false,
      tickmode: "sync",
      visible: true,
    }));

    var layout = {};
    if (intervalType === "Default") {
      layout = {
        title: "",
        responsive: true,

        hovermode: "closest",
        hoverlabel: { bgcolor: "white", bordercolor: "black" },
        xaxis: {
          title: "Date",
          type: "date",
          range: [startDate, endDate],
          showgrid: true,
         visible:true,
        },
        yaxis: { title: "Price" },
      };
    } else {
      layout = {
        title: "",
        responsive: true,
        hovermode: "closest",
        hoverlabel: { bgcolor: "white", bordercolor: "black" },
        xaxis: {
          title: "Date",
          type: "date",
          showgrid: true,
          range: [startDate, endDate],
          dtick: interval,
         visible:true
        },
        yaxis: { title: "Price" },
        rangeslider: { visible: true }, // Add rangeslider to maintain visibility
      };
    }

    const config = {
      scrollZoom: true,
    };

    var trace1 = {
      x: data.map((entry) => entry.DateTime),
      y: data.map((entry) => entry.Price),
      type: "scatter",
      line: {
        color: "pink",
      },
      name: `Line`,
    };
    dataFinal.push(trace1);
    Plotly.newPlot("myDiv", dataFinal, layout, config);

  }, [startDate, endDate, quantity, intervalType, sideFilter, Iceberg1]);

  return (
      <div id="myDiv" className="flex-grow-1" />
  );
}

export default HorizontalBar;

image
image1014×709 13.6 KB

Start time and end time acts as range on x axis, Price is the point on y axis and Quantity is the WIDTH of line that I set.

One more thing, How can I set the width more suitably ? as now the height of bar is [146 - 77 , 146+77] on y axis.

image
image1014×709 24.9 KB

SAMPLE DATA for testing

const Iceberg1 = [
{
Price: 54,
Start_Time: “2023-04-06 12:40:14”,
End_Time: “2023-04-06 12:40:14”,
Quantity: 4,
Side: “Ask”,
},…
]

const data = [
{ DateTime: “2023-02-08 10:30:00”, Price: 49.0, Volume: 9 },
{ DateTime: “2023-02-08 10:45:00”, Price: 49.0, Volume: 0 },
…
]

Any suggestion or documentation is appreciated too…