swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

valueFormatting affect series tooltips #594

Open zpydee opened 6 years ago

zpydee commented 6 years ago

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

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior i have noticed that using the valueFormatting function in gauges not only affect the centre value but also changes the values shown in series tooltips. For example:

screen shot 2017-10-17 at 8 28 56 am

screen shot 2017-10-17 at 8 33 31 am

StephS commented 6 years ago

I had this exact issue. I made a quick fix by overriding the function:

import { NgxChartsModule, GaugeComponent } from '@swimlane/ngx-charts';

GaugeComponent.prototype.getDisplayValue = function () {
    if (this.textValue && 0 !== this.textValue.length) {
        return this.textValue.toLocaleString();
    }
    if (this.valueFormatting) {
        return this.valueFormatting(this.results);
    }
    var value = this.results.map(function (d) { return d.value; }).reduce(function (a, b) { return a + b; }, 0);
    return value.toLocaleString();
};

this made it so you get the full dataset, then can apply whatever transformation you want instead of the reduce/sum.

to use set valueFormatting to your function. here i check if it's an array, which means it's the data:

someValueFormat(val: any): string {
    if (val instanceof Array) {
        return val[0]['name'] + ' ' + val[0]['value'].toLocaleString();
    } else {
        return val.toLocaleString();
    }
}

ideally the tooltip and center text should have different functions, but this method works in a pinch. now all i need is to add multiline so i can show all of my data in the center.