🚀Quick Start

In this tutorial we want to build a simple column chart.

Start with the sketch

In this tutorial, we want to display sales based on product categories. This is the sketch for the chart we want to make.

The initial sketch of the chart

Create The Chart

Step 1: Place the Chart Plotter Element:

To start, drag a Chart Plotter element and drop it on your page. This element serves as the canvas for your chart.

Dragging the Chart Plotter and dropping it on the screen

Step 2: Insert Bar Trace Module:

• Add a Bar Trace Module. This module allows you to add a column data series to the chart.

• Linked the module to the Plotter by inserting the 🟣|Bar A's Module Output on the Ⓜ️Traces field of Plotter.

Step 3: Add Data to Bar Module:

A view of the sales table in the bubble database

• To add the data to the chart, we need to group-by the sales records data by categories and calculate the sum of totals for each group.

Using group by on sales data

• The result should include the Product Categories and their corresponding sum of Total values.

• Then insert the categories to X and Sum of Totals to Y.

Now, you can preview the chart with default settings.

The created chart with default settings

---

Start to customize

Step 4: Styling Bars

• Use the options within the Bar Trace Module to set the color and opacity of bars.

• The column width is proportional to the available space. For example, a value of one means no empty space between columns, and a value greater than one means overlapping columns. We use 0.4 to create narrow columns.

Slice of Bar Trace Module Property Editor

Step 5: Use Axis Modules

Considering that we want to customize both X and Y axes, we add a separate module to the page for each. Like Bar Trace module, after adding, we link them to the Plotter.

Adding X and Y axis modules and linking them to the plotter

We applied these configurations to X and Y axes modules:

X - Axis

• Set title for X-axis with custom color

• For the chart to be automatically sorted in descending order, using the Category Order field, and setting it to Total Descending.

• The chart automatically identifies the axis type, but to ensure the correct type, we can specify it.

Y - Axis

• Set title for Y-axis with custom color.

• Specifying the title distance from the axis.

• Grid Options

  • Enable horizontal grid and custom color.

  • Show the zero line with the same color as the grid.

  • Hide main axis line.

  

• Labels Options

  • Format labels to display two main digits and add scale (4000 -> 4.0K).

  • Customizing the size and color of Y-axis labels.

  

  • Add dollar sign as label prefix.

  • Display the prefix ($) only for the last label.

  

• The chart automatically identifies the axis type, but to ensure the correct type, we can specify it.

• Set the default color for the axis.

Step 6: Plotter Layout Options

The plotter lets you customize the chart layout to your liking.

You can resize the chart like any other bubble element from the layout tab, which also supports responsive options.

Sometimes, you might want to set the size dynamically (for example, when the user builds a dashboard in your app). In that case, you can use the size fields in the plotter to do that.

Layout options of the Plotter property editor.

Wrapping up

Congratulations! You’ve created your first chart with Plotly Charts in your bubble app.

Column chart made by Plotly Plugin in bubble.io

FAQ

Should we set the size of the modules to 1 × 1?

You don't need to worry about their size, they are only visible in the editor and are hidden when the app is running and do not occupy any space. But if they bother you, you can set their width and height to zero.

Do we have to fill all the fields?

Not at all. We suggest filling a field when the chart itself does not provide what you want by default.

For example, in the chart we made in this tutorial, we did not disable the grid for the X-axis, but according to the data type of the X-axis, the grid is disabled by default.

This method saves you from adding a condition for styling.