Add option to disable textScaling in ngx-charts-gauge

[DavidMarquezF]

I'm submitting a ... (check one with "x")

• [ ] bug report - search github for a similar issue or PR before submitting
• [x] feature request
• [ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior Add the option to disable textScaling in ngx-charts-gauge. When multiple gauges are used and they have different values, the text size in each one of them is different from the other.

It would be nice to have an option to dissable textScaling or a way to have more control over the sizes, so that when we use multiple gauges the result is more uniform.

Both gauges have the same size, but because the text in them is different, text sizes are different.

It could be done by using:

• An input like "textScaling" as a boolean and adding classes to the text containers so we could change them through css (or two inputs that controlled the size of the texts).
• An input like textScalingFormat to pass a function that will be called to calculate the new size (this way you give us more freedom about what to do with the sizes and scaling)

I think it would need to be handled inside this function:

https://github.com/swimlane/ngx-charts/blob/8e3413f1dd863bacb201188a505e84e37dc4a305/src/gauge/gauge.component.ts#L272

[DavidMarquezF]

If someone stumbles across the same problem and wants a fast solution, you can put text over the gauge with simple styling and html:

<div class="h-200" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="center center" style="position:relative">
                    <ngx-charts-gauge
                        style="position:absolute"
                                      [scheme]="gaugeScheme"
                                      [results]="gaugePercentil"
                                      [min]="0"
                                      [max]="100"
                                      [textValue]=""
                                      [margin]="[20,0,20,10]"
                                      [angleSpan]="360"
                                      [startAngle]="180"
                                      [bigSegments]="10"
                                      [smallSegments]="5"
                                      [showAxis]="false"
                                      [valueFormatting]="gaugeValueFormatting">
                    </ngx-charts-gauge>
                    <div style="position:absolute" style="margin: 20px 0px 20px 10px" fxLayoutAlign="center center" fxLayout="column">
                            <span class="text-gauge-percentil">{{gaugePercentil?.length > 0 ? gaugePercentil[0].value : '0'}}%</span>
                            <span>{{gaugeNumber}}</span>
                    </div>

                </div>

Looking though the source code I haven't found a direct way to change the visibility of the text (like you can with the legend and others) so I've used the the valueFormatting Input to always change the text to an empty string:

gaugeValueFormatting = (value) => {
        return ``
    };

Then, you can just change the size of the text depending on the Screen Size (xs, sm, md, etc.)

I believe this is the best way to do it currently. If someone finds a better way to do this or can improve mine it would be very nice 👍 .

As you can see in the image below, this works like a charm:

[anton-nikitsiuk]

I solved this problem with

  ngAfterViewInit(): void {
    this.chart.scaleText = ()=>{};
  }
updateChart(value: number): void {
    ...
    this.chart.textEl.nativeElement.style.fontSize = 48;
    ...
}

You can choose the right event as you want, but for me this concept is fine.