Skip to main content

Subplots

Incomplete documentation!

We're still working on this documentation page. If you have any questions or suggestions, please let us know via the feedback portal

Overview​

Subplots aren't standalone entities but are created through the arrangement and interaction of multiple traces and their associated axes. Each trace, with its unique axis, can be seen as a subplot in itself. Using the React-Chart-Editor, this capability becomes even more user-friendly, allowing for the easy creation, adjustment, and customization of subplots within a chart.

Understanding Traces and Axes​

  • Trace: A trace represents a single data series on a chart. This could be a line, bar, scatter plot, etc.
  • Axes: Each trace can have its own set of axes (x and y). By default, traces might share a common set of axes, but they can be customized to have their own, resulting in what we perceive as "subplots."

Creating Subplots using Traces​

In Data & Visualization app:

  1. Add a New Trace: Start by adding a new trace to your chart in the editor.
  2. Select Data for Trace: Input or link the data source for this trace.
  3. Add another trace: You need at least 2 traces to create a subplot.
  4. Assign Unique Axes to the second trace: For the subplot effect, assign this trace its own set of x and y axes. This will automatically create a new subplot.
  5. Repeat: For multiple subplots, simply repeat the process, adding more traces and assigning them unique axes.

Customizing and Arranging Subplots​

  1. Positioning Axes: The position and size of the axes determine the location and size of your subplots. Using React-Chart-Editor, you can click and drag axes to move them around the chart area. Resizing is also as simple as dragging the axes boundaries.
  2. Styling and Formatting: Each trace (subplot) can be styled individually. Adjust colors, line styles, markers, and more to differentiate between subplots.
  3. Annotations and Labels: Provide context by adding annotations or labels specific to each subplot.
  4. Interactivity: Each subplot retains the interactive features of Plotly.js, like tooltips, zooming, and panning.

Advantages of Using Subplots​

  • Visual Clarity: By breaking down complex data into multiple subplots, viewers can more easily process and understand the data.
  • Comparative Analysis: Display related data side-by-side for easy comparison.
  • Flexible Layout: The drag-and-resize functionality allows for a highly customizable chart layout.

Best Practices​

  1. Maintain Consistency: If subplots represent similar data types or units, try to maintain a consistent scale for easy comparison.
  2. Avoid Overcrowding: While it's tempting to add many subplots, too many can clutter the chart. Aim for a balance between comprehensiveness and clarity.
  3. Use Descriptive Labels: Ensure each subplot has clear and descriptive labels and legends to provide context.

By understanding the relationship between traces and axes, you can harness the power of subplots to create rich, multi-faceted visualizations. Our Chart Editor interface simplifies this process, offering an intuitive way to design and customize intricate charts.