plotly / plotly/plotly.js

make grid simplify subplots (mixed plots not working currently)

Open
#5,691 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Usecase:
User should be able to draw subplots with ease by using grid option.
User has 4 diff graphs and he wants to put them together, in grid by using following option without getting into much complexity

grid: {
    rows: 2,
    columns: 2,
    pattern: "independent"
  }
}

Ease of use:
It will be great to have similat functionality like provided in python plotly where user can define rows, columns, colspan and rowspan in data. Its plain and dead easy.

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(
    rows=5, cols=2,
    specs=[[{}, {"rowspan": 2}],
           [{}, None],
           [{"rowspan": 2, "colspan": 2}, None],
           [None, None],
           [{}, {}]],
    print_grid=True)

Reference:
python plotly.subplots has given functionality with much ease of use. see HERE. Same is needed for js Please

Code Pen:
https://codepen.io/mafar/pen/YzZEdLR?editors=0010

JS CODE:

var trace1 = {
  type: "bar",
  y: [2, 3, 1]
};

var trace2 = {
  r: [2, 3, 1],
  theta: [0, 45, 90],
  type: "barpolar"
};

var trace3 = {
  type: "pie",
  values: [2, 3, 1]
};

var trace4 = {
  mode: "lines",
  type: "scatter3d",
  x: [2, 3, 1],
  y: [0, 0, 0],
  z: [0.5, 1, 2]
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  grid: {
    rows: 2,
    columns: 2,
    pattern: "independent"
  }
};

Plotly.newPlot("myDiv", data, layout);

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the mixed bar, barpolar, pie, and scatter3d example through Plotly.newPlot and compare it with the linked CodePen. Read the existing grid layout behavior and the Python Plotly subplots reference, then define what support for rows, columns, independent mixed plots, colspan, and rowspan would require; done means the example works without manual subplot configuration.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.