Skip to main content
Announcements
NEW Customer Portal: Initial launch will improve how you submit Support Cases. FIND OUT MORE
MattSmart
Employee
Employee

This past week, with all the focus in Orlando for Qlik Connect, I decided to spend some time giving a dashboard in one of our existing demos a makeover. Given all the new capabilities that have been introduced recently, I was excited to see what I could create. Let me walk you through how I completed this dashboard makeover.

The Original

Let’s face it, the original dashboard was boring. It was just a plain, functional dashboard with no “Wow“ factor. My goal for this makeover was to add some character to the dashboard.

MattSmart_15-1717793579614.png

 

  

 

Step 1: Find a color palette

The color palette that I decided on was on the green scale. Here are the colors that I used:

Sheet Background: #3d6666

Chart Background: #578080

Font color: #ffffff

 

Step 2: Change the sheet background color

  • In Edit Sheet mode, click on the sheet background to open up the Sheet Properties panel
  • Select Styling from the Sheet Properties panel

MattSmart_16-1717793579614.png

 

  • Toggle off the Background – Auto icon to show Custom

MattSmart_17-1717793579614.png

 

  • Select the Background color dropdown and enter the hex code that you would like to use

MattSmart_18-1717793579615.png

 

 

 

MattSmart_19-1717793579620.png

 

 

Step 3 – Chart Styling

Much of the work is done this section. The way I approached this was to style one chart and then use the copy/paste style function to bring the other charts to life with the new chart properties.

Note: When copy and pasting styles between chart types, there may be some additional editing needed to update all the chart characteristics. I started with the Profitability by Clinician bar chart.

  • First, we need to change the bars to white by selecting it in the Properties Panel > Colors and Legends

MattSmart_20-1717793579621.png

 

  • Next, we need to edit the other chart properties by opening the Styling Properties

MattSmart_21-1717793579621.png

 

 

  • We make the changes in the General section first.
    • Change the text color of the Title, Subtitle, and Footnote: #ffffff
    • Change the background color to our new chart background color:  #578080
    • Change the color of the border to the sheet background color: #3d6666
    • Change the corner radius to 7px
    • Change the shadow to medium

MattSmart_22-1717793579623.png

 

 

 

  • We now need to make the same changes to the Chart section

               

MattSmart_23-1717793579623.png

 

  • Change the text color of the Axis Title, Axis Label,  Value Label, Legend Title, Legend Label to #ffffff

MattSmart_24-1717793579624.png

 

 

  • Here is our new chart after the changes:

MattSmart_25-1717793579625.png

 

 

  • Next we need to copy/paste the new style to all of the charts by right clicking on the chart and selecting Copy Style.

MattSmart_26-1717793579627.png

 

  • Next, we right click on the chart where we want to paste the style and select Paste style

MattSmart_27-1717793579629.png

 

  • Once we update the characteristics of each chart, we will add grid containers to help us to layout each section of the dashboard and add in the corresponding charts to each section.

MattSmart_28-1717793579632.png

 

 

After all of the visualizations are added to the grid containers, we now have a new and improved dashboard.

MattSmart_29-1717793579638.png

 

Summary: With just some small changes to our color scheme and chart properties, we were able to completely transform our dashboard. With all the new features, chart types, and chart properties available to the Qlik Sense developer,  the only limit to customizing a Qlik Sense app is your own imagination.  

2 Comments