rcpch / digital-growth-charts-react-component-library

A typescript React library for displaying RCPCH Digital Growth Charts from API data
https://growth.rcpch.ac.uk
MIT License
7 stars 9 forks source link

Tooltips - Unable to resize fonts #77

Closed dmc-cambric closed 5 months ago

dmc-cambric commented 6 months ago

Hi Team,

We've had a request from one of our clients to make the tooltip text more readable, so I've tried to increase the font size via. the tooltipTextStyle property on the ChartStyle interface.

However it seems to only increment the stroke width of the font rather than the actual size of the font. Could this be changed so that it increases the size of the text within the tooltip?

Using Ver 6.1.15

I think I've found the file that sets this value: https://github.com/rcpch/digital-growth-charts-react-component-library/blob/eac54e2209f30cf71b2a230153820954a8c3ec93/src/functions/makeAllStyles.ts#L59

Also a couple of visual examples:

tooltipTextStyle.size = 0.6 image

tooltipTextStyle = 3 size-3

eatyourpeas commented 6 months ago

Yes @dmc-cambric very happy to do this. Just looking at the styling of your screenshots though slightly troubled by the fact that the font in your tooltips looks to be Times New Roman, not Montserrat (see #76). Is that a deliberate choice or is the default styling in the package not working for you? Different fonts have different spacing which is set within the Victory package on which the charts are build, and this should work for Montserrat as the Victory maintainers kindly accepted a PR from us to include it.

eatyourpeas commented 5 months ago

This should be fixed in the next update:

image
toolTipMain: {
            textAnchor: "start",
            fontSize: chartStyle?.tooltipTextStyle?.size ?? 10,
            strokeWidth: 0.25,
            fill: chartStyle?.tooltipTextStyle?.colour ?? black,
            fontFamily: chartStyle?.tooltipTextStyle?.name ?? 'Montserrat',
            fontWeight: chartStyle?.tooltipTextStyle?.weight ?? 'normal',
        },
eatyourpeas commented 5 months ago

Fixed and merged in v7.0.0. Documentation updated