🚀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.

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.

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:

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.

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.

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.

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.

We applied these configurations to X and Y axes modules:
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.
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.

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

FAQ
Last updated
Was this helpful?