Skip to content

Basics of customizing visuals

In this section, we will look at customizing our visual from the section Overview:

alt text

Info

Notice how the AFTER chart is much more presentable and readable.



STEP 1:

  • Click on the column you want to customize, lets first update the bars, i.e. count of customer names (Y-axis in this case).
  • This will open up the customization panel for the attribute.

alt text

Note

Notice how all the customization options are well organized. Customizing Axis? Find everything under Axis panel. Customizing Label? Find everything under Label panel.


STEP 2:

  • Lets begin with hiding the axis name, making it black, bold and 9px. Click save once done!

alt text


STEP 3:

  • Next, hide the axis name. You will have to open the config panel again. Its redundant. Click save once done!

alt text


STEP 4:

  • Lets also add the data labels and customize the same! Click save once done!

alt text


STEP 5:

  • Similarly, click on country and customize the same. Click save once done!
  • Notice how this time, we have rotated the labels by 90 deg as well.

alt text


STEP 6:

  • Lets change the column chart to bar chart. Click on the "Show Me" attribute, and change the Chart Type to bar chart.

Note

The reason for providing this option inside an attribute will make much more sense when we look at advanced charts and customizations!

alt text


STEP 7:

  • There is too much data currently on the tile, lets make the chart scrollable, and make the chart presentable.
  • Click on "Visual Styling" > "Component Styling" > "Zoom Controls"
  • Select "Allow Y-axis zooming" & set "Initial Zoom - End at row" to 10 & width as 0.
  • Click Save once done!

alt text

Note

The chart looks much more reable now and shows a scroll bar - which works when we click and drag!

However

the scroll should work when we scroll using the mouse as well. Lets fix this next!


STEP 8:

  • In the same "Zoom Controls" section, enable "Allow touch controls for zoom" and "Touch Zoom should work on Y Axis".
  • Click Save once done!

alt text

Info

Mouse scroll will now work on the chart. Users will also be able to easily scroll on touch devices like phones and tablets!


STEP 9:

  • The spacing at the left end looks too tight, let's fix it. In the same "Visual Styling" > "Component Styling" you will find "Body"
  • Update the "Padding" values (i.e. spacing)
  • Don't forget to click Save!

Info

To make the chart clean, we have also disabled the "Split Line"

alt text


STEP 10: Final Steps

  • Let's give this chart a title and add a style!
  • Title options can be found at "Title, Subtitle & Disclaimer"
  • Header Colour options can be found at "Visual Styling" > "Component Styling" > "Header"

alt text