Search code examples
javascriptamcharts

amchart accessing values inside a structured data object, part 2


I had a previous post controlling amcharts data object. Thank you @kikon for your help!
This time I cant seem to tweak the ouput of tooltip from the json object, let me explain:

From this function:

var series = chart.series.push(
      am5xy.LineSeries.new(root, {
          name: name,
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: field,
          categoryYField: field+'_text',
          categoryXField: "year",
          tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
          })
      })
  );

categoryYField is created from:

const dataProcessed = data.map(o=>Object.fromEntries(
    Object.entries(o).flatMap(
      ([k, v])=>[
          [k, v ?.[0]?.[positioningKey] ?? v],
          [k+"_text", Object.entries( v?.[0] ?? {[defaultKey]: v} )
              .map( 
                  ([k, v]) => (k.length > 0 ? '\n' + k + ': ' : '') + v
              ).join("")
          ]
      ]
    )
  ));

But I would like to populate the tooltip only from the string portion of the data object bb: var data = [{year:"1930", italy:[{aa:20,bb:"21"}], germany:[{aa:30,bb:"44"}], uk:[{aa:40,bb:"77"}] }, {year: "1934", italy: 1,germany: 2,uk: 6}, {year: "1938",italy: 2,germany: 3,uk: 1}];

Currently it takes values from aa and joins it together with bb.
aa is necessary for valueYField from chart.series above so the data object needs this value but how can I control tooltip to display only bb?

let tooltip = am5.Tooltip.new(root, {
      labelText: '[bold]{name}[/]{categoryY}'
  }); 

Here is the fiddle
thank you anyone?


Solution

  • You should be able to control the contents of the tooltip from the function

    ([k, v]) => (k.length > 0 ? '\n' + k + ': ' : '') + v
    

    It is mapped over the entries of each data point.

    If you want to exclude the positioningKey, you can do it this way:

    ([k, v]) => k !== positioningKey ? 
                (k.length > 0 ? '\n' + k + ': ' : '') + v : ''
    

    jsFiddle

    If you wanted to also exclude the keys themselves from the output (keep just the values):

    ([k, v], idx, a) => k !== positioningKey ?
                 v + (idx < a.length - 1 ? ', ' : '')  : ''
    

    jsFiddle