angularngx-charts

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


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


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

enter image description here

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
              },
...

Solution

  • 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