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
17
votes
1 answer
How to plot a vector field in Julia?
I want to plot a vector field in Julia. I could not find an example here.
Here there are some examples using plotly, however, they do not work for me. I would like to plot the vector field by plotlyjs or plotly.
Here is an example code in…
MOON
- 2,516
- 4
- 31
- 49
11
votes
1 answer
How to add colored background bars in plotly.js chart
How can "plot bands", or shaded areas in a chart, be added to a plotly-js chart? Something looking like this picture:
(Which comes from a different product: Highcharts)
Specifically, I would want to add background color to some portions (multiple…
herchu
- 936
- 7
- 24
11
votes
1 answer
Change the background color of a plot
I am using Plotly.js for plots on my website. I can't for the life of me figure out how to change the background color to anything besides white. Can that be done, or am I just missing something? Space isn't white, it is black, it would be nice to…
PearsonArtPhoto
- 38,970
- 17
- 111
- 142
10
votes
1 answer
How to get grouped boxplots with vertical subplots
I'm trying to create a chart like the one in this image using Plotly.js:
It's a grouped boxplot (by sites, currently only one) with two y axes.
I've managed to create two versions, both of which don't work:
Create 5 traces (1 for each box) so that…
Baz
- 36,440
- 11
- 68
- 94
9
votes
2 answers
Customise hover of parcats plotly.js chart
I've used a plotly.js parcats chart to make a sequential sankey (eg https://github.com/EE2dev/sequence-explorer). Here are the example parcats that shows changes in grades between quizzes:
var trace1 = {
type: 'parcats',
hoveron: 'color',
…
orbital
- 943
- 3
- 16
- 28
8
votes
1 answer
Calculate Frequency and normal distribution curve co-ordinates (X & Y)
I am implementing Histogram chart using react-plotlyjs. Graph is implemented but I have to draw the normal distribution curve using X and Y axis. I have the X axis but Y axis is automatically calculated for Frequency. So, I need the co-ordinates of…
Vikash Dhiman
- 570
- 5
- 16
8
votes
2 answers
Chart not being responsive -react-plotly.js
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which…
user2128
- 590
- 2
- 13
- 35
7
votes
1 answer
Plotly - Hide data on hover tooltip depending on value?
When I hover over a stacked line chart, it shows zeroes for all lines not in range. Is there a way to hide these values rather than adding noise to the hover tool?
Minimal Example
Plotly.newPlot('test', [{
line: { shape : 'vh' },
stackgroup:…
PattimusPrime
- 867
- 8
- 21
7
votes
1 answer
Update ‘x’ and ‘y’ values of a trace using Plotly.update()
Is it possible to update the x and y properties of a trace using Plotly.update()?
Updating the marker.color property of the trace works well. But when I try updating the x or y properties the trace disappears from the graph. And there is no…
Jeremiah England
- 662
- 9
- 15
7
votes
1 answer
plotly.js, how to adjust title area size
I have a scatter plot as shown below with code. How do I make the title area not take up this much space? Just to be clear, I don't mean the font size of the title, but the empty space the title area occupies.
var rstTrace = {
x: x_data,
…
Indominus
- 1,228
- 15
- 31
6
votes
3 answers
Select/pin a single pixel on a Plotly heatmap
On a Plotly heatmap, sometimes it's useful to have 2 select modes:
rectangle selection (already available in the modbar)
selection/pinning of a single pixel: I'm trying to do it by recycling the existing "drawcircle" button which I don't need.…
Basj
- 41,386
- 99
- 383
- 673
6
votes
3 answers
How to share a dynamically generated image from react with react-share?
I have a react app which generates images on the front end dynamically using Plotly.js. I'd like to add image sharing functionality. I am trying to use react-share for this. Social platforms require image URL for image sharing and do not support…
Poliakoff
- 1,592
- 1
- 21
- 40
6
votes
2 answers
plotly - responsive width, fixed height
I have attempted to make a plotly chart that fits within a scrollable parent div:
data = {
Name: {0:'name1', 1:'name2', 2: 'name3',
3:'n4',4:'ewf',5:'dgag', 6:'faf', 7:'dfss',
…
Saleem Khan
- 700
- 2
- 6
- 20
6
votes
2 answers
Add padding on the left and right sides of the line/area chart
How to add padding on the left and right sides of the line/area chart?
Here's how my chart looks like:
and this is how it should look like (the padding/margin part):
Silver Ringvee
- 5,037
- 5
- 28
- 46
6
votes
1 answer
Should I install plotly.js or plotly.js-dist via npm?
There are two packages plotly.js and plotly.js-dist.
What is the difference between them and which one should I use?
Moreover on npmjs.org on plotly.js page it says in order to install plotly.js one have to run:
npm install plotly.js-dist
I mean, I…
matvs
- 1,763
- 16
- 26