How to create, customize and share client reports
5 min read

How to create, customize and share client reports

When creating client reports, it's important to apply a brand so the stakeholders know what the stats are for. This tutorial will show you how to do that.
Chartbrew client reports

Chartbrew offers the option to create a report out of each of your dashboards. The reports are useful when presenting data to your team and/or clients. The main benefits of using reports to present the data:

  • No dashboard editing features are being displayed
  • Sharing settings (unique public URL, team-only access, password protection)
  • Customizable (add your logo, colors, font, custom CSS)
  • Add/remove charts from the report with one click
  • Custom title and description text area

Feel free to skip to any relevant sections you want to know more about. You can also follow this tutorial step-by-step. The tutorial uses public website visitor data from leavemealone.app.


Alternatively, you can follow this tutorial even without signing up for a Chartbrew account. Just click on the link below to generate a temporary dashboard:

Chartbrew - Visualize your data in one place
Chartbrew allows you to connect all your databases and APIs to create beautiful live charts and visualize your data

Setting up

To get started, create a new project on your main dashboard. Give your project a descriptive name.

Creating a new project in Chartbrew

Once the project is created, Chartbrew will automatically direct you to the connections page. We can quickly create the website stats dashboard from here. Click on the "Community templates" tab and then select Simple Analytics.

Connecting to a data source in Chartbrew

Since leavemealone.app uses public visitor stats, it's enough to just point the template generator to their domain and the charts will be created automatically. Enter "leavemealone.app" in the input box, keep everything selected and then generate the charts.

Generate Simple Analytics charts in Chartbrew

After a couple of seconds, you should have the new dashboard generate automatically for you and it should look something like this:

leavemealone.app stats in Chartbrew

Add charts to a report

Now that we have some charts to work with, it's time to create a report. Note that this dashboard cannot be shared with anyone outside your team just yet. Only reports can be shared.

Let's add all these charts to the report and then start editing. To add a chart to the report, open the chart settings dropdown menu and click on "Add to report".

Adding charts to a report in Chartbrew

After you do this you will notice a "screen" icon appear under the chart title. This means the chart is visible on the report. Repeat this step with all the charts to add them all to the report. You can then access the report from the side menu like shown in the picture below.

Accessing the Chartbrew report from the side menu

Editing the report

The team editors and admins can see a toolbar with multiple actions at the top of the report. These actions will let you edit the report to match your brand. Let's go over all the available options, starting with changing the logo. You can change this by dragging your logo over the existing one or by clicking on it.

Changing the report logo in Chartbrew

Next, let's change the background and text color to match the look and feel of leavemealone.app

The title and description of the report can be changed as well. On top of this, you can add your own custom CSS to the page. Let's make the following changes:

  • Change title and add a description
  • Make title and description bigger
  • Add a more visible box shadow around the charts
Editing the style of the report in Chartbrew

Here is the CSS code used for this example if you want to keep the same one:

.dashboard-title {
    font-size: 2.5em !important;
}

.dashboard-sub-title {
    font-size: .6em !important;
}

.chart-card {
    box-shadow: rgb(51 51 79 / 20%) 0px 1px 5px 1px !important;
}
Editing a report in Chartbrew

And with this, we now have a branded report that can be shared with others. Next, we'll go over different ways a report can be shared.

Custom client report in Chartbrew

Sharing a report

By default, a Chartbrew report is private, so only team members can access it. There are 3 main ways that reports can be shared:

  • Private - Share the private report to team members only
  • Public - Mark a report as public and anyone with the link can see it
  • Password protected - A public report that can only be accessed with a password

You can access the sharing settings from the top menu. This will open a window where you can change the URL of the report, change privacy settings, get the embedded code so that you can place the report on your website, and show/hide Chartbrew's branding.

To make a report public so that everyone can see it, it's enough to just toggle ON the "Make public" option.

Making a public client report in Chartbrew

You can add a password to your public report as well. This will ensure that only people that know the password can see the charts.

Password-protected client report in Chartbrew

Visitors outside of your team that go to the report URL will now see a window where they have to enter the password.

Password protection notice in Chartbrew

Embed reports on external websites

Last but not least, these reports can be embedded on other websites. You can get the code from the sharing settings window. Copy and edit this code as you see fit and then add it to any website. You can then have an always-up-to-date report without leaving your website.

Embedded client report code in Chartbrew

To get an idea of how this could look like, click on the link below to see this report on a Notion page.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
A new tool that blends your everyday work apps into one. It’s the all-in-one workspace for you and your team

Conclusion

The editor was built to get a custom-looking report up and running quickly. In Chartbrew you can create dashboards with just a few clicks using the templates feature, so it's important to make it as easy as possible to edit and brand the reports. Do you have any suggestions on what to add to the editor next? Feel free to send an email to [email protected] ✌️

Also, if you're feeling adventurous, try adding some animations using the custom CSS feature. Send over your crazy reports on Twitter @chartbrew.