Font size not readable in visualisations

[janagombitova]

We received feedback recently that the text showing in Lumen visualisations is hard to read due to the size of the font used. This is especially for cases when the visualisations are used offline, but actually when being created and shared online some of the fonts are really small.

The goal of the visualisations in Lumen is to clearly share an insight/a message, meaning the person viewing it needs to be able to also read what is written in the visualisations. This issue goes hand in hand with https://app.zenhub.com/workspaces/akvo-flow--lumen-55d493e09e846e9104ab9478/issues/akvo/akvo-lumen/2818

Secondly, when setting up visualisations we want Salim to have the flexibility to customise them to his needs but also limit the decisions he needs to take. We need to see what is the best way in this case.

Here is an example of this visualisation (https://akvointernal.akvolumen.org/visualisation/5e9d5a3f-a139-4da6-b58b-74d7ce7a7a79) in the editor, shared online and downloaded as a png.

^ in the editor

^shared online - https://akvointernal.akvolumen.org/s/52nX-XVx8ps ^ downloaded as a png

@Kiarii what is your take?

[Kiarii]

This is an issue that Molo also shared yesterday 😟

For a quick turn around we would need to increase the font size, spacing and weight before we start looking into whether we can provide customizations around the fonts..

The PNG export 'grains' the text, as if it takes the minimum possible resolution, if possible we should optimize the resolution for the exports, incl. the PDF. As an example PNG exports of Highcharts are of high resolution and maintain content's visual clarity, we should aim for the same if not better

It would also be nice if the visualization is centered (rather than left-aligned) in its container i.e. in the editor, and exports

[janagombitova]

Let's make that quick turnaround happen. Can you define the specs @Kiarii ?

[janagombitova]

One issue that might be worth to look at either together with this issue or to keep in mind when thinking of the solution: https://github.com/akvo/akvo-lumen/issues/2818

[kardan]

Started to look at this issue yesterday. Some (legends) of the texts are easy to increase by changing css. Others like the texts in the AxisLeft is not respecting the calculated axisLabelFontSize (https://github.com/akvo/akvo-lumen/blob/master/client/src/components/charts/bar/SimpleBarChart.jsx#L273) Investigating locally my local axisLabelFontSize is 13 but HTML generated is

<svg x="-0.25em" y="0.25em" font-size="10" style="overflow: visible;">
  <text x="-8" y="796.125" fill="#222" font-family="Arial" font-size="10" text-anchor="end">
    <tspan x="-8" dy="0em">0.5</tspan>
  </text>
</svg>

[Kiarii]

I've defined the preliminary changes relating only to text/font here, ignore the rest of the file which will focus on visual spacing and grouping elements and components

[kardan]

Font sizes for bar charts (normal, stacked, vert & horizontal) been increased. We should review how things looks on test were there are more different charts etc.

[janagombitova]

Here is how the example visualisation looks now:

^ in the editor

^ shared online

^ png

The components are more visible and better readable. Good work you two!

[janagombitova]

Can we also handle the following:

Increase the axis fonts for line and area charts to match the current bar charts one

Increase the font for the bubble chart and scatter plot legend - Size - description to match the bucket list font size

Match the visualisation title and update date with the bar charts for pivot tables (if not already done)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.