Plotly.js is a high-level, declarative charting library. It ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps. It is built on top of d3.js and stack.gl.
Questions tagged [plotly.js]
632 questions
5
votes
4 answers
How to have a faster rendering, when moving a slider for colorscale range, with Plotly?
The following code works to change the “min” of the color scale of a Plotly heatmap with a slider.
But it is very slow : we have a 1 fps movement when dragging the slider.
Solutions like replacing "heatmap" by "heatmapgl" don't really solve the…
Basj
- 41,386
- 99
- 383
- 673
5
votes
1 answer
Two heatmaps on top of each other with opacity with Plotly.JS
I'm trying to port this answer to a 100% Plotly.JS solution.
TL;DR : how to have two heatmaps on top of eacher with an opacity slider, with Plotly.JS (no Python)?
Beginning of solution, but how to add the second trace?
const z = [];
for (let i =…
Basj
- 41,386
- 99
- 383
- 673
5
votes
2 answers
Is there a way to show text in plotly graph tooltip without being overlapped?
As shown in codepen below, text value for trace 1 is being trimmed as it is close to chart border.
Need to show these numbers above everything else. Have tried setting z-index. Didn't worked.
https://codepen.io/satishvarada/pen/yLVoqqo
var trace1 =…
SatishV
- 393
- 4
- 22
5
votes
1 answer
Plotly React keep zoom and rotation between re-rendering
I'm using the React version of plot.ly to render a 3D scatter plot, but every time I re-render my component, the plot gets reset to its default configuration.
How can I prevent this, and keep the zoom/rotation configuration?
Below is a minimal code…
Simen Russnes
- 2,002
- 2
- 26
- 56
5
votes
1 answer
Plotly: How to add polynomial fit line to plotly go.scatter figure using a DASH callback?
I'd like to add a polynomial curve to a scatter plot that is rendered using a callback.
Following is my callback function which returns the scatter plot.
@app.callback(Output('price-graph', 'figure'),
[
Input('select',…
kms
- 1,810
- 1
- 41
- 92
5
votes
1 answer
When does data-dash-is-loading trigger a callback function?
I am trying to show a spinner when a Dash figure is updated using the CSS attribute data-dash-is-loading.
I found a working solution but would like to know why my previous approach does not work to get more insight.
The structure of the document is…
Joe
- 6,758
- 2
- 26
- 47
5
votes
2 answers
Plotly.js display tooltip on hover over graph title
Plotly.js allows you to specify a graph title, but there doesn't seem to be an option for specifying a longer description to be shown on hovering over the title.
So, I added a title attribute to the text element that encloses the title text, and…
synaptik
- 8,971
- 16
- 71
- 98
5
votes
1 answer
Reduce Plotly.js library size
I am building a simple landing page which includes a 3d scatterplot graphic from plotly, nevertheless the minified library weights 3MB, way too big for a mobile landing page.
In this closed feature request, they speak about modularise the library so…
NicolasZ
- 845
- 4
- 10
- 26
5
votes
1 answer
Adding a unit to y axis labels in plotly.js
I'd like to add a unit to the y-axis tick labels in plotly.js. How might I do this? Adding a ticktext and tickval property for yaxis layout doesn't seem to have the effect I thought, as it does with an xaxis.
Amy
- 51
- 1
- 4
4
votes
2 answers
Zoom on a Plotly heatmap
Currently there are 2 "zooming" behaviours in Plotly.JS heatmaps:
Here you can take any rectangular shape for the zoom (click, drag and drop). But then the pixels are not square, which is not ok for some applications (the aspect ratio is not…
Basj
- 41,386
- 99
- 383
- 673
4
votes
1 answer
Adding a keyboard event to plotlyjs
I want to listen to keyboard event in plotlyjs(spacebar key pressed to be more specific). When spacebar is pressed I want to discontinue line drawing on mouse click.
I have added eventListener to listen to key events but does not seem to work. Is…
Vinodh Ganesh
- 51
- 3
4
votes
1 answer
How to create a bar or column chart inside a table cell of each row
I need to create a bar or column chart inside a table cell of each row.
here is my json
[
{
"Chocolate": [
{
"kisses": [
{
"2022": {
"jan": 2000,
"feb": 1200,
"mar":…
yobo
- 67
- 5
4
votes
1 answer
Adjusting dates in X Axis Plotly
I was wondering how can you achieve the following:
I'm using a Date format of year and month ( i.e 2022-01), but Plotly is not providing an option to have a simple date value for the x Axis, Chart.JS actually allows you to define the date by month,…
Francisco Colina
- 339
- 2
- 4
- 13
4
votes
2 answers
PlotlyJS unix timestamp xaxis
If i have a unix timestamp as my xaxis, how can i format the xaxis ticks so that they are human readable. Example:
var x = [
…
maxfridbe
- 5,872
- 10
- 58
- 80
4
votes
1 answer
Plotly.js in relative barmode labels are overlapped when both bars have value 0
Continue my journey with Plotly.js. I'm using relative barmode and need to show some customized text when both opposite bars have value 0. The issue that for value 0 both bars grow in the same direction and labels are overlapped:
The only solution…
Anatoly
- 5,056
- 9
- 62
- 136