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?
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 : ''
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 ? ', ' : '') : ''