Hello,

I am trying to customize my chart such that a new tooltip appears and replaces the default "chart" popup that appears when you hover your mouse over any location in the chart. I edited the tooltip value in the "tooltip" section of the chart in our interface, however the label "chart" will not go away. Below is a photo of the issue 

See how the chart label still pops up even though i have a new tooltip defined. I believe this is not necessarily a tooltip that is appearing but am not sure what else to describe it as. I am familiar with editing the Highcharts JSON but no documentation is pointing me to what this label is called. The chart is not named "chart" so i dont believe it is a title label. Please advise!


Thanks,

Aaron Lynn

Hi Aaron,

That does look the "title" HTML property. Have you inspected the HTML to make sure the title property isn't set in the Chart object, or perhaps its container?

Solution

Ran into the same issue today, leaving a solution here since there wasn't one.
A title is generated by the component. You should be able to hide it by running this on the page:

document.getElementById(""highcharts-title-0"").remove();



Solution

Thank you for sharing this Silvia. Since this didn't have a solution, I'm going to go ahead and mark yours.

Hi.

I'm having the same problem. I actually want the chart tag to be gone. We have different charts and I noticed that every time a chart is reloaded, the id of the title tag seems to change, i.e. the number is increased by one. I consulted the highcharts documentation, but in all examples there, this tag is not present, so I'm suspecting it is something added in the Charts component of Outsystems.  

If I put Silvia Fernandes' solution in my OnReady of the page, it doesn't seem to work ,even with the correct id (which the first time are highcharts-title-1 and highcharts-title-2.

Do I put it elsewhere? If so, where?

Thought I'd share how I solved it.

I created an action with  the following javascript code.


setTimeout(function () {     titleElements = document.getElementsByTagName("title");     var elementsToRemove = [];     for (i = 0; i < titleElements.length; i++)     {         if (titleElements[i].id.startsWith("highcharts-title-")) {             elementsToRemove.push(titleElements[i].id);         }     }     for (i=0; i < elementsToRemove.length; i++) {         removeElement(elementsToRemove[i]);     } },200); function removeElement(elementId) {     // Removes an element from the document     var element = document.getElementById(elementId);     element.parentNode.removeChild(element); }

This action I call on both the onReady and the OnParametersChange of the block that contains the chart.

The timeout is necessary because I noticed that sometimes the chart title element didn't exist yet when the javascript was executed. I suspect this is because the chart is generated from javascript and this takes a little time (?).

Nice solution for dynamic titles created.
I used my solution on the screen as an expression to avoid trying to remove something that had not been rendered yet.