HighCharts tooltip not works

Back to Forums

Paulo Torres

Champion

Solved

HighCharts tooltip not works

Question

Charts

OutSystems UI Patterns

Hi everybody,

I have a problem with tooltip in highcharts. I see and tested in HighCharts Demo and works but in Outsystems not works. I have the follow code, anyone helps me, please?

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"
title: {
    text: 'TOP 10 - Unidades de Produtos',
style: {
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'}
},

colors: ['#2B908F', '#90EE7E', '#F45B5B', '#DB843D', '#AAEEEE', '#FF0066', '#EEAAEE', '#55BF3B', '#DF5353', '#7798BF'],

   tooltip: {
      enabled: true,
      useHTML: true,

      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      }
   },

Regards, Paulo Torres

11 Mar 2018

Miguel Amado

Staff

Solution

Paulo Torres wrote:

Hi everybody,

I have a problem with tooltip in highcharts. I see and tested in HighCharts Demo and works but in Outsystems not works. I have the follow code, anyone helps me, please?

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"
title: {
    text: 'TOP 10 - Unidades de Produtos',
style: {
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'}
},

colors: ['#2B908F', '#90EE7E', '#F45B5B', '#DB843D', '#AAEEEE', '#FF0066', '#EEAAEE', '#55BF3B', '#DF5353', '#7798BF'],

   tooltip: {
      enabled: true,
      useHTML: true,

      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      }
   },

Regards, Paulo Torres

Hello Paulo,

I did some digging and it seems that the default formatter attribute is overriding what you define in the tooltip attribute.

As a workaround try to force the formatter to be a null function. Something like this :

SyntaxEditor Code Snippet

   tooltip: {
      enabled: true,
      useHTML: true,
      
      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      },
      formatter:null
   },

I believe that this forces the default formatter function to be null and renders what you have defined in the tooltip.

I didn't found any prettier way to do it.

Cheers,

Miguel Amado

13 Mar 2018

2 replies

Last reply 02 Jun 2020

Show thread

Hide thread

Paulo Torres

Champion

Miguel Amado wrote:

Paulo Torres wrote:

Hi everybody,

I have a problem with tooltip in highcharts. I see and tested in HighCharts Demo and works but in Outsystems not works. I have the follow code, anyone helps me, please?

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"
title: {
    text: 'TOP 10 - Unidades de Produtos',
style: {
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'}
},

colors: ['#2B908F', '#90EE7E', '#F45B5B', '#DB843D', '#AAEEEE', '#FF0066', '#EEAAEE', '#55BF3B', '#DF5353', '#7798BF'],

   tooltip: {
      enabled: true,
      useHTML: true,

      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      }
   },

Regards, Paulo Torres

Hello Paulo,

I did some digging and it seems that the default formatter attribute is overriding what you define in the tooltip attribute.

As a workaround try to force the formatter to be a null function. Something like this :

SyntaxEditor Code Snippet

   tooltip: {
      enabled: true,
      useHTML: true,
      
      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      },
      formatter:null
   },

I believe that this forces the default formatter function to be null and renders what you have defined in the tooltip.

I didn't found any prettier way to do it.

Cheers,

Miguel Amado

Hi Miguel,

You are a biggest one! Works perfectly.

Regards, Paulo Torres

13 Mar 2018

Frank Speeckaert

Miguel Amado wrote:

Paulo Torres wrote:

Hi everybody,

I have a problem with tooltip in highcharts. I see and tested in HighCharts Demo and works but in Outsystems not works. I have the follow code, anyone helps me, please?

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:
"
title: {
    text: 'TOP 10 - Unidades de Produtos',
style: {
    color: 'black',
    fontSize: '16px',
    fontWeight: 'bold'}
},

colors: ['#2B908F', '#90EE7E', '#F45B5B', '#DB843D', '#AAEEEE', '#FF0066', '#EEAAEE', '#55BF3B', '#DF5353', '#7798BF'],

   tooltip: {
      enabled: true,
      useHTML: true,

      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      }
   },

Regards, Paulo Torres

Hello Paulo,

I did some digging and it seems that the default formatter attribute is overriding what you define in the tooltip attribute.

As a workaround try to force the formatter to be a null function. Something like this :

SyntaxEditor Code Snippet

   tooltip: {
      enabled: true,
      useHTML: true,
      
      pointFormat: 'Population in 2017',

      backgroundColor: 'rgba(0, 0, 0, 0.85)',
      style: {
         color: '#F0F0F0'
      },
      formatter:null
   },

I believe that this forces the default formatter function to be null and renders what you have defined in the tooltip.

I didn't found any prettier way to do it.

Cheers,

Miguel Amado

I do not want to revive an old topic, but just want to say thanks to Miguel! This saved me hours if not days of work! Cheers Miguel!

02 Jun 2020

Omar Abd elkefi

Hello, to follow up,

i tried "formatter:null" solution and i guess it does not work anymore,

the solution which can be used now is "formatter: undefined"

05 Apr 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines