Is there a way to show the line's total value on the legend of the Ngx Line Chart?

Question

If I set the total values to name attribute like this: "name": "Germany: 1234" it also shows up on the line like this:

I want total value to only show up on the legend:

This is the structure of data:

        export var lineChartMulti = [
          {
            "name": "Germany",
            "series": [
              {
                "name": "2010",
                "value": 700
              },
              {
                "name": "2011",
                "value": 750
              },
...
            ]
          },
        
          {
            "name": "USA",
            "series": [
              {
                "name": "2010",
                "value": 650
              },
...

It is a bit unclear. Whatever name you are putting in the name as value that is displaying. You want to just display Germany and nothing else even if you have named it Germany -`xyz` so `xyz` should be omitted etc? Or do you want dynamic value to be displayed from api etc? — Wahab Shah, Feb 18 '22 at 13:02
I want to display Germany and the total value next to it in the legend area only, without showing the total value on the line's tooltip. So I want to see Germany - xyz only on the legend but the problem is both the legend and the tooltip use same attribute which is "name". — Ozan, Feb 18 '22 at 13:49

score 1 · Accepted Answer · answered Feb 18 '22 at 16:43

So there is a possibility of defining your custom tooltip and then render as you like. I will share couple of links. One is a stackoverflow link and the other is some census data represented. They have done the same thing but the opposite way. They have showed values on line tooltip but not on legend.

Here is the code and reference link to it.

<ngx-charts-line-chart        
    [scheme]="colorScheme"
    [results]="multi" ...>
  <ng-template #tooltipTemplate let-model="model">
    This is the single point tooltip template
    <pre>{{model|json}}</pre>
  </ng-template>

  <ng-template #seriesTooltipTemplate let-model="model">
    This is vertical line tooltip template
    <pre>{{model|json}}</pre>        
  </ng-template>
</ngx-charts-line-chart>

Here is the link below for similar issue as well. See the answer. custom tooltip

Is there a way to show the line's total value on the legend of the Ngx Line Chart?

1 Answers1