plotly.js | Open-source JavaScript charting library behind Plotly | Chart library

I am trying to reproduce this simple plotly graph that shows images on datapoint hover. The code is available here.

However, I am failing to reproduce it. This is what I have so far:

First off, apologies if this is normally a simple thing, but I'm not particularly experienced in JS. I'm trying to make some graphs in Plotly.js for a work site that currently holds raw JSON. We have a JSON in the format:

I have an Rmarkdown with a simple scatter plot (a map for instance), and I would like users to be able to provide some arbitrary x and y coordinates via an input and have those plotted on the graph (in red in the example below). The problem is, I don't have a shiny server so I cannot rely on that option. Is there a implement this, for instance, via javascript or something?

This is what I have:

I just started using plotly.js and I ran into this example. I want to display all cells values in percentage. according to Plotly doc https://plotly.com/javascript/reference/scatter/, if the graph = scatter then I can simply add tickformat: ',.0%' and it does the job. But this trick doesn't work if the type is table.

Anyone can help?

Let me explain first what the working part is in my project:

dataframe.component: A button is emitting an event which calls a function Initdf() which initiates a service which retrieves JSON data from my backend API. I map two values from this data and assign them to arrays. dfClose and dfDateTime.

With these two arrays I want to feed a plotly.js chart in plotly1.component

I'm trying to achieve the data sharing between the components with @Input() and @Output() properties.

What is not working:

In my plotly1.component, I imported the onChanges method to listen to updates on the data (when button is clicked), but I get tons of repeated error messages:

I am using Plotly and react, I want to set font-weight to title is it possible, I tried plotly documentation but didnt find anything specefic for font styling

So I upgraded my package.json and after that the output of the table styling was off. It used to be striped and each cell in the table changed in color of the background. I'm thinking this might be a dependency issue as I upgrade most of them.

This is the updated package.json

We are using scatter plots in Plotly.JS to display 2D graph data over a large X range, so we use logarithmic scaling. Zooming and panning works very well, except for one small issue: the X tick labels are confusing because Plotly uses single-digit labels for minor (non-powers of 10) ticks:

I can use tickFormat: '0.1s' to show real numbers (which is what users want) instead of single digits, but then there are cases where these labels can overlap:

I can also add dtick: 'D2' which only displays subticks at positions 2 and 5 and not all digits, but this is then fixed and doesn't adjust to scaling any more.

Ideally, I could specify subtick-label digits where to skip the label (but not the vertical line) completely, without having to resort to tickmode: array and having to specify all tick labels manually, and still benefit from automatic tick adjustment depending on scaling. For example, if all subtick digits are displayed, I would say I'd like to have tick labels at positions 1, 2, 3, 5, 7, the result would look like this:

The other display modes (digits 2 & 5 only, or just the power of 10) would not change. Is there a way to do this? If so, how? I'm not afraid of patching Plotly if required, but right now I don't know where to start looking.