Comments (11)
Thanks, that seems to work for me:
const ttip = am5.Tooltip.new(root, {});
ttip.get("background").set("fill", am5.color(0xff0000));
const container = am5.Container.new(root, { layout: root.verticalLayout });
const label1 = am5.Label.new(root, { text: "Label text" });
const label2 = am5.Label.new(root, { text: "More label text" });
container.children.push(label1);
container.children.push(label2);
ttip.children.push(container);
With the root.gridLayout
that already enables some possibilities...
from amcharts5.
Implemented in 5.2.11.
[5.2.11] - 2022-07-18
Added
- A new setting
deactivateRoot
(default:true
) added toModal
. Indicates if any interactivity on the underlying chart should be disabled when modal is open. - A new setting
html
added toContainer
. Set it to a string with HTML to be used as container's content. Will work on any element inheriting fromContainer
, e.g.Label
. More info. - A new setting
labelHTML
added toTooltip
. If set, will ne used as HTML content for the tooltip. More info. - A new setting
tooltipHTML
added toSprite
. If set, will ne used as HTML content for the tooltip when element is hovered. More info. wheelZoomPositionX
andwheelZoomPositionY
added toXYChart
. This value is not set by default, but you can use it to fix wheel zooming, to the end (if you set it to 1) or to the start (0) or middle (0.5). InStockChart
, it is set to 1 by default, as this is common practice in financial charts.- "Volume-Weighted Average Price (VWAP)" indicator added to
StockChart
.
Changed
- Setting
id
setting when creating an object will not register it inam5.registry.entitiesById
immediatelly, without waiting for the next frame.
Fixed
RadialGradient
'sx
andy
settings were being ignored.- Labels as bullets with
oversizedBehavior
set were not being displayed properly in some cases. DateAxis
withstartLocation = 0.5
andendLocation = 0.5
and single value only was showing a really big date range.- Resizing
PieChart
to a very small size with a legend positioned on the left or right could cause some anomaly in layout. - Updating
CategoryAxis
data with less items than there was originally was causing old columns/bullets to be shown. - Setting
verticalScrollbar
onContainer
toundefined
to remove a previously set scrollbar was not working.
Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.
from amcharts5.
Well, Tooltip
is a Container
. You could technically add any stuff into it.
from amcharts5.
@martynasma tooltipHTML is a important feature to have. We currently have a usecase to implment it but sad to find out it is not in amChart5
from amcharts5.
I was wondering the same thing. Considering amcharts5 is an overhaul moving towards canvas rendering as opposed to built in DOM elements, it feels like this feature wouldn't be as natural to support.
I will be sad to see this feature go if there are no plans to support it. Creating nice looking tooltips was much easier for me using markup.
I have been looking into getting this feature to work on one of my charts by manually displaying and updating markup based on events emitted from amcharts. I haven't quite gotten it to work right, but I think it is a feasible workaround. Albeit messy.
from amcharts5.
Currently there are no HTML tooltip support in amCharts 5.
The feature is not been fully axed yet, and is under consideration.
We might still implement it at some point. I'll leave this issue open, in case there are new developments.
Though, at this point I can't provide any promises :(
from amcharts5.
I think even being able to add a Container into the Tooltip would help in the meantime. That could allow for some basic layouting of elements.
from amcharts5.
Looks gr8.
Last question is how to bind data to labels?
from amcharts5.
I don't know if that's directly possible but for an am4-chart with a fairly custom tooltip I used something like the following for a date-based chart. Making use of the cursor position and look up data based on that:
const dateAxis = chart.xAxes.getIndex(0);
function showSeriesTooltip() {
const { tooltipDate } = dateAxis;
if (tooltipDate) {
const series = chart.series.getIndex(0);
// find data based on tooltipDate
const dataSet = series.data.find(item => item.date === tooltipDate);
// assemble custom tooltip content in here, e.g.
series.tooltipHTML = `<table>
<tr>
<td style="padding-right:10px;">${dataSet.id}</td>
<td style="text-align:right;">${dataSet.name}</td>
</tr>
<table>`;
}
}
chart.cursor.events.on("cursorpositionchanged", showSeriesTooltip);
/* ---------- or, if it's for a chart tooltip ----------- */
function getOrientation() {
const axisTooltipX = dateAxis.tooltip.properties.x;
const chartMidPoint = chart.pixelWidth / 2;
const orientation = axisTooltipX > chartMidPoint ? "right" : "left";
return { axisTooltipX, orientation };
}
function showChartTooltip() {
const { tooltipDate } = dateAxis;
if (tooltipDate) {
// find data based on tooltipDate
const dataSet = chart.data.find(item => item.date === tooltipDate);
const { axisTooltipX, orientation } = getOrientation();
// assemble custom tooltip content in here, e.g.
chart.tooltipHTML = `<table>
<tr>
<td style="padding-right:10px;">${dataSet.id}</td>
<td style="text-align:right;">${dataSet.name}</td>
</tr>
<table>`;
chart.tooltip.animate([{ property: "x", to: axisTooltipX }], 100);
chart.tooltip.pointerOrientation = orientation;
}
}
chart.cursor.events.on("cursorpositionchanged", showChartTooltip);
I have not tried this approach yet with am5 but I would think it could probably work similarly. Of course, substituting the tooltipHTML
with the container approach mentioned above. If it's an XY chart, I think there should always be a way to get the position to map that to the corresponding data.
from amcharts5.
Solution based on prev container proposition:
const ttip = am5.Tooltip.new(root, {});
let currTooltipYear = null;
ttip.events.on("dataitemchanged", (n) => {
const data: any = ttip.dataItem.dataContext;
if (data.year !== currTooltipYear) {
ttip.children.clear();
const container = am5.Container.new(root, {
layout: am5.GridLayout.new(root, {
maxColumns: 2,
}),
width: 200,
});
// .... add chrildren to container with current data
ttip.children.push(container);
}
});
from amcharts5.
@JohnnyKmLi Let's keep this feature request clean. Please post separate issue.
from amcharts5.
Related Issues (20)
- adding connect : false results in the grouped series disappearing upon zooming. HOT 2
- States not setting up for each column in columnSeries HOT 1
- Facing issues with series.data.setAll() HOT 4
- Add current volume label to stock chart HOT 2
- Hierarchy charts - Tree Map - Data processor will work for one level ? HOT 3
- Data point possible accessibilities HOT 6
- Flickering effect occurring while disposing series to add new series with new data HOT 2
- Adding button with tooltip of valueAxis stock chart HOT 4
- Increase the sensitivity of the panining AxisRendererY HOT 3
- Disable PanY auto resetting for valueAxis amcharts Stock HOT 2
- Can we add custom drawing tool in the same way as we add custom indicators HOT 3
- Chart specific possible accessibilities HOT 8
- Column series getting clustered after adding more data HOT 8
- Legend label oversizedBehaviour without maxWidth HOT 4
- Can't add tooltip on hover on X axis item HOT 3
- minBulletDistance not working for a Gantt chart with CategoryAxis and DateAxis HOT 4
- Violin Chart Possible with amcharts5? HOT 2
- How to fire the drawing tool on the button active. HOT 10
- Enhancement : Drawing should get extend on lazy loading. HOT 6
- The word cloud graphic presents the blurred emojis in the Firefox browser HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amcharts5.