Tooltip HTML about amcharts5 HOT 11 CLOSED

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 to Modal. Indicates if any interactivity on the underlying chart should be disabled when modal is open.
• A new setting html added to Container. Set it to a string with HTML to be used as container's content. Will work on any element inheriting from Container, e.g. Label. More info.
• A new setting labelHTML added to Tooltip. If set, will ne used as HTML content for the tooltip. More info.
• A new setting tooltipHTML added to Sprite. If set, will ne used as HTML content for the tooltip when element is hovered. More info.
• wheelZoomPositionX and wheelZoomPositionY added to XYChart. 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). In StockChart, 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 in am5.registry.entitiesById immediatelly, without waiting for the next frame.

Fixed

• RadialGradient's x and y settings were being ignored.
• Labels as bullets with oversizedBehavior set were not being displayed properly in some cases.
• DateAxis with startLocation = 0.5 and endLocation = 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 on Container to undefined to remove a previously set scrollbar was not working.

Full change log.

Download options.

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.