Chart blocks

Chart blocks allow you to create charts from Pandas DataFrames without using code. They are perfect for fast exploratory analysis, or for those who are not familiar with how to make charts using Python code.

To get started, you can watch our quick demo on chart block configuration.

Adding a chart

Alternatively, you can also add a chart block by pressing the add block (+) button in between blocks and selecting the Chart option from the menu.

Setting up the data

To start, you need to select a DataFrame to visualize in the upper left corner. Once you picked your dataset, you can configure your chart with the options under the Data tab.

You can choose from 6 different chart types (bar chart, line chart, area chart, pie chart, scatterplots and histogram). These types define the basic geometrical representation of your data. They act as starting points from which you can build the most common exploratory chart types. For instance, from a bar chart, you can create stacked bar charts, grouped bar charts and even heatmaps by using the various settings.

At the X and Y axis, you can select the specific columns you wish to visualize from your dataset.

Chart AI (Beta)

As an alternative to manual setup, you can also ask Deepnote AI to create a chart for you. Simply type in your question or instructions for the desired visualization and hit Submit. In a few seconds, Deepnote AI will respond with a chart suggestion which you can accept (Done) or reject (Undo).

The accepted chart will have all the configurations filled out for you. You can use it as a starting point and manually tweak things further. You can also request follow-up edits from Deepnote AI by typing in a new prompt to modify your existing chart.

Known limitations of Chart AI:

• it cannot create combo charts (multiple layers)
• it cannot apply some stylistic changes such as modifying colors, legends or number formats

Chart recommendations

When you create a chart block, you can click on the Explore button to see a selection of chart recommendations based on your DataFrame.

The suggestions gallery includes the most commonly used chart types for data summarization. Once you click on a chart, you can pick it as your current one (Replace chart) or create a new chart block from it (Add new chart).

Chart recommendations can greatly accelerate your exploratory workflow. Instead of starting from scratch, you can swiftly browse through a quick overview of data summaries, then pick your starting point and build your chart from there.

Aggregation

Once you added a column to an axis, you can see the applied aggregation displayed next to the column name. You can click on this button to change the aggregation function for the given column.

On bar, line and area charts, SUM() aggregation is applied automatically when you select a quantitative column.

Data types

The selected columns on the charts are automatically assigned one of three data types: categorical, quantitative and time. You can see the current data type indicated as an icon on left side of the column name.

In certain cases, you may want to change the inferred data type. For instance, datetime variables may not be identified as such when you read data from a CSV file. You can change the data type easily by clicking on the icon.

Time units

Time units make it easy to adjust the granularity of time series analysis on the fly. When you add a temporal column to an axis, you can change the displayed time unit. Pick from multiple time intervals/formats in the dropdown menu and the temporal axis will be grouped by the selected unit.

Sorting

When you add a dimension (categorical or time) column to an axis, a sorting control will be displayed under the axes. You can click on it to access various sorting options.

Ascending and descending will sort the categories in alphabetical order. Ascending and descending by [column] will sort the categories according to the values of your applied quantitative column.

Group by

You can break down your chart along a secondary grouping dimension by selecting a categorical column at the Color selector. On bar charts, this will create a side-by-side (grouped) bar chart with the secondary grouping shown as different coloured bars.

You can change the layout of the secondary grouping at the Stacking options.

Stacked creates a stacked bar chart. Stacked %-normalized will create a stacked bar chart with the values normalized to a percentage scale.

Other visual encodings

Besides group by, the Color selector can also be used to apply a color scale to your chart based on the values in a quantitative column. You can pick a different color scale by using the color picker.

Size provides an alternative option for visual encoding by mapping the values in a quantitative column to:

• width of bars (bar chart)
• width of lines (line chart)
• size of points (point chart)

You can use Size in combination with color scale encoding to build more complex visualisations.

Filtering

You can slice and dice your data right from the charts with interactive filtering. Select data points to filter in/out in one of two ways:

• highlight a range of data points with mouse-select;
• click on individual series in the Color legend.

Once you selected some data, press the Keep only or Exclude buttons to filter in/out the selected data points on your chart. You can also combine multiple filtering steps to drill down even further.

You can also apply conditional filters on your charts, giving you to more precision and the ability to apply more complex filtering logic. Simply click the Filter button in the block actions menu, select the column you wish to filter, choose an operator and a value for your condition, and press Apply. The chart will update instantly!

The applied filters are always added to the Filters list, making them easy to remove or modify. You can also combine multiple conditional filters - just press the plus button in the Filters list to add a new filter for more complex filtering logic.

Conditional filters are also available in Apps! By utilizing filters, your audience can easily slice and dice the plotted data themselves, enabling them to focus on particular aspects of interest. This greatly extends the self-serve capability of your Apps, making them more dynamic and eliminating the need to anticipate all filtering needs in advance.

Combo charts (multiple layers)

In certain cases, you may wish to visualize multiple quantitive columns (e.g a secondary axis) from your dataset within a single chart. You can do that by adding multiple layers to you chart.

The quickest way to do this is to use the add secondary measure (+) button displayed under the Y axis. Click on it, pick your secondary measure and we will create a new chart layer with all settings pre-configured for you, including the legends.

You can also create combo charts by building layers manually. To do that, you can either duplicate an existing layer or create a new one from scratch. The layer controls are located in the chart's footer.

Each new layer has their independent configuration options (Data and Format tabs). For instance, you can change the chart type on the second layer to line chart and thus create a bar+line combo chart.

You can create a color legend for multi-layered charts by selecting Measure Name at Color. This option will automatically display the name of the selected quantitative column in the legend and will assign a unique color to it. You can also customize the name of the legend item by typing in the text field at the Measure Name option.

Formatting options

You can access various formatting options for the given chart layer by clicking on the Format tab. The settings listed here are based on the selected chart type and columns (X and Y axis) on the Data tab.

You can modify the axis titles with a custom label or optionally hide them. For quantitative axes, you can also choose a different scale (e.g. logarithmic) and apply a custom range to the visualized values.

You can also toggle Value labels to display the numerical values of individual data points.

Pie chart formatting

When you create a pie chart, you can find some extra styling options under the Format tab.

• Show as allows you to switch to relative (Percent) values, where the numbers on each slice display the given portion of the whole as percentages.
• Center gap lets you choose different sizes for the hole in the centre of the pie, essentially enabling you to create various doughnut charts. If you want a classic pie chart instead, you can select None.

Display settings

Click on the Display tab to adjust general settings applied to the whole chart canvas.

You can add a custom title to the chart. You can select the placement of the chart legend or hide it optionally. You can also turn off the tooltips (displayed when you hover over a data point) and the grid lines.

Custom tooltips

Ever needed to show just a bit more information on a chart without cluttering the entire visualization? With custom tooltips you can enrich your charts by selecting additional data points to display from any column in your plotted dataframe — not just those configured on the chart.

It’s perfect for highlighting more information for an unusual data point on a scatterplot or adding context with an extra metric on your bar charts, all without overwhelming your audience.

Simply go to the Display tab and choose the columns you wish to display in the Data selector in the Tooltips section.

Customize charts with code

If you need more flexibility to customize your charts, you can duplicate your chart block into code by selecting the option in the block actions menu.

This adds a new Python code block to your notebook, containing the configuration of your chart in the Vega-lite specification format. Vega-lite is very powerful and fairly easy to learn so it’s a great option if you need to create a finely customized or super advanced visualisation.

Resizing charts

Once you’ve finalized your chart, you can collapse the configuration sidebar to make the chart fill out the whole block. If you wish to present charts on larger displays, you can switch to full-width mode for your notebook. You can also vertically resize the chart by dragging the resize handle at the bottom of the chart canvas.

Limitations

Chart blocks can display a maximum of 10 thousand rows of data. If you plot datasets larger than this, only the first 10k rows will be visualized. You can aggregate or filter the data prior to visualization to get under this limit.

Big number chart

We all love a good bar chart or a scatter plot— they're great for deep dives into data. But sometimes, you need to cut to the chase and highlight a single, crucial metric for your stakeholders. That's where our big number chart comes in. It's the simplest way to put your most essential numbers front and center in your apps and dashboards.

You can add a big number block by pressing the add block (+) button between blocks and selecting the "Big number" option from the menu.

The title block supports interpolating Python variables using Jinja-style brackets. For example: "Sales in {{month}}".

You can choose any variable available inside the notebook for the value you want to display.

The big number chart has different formatting options, including:

• Number
• Currency
• Percent
• Scientific
• Financial

Comparisons

If you want to show progress or change over time, you can also add a comparison to visualize how this number differs from a previous value, making trends instantly noticeable.

There are a few different ways to do the comparison:

• Absolute change: The difference between the current and previous values.
• Percentage change: The percentage difference between the current and previous values.
• Absolute value: The current value compared to a fixed reference value.