Skip to content
  • There are no suggestions because the search field is empty.

Create a Chart with Data Visualizer (beta)

Data Visualizer allows you to build interactive, on-brand charts directly in Foleon. No more exporting data, fixing styles, and replacing screenshots. Simply import or add your data and create a chart in the Data Visualizer. When your data changes, your charts automatically update across all Docs where they’re used, without any manual design work.

In this article

⚠️ Data Visualizer is currently in beta. During the beta, you can make up to 3 charts public. You can purchase the Data Visualizer add-on for more charts with a 25% discount before the end of March. Contact us here if you’d like access.

What is Data Visualizer?

Data Visualizer allows you to create, manage, and reuse charts directly within your workspace. Charts are centrally stored, easy to update, and automatically stay aligned with your Brand Kit.

With Data Visualizer, you can:

  • Create bar, column, line, and pie charts

  • Import data via CSV or edit values directly

  • Apply Brand Kit styling

  • Make charts available across your workspace

  • Update charts without re-uploading files

📹 In the video below, we walk through the complete flow, from creating a chart to adding it to a Foleon Doc.

 

📖 For more inspiration and examples, view our Data Visualizer Foleon Doc.

Style your charts in the Brand Kit

Before creating charts, you can define their default styling in your Brand Kit. When you add a chart to your Doc, it inherits the styling from the Brand Kit applied to that Doc.

📖 For more information, read the article: Govern your brand with a Brand Kit

To set the default style in your Brand Kit:

  1. Open your Brand Kit
  2. Navigate to the Charts tab
  3. In this tab, you can configure the following settings:
    1. Chart colors
    2. Chart background color
    3. Tooltip background color
    4. Axes lines
    5. Grid lines
    6.  Fonts
    7. General chart settings
  4. Click Save to update your Brand Kit

    How chart colors work: 
    You can define up to 10 chart colors. The order of these colors determines how they are applied. For example, if a pie chart requires four colors, the first four colors defined will be used.

    How fonts work:
    Chart text inherits its styling from the text styling in the Basics tab:

    • Chart title → copies the style from Header 1
    • Chart subtitle → copies the style from Header 4
    • Axes labels, legend, tooltip, and data labels → copies the style from paragraph

    You can manually adjust text styling on the top bar if needed.

    Chart Settings in the Brand Kit

    How to create a chart with Data Visualizer

    Step 1: Start a new chart

    💡 The following user roles can create charts: Admins, Designers, Publishers

    1. In the dashboard, navigate to your workspace and open Data Visualizer from the menu

    2. Click Start new chart in the top right corner

    3. Give your chart a descriptive name and click Create

    Start new chart in Data Visualizer

    Step 2: Choose your chart type

    1. Select one of the four available chart types: Bar chart, column chart, line chart, or pie chart

    2. Click Continue to configure your chart

    💡 You can change your chart type later if needed

    Select chart type and click continue

    Step 3: Add your data

    On the Data tab, you can upload or edit the data in your chart.

    To upload your data from a CSV:

    1. Click Import CSV
    2. Select the CSV file from your computer. Once uploaded, your chart will be automatically generated based on your dataset.

    If values change later, you can edit them directly in the table, no need to return to Excel and re-import your file.

    Import CSV

    To manually update your data:

    1. Click into any cell and adjust the value
    2. Click Clear table to remove all data

    💡 For large datasets, click Expand table to make the table full screen.

    Manually adjust data in Data tab

    You can also adjust dataset colors here. We recommend applying your Brand Kit first, then making manual adjustments if needed.

    ⚠️ If you manually change the styling, you will override the Brand Kit settings for that chart.

    Step 4: Configure your chart

    Open the Chart tab to control how your data is displayed.

    Click the dropdown to switch chart types. The chart automatically adjusts based on your selection.

     You can adjust other settings, such as:

    • Show or hide the legend

    • Adjust grid lines

    • Configure tooltips

    • Enable or disable data labels

    • Adjust axes

    • Modify text, titles, and alignment

    Change settings in chart tab - Data Visualizer

    Step 5: Style your chart

    Open the Style tab to apply your branding.

    Select a Brand Kit to apply predefined styling. Your chart will automatically update to match the selected Brand Kit. 

    Apply Brand Kit to chart in style tab


    Y    ou can manually adjust:

    • Chart background

    • Tooltip background

    • Axes lines

    • Grid lines

    • Fonts

    • General chart settings specific to your chart type:

    Pie Chart Settings Line Chart Settings Bar & Column Chart Settings
    Pie chart settings

     

    		 Line chart settings

     

    		 Bar and Column chart settings

     

    💡 Want to create a donut chart? Adjust the Pie inner radius setting in your pie chart configuration. Increasing the inner radius transforms the pie chart into a donut chart.

    To change the colors of the data on your chart, go back to the Data tab and adjust them in the table.

    ⚠️ If you manually change the styling settings, you will override the Brand Kit settings for that chart.

    Step 6: Make your chart public

    Once your chart is ready, you need to make it public before it can be used in a Foleon Doc.

    💡 During the beta, you can make up to 3 charts public. To publish more charts, purchase the Data Visualizer add-on. Contact us here if you are interested!

    To make your chart public:

    1. Click Make public on the top right corner
    2. Confirm you want to make your chart public

    This makes the chart available to others in your workspace and allows it to be added to Foleon Docs.

    Make your chart public

    Add a chart to your Foleon Doc

    1. Open your Foleon Doc in the Editor
    2. Go to Elements and drag the Chart element onto your page.
      Drag and drop chart element on your page
    3. Select your chart from the list. Your chart is now added to the page. 

    💡 Your chart must be public in order to use in a Foleon Doc. Learn how to make a chart public here.

    Click the settings icon ⚙️ on the chart element to adjust the following:

    • General settings (size)
    • Border
    • Shadow
    • Spacing
    • Alignment
    • Visibility
    • Animation

    These settings affect how the chart behaves on the page, not the chart data itself.

    Access chart element settings

    To edit the chart data or style, open the element settings and click Open in Data Visualizer. This will open the chart in Data Visualizer, where you can update it.

    Open chart in data visualizer

    Update your chart

    One of the biggest advantages of Data Visualizer is centralized updates. You create your chart once in Data Visualizer and use it across all your Docs. When your data changes, simply update the chart in one place. The chart is automatically refreshed everywhere it’s used, so you can be confident your data stays accurate and consistent.

    To update a chart:

    1. In the dashboard, open the Data Visualizer page in your workspace

    2. Select the chart you want to edit

    3. Make your changes

    4. Click Update. You'll see an overview of where your chart is used

    5. Confirm you'd like to update your chart

    If the chart is used in one or more Foleon Docs, the updated version will automatically reflect everywhere it’s added. This keeps your data accurate and consistent across all Docs, without manual updates.

    Update your chart