LucianoHDZ
Posts: 3
Joined: Thu Apr 28, 2022 11:59 pm

Formatter doesn't work with Higchart.Optios

Hello, I trying use Formatter with Higchart.Options but when call at this.value not exist in yAxis, any answer for this , this is my code and this is the demo
that I am using, but doesnt work this part for the foratter in this.value

//THIS DOESN'T WORK FOR THE "this.value"
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
},


//THIS IS MY CODE

import { chart, SeriesOptionsType } from 'highcharts';
import Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

/*Tipo de Grafica
Tipo grafica: Grafica por grupo de edades
Entidad Fecerativa: Nacional
Municipio : Todos
Sexo: Todos
Periodo: 2020

20-24| |======|======|
Grupos 15-19| |=====|=====|
de Edad 10-14| |===|===|
05-09| |==|==|
00-04|________|________
-200 0 200
Y-Valor(rotation:-45)
*/

Highcharts.setOptions({
lang: {
//loading: 'Cargando...',
//exportButtonTitle: "Exportar",
//printButtonTitle: "Importar",
viewFullscreen: "Ver en pantalla completa",
rangeSelectorFrom: "Desde",
rangeSelectorTo: "Hasta",
rangeSelectorZoom: "Período",
downloadPNG: 'Descargar imagen PNG',
downloadJPEG: 'Descargar imagen JPEG',
downloadPDF: 'Descargar imagen PDF',
downloadSVG: 'Descargar imagen SVG',
printChart: 'Imprimir',
resetZoom: 'Reiniciar zoom',
resetZoomTitle: 'Reiniciar zoom',
thousandsSep: ",",
//decimalPoint: '.'
}
});

export class BaseBarChart4Options implements Highcharts.Options {
credits = {
enabled: false,
};


chart = {
//inverted: true ,// Columnas aparecen horizontales
//type: 'column',
type: 'bar',
scrollablePlotArea: {
minWidth: 300,
},
};

title = {
text: 'Title',
};

subtitle = {
text: 'Subtitle',
};

tooltip = {
pointFormat: "Valor: {point.y:,.2f}"
};

yAxis = {
scrollbar: {
enabled: true,
},
title: {
//text: 'yAxis Title',
text: 'Valor',
},
labels: {
rotation: -45,
step: 1,
//format: '{value:.0f}'
},
allowDecimals: true,
};

xAxis = {
scrollbar: {
enabled: true,
},
title: {
//text: 'xAxis Title',
text: 'Grupos de Edad',
},
labels: {
//rotation: -45,
step: 1,
},
allowDecimals: true,
categories: ['Categoría 1', 'Categoría 2', 'Categoría 3', 'Categoría 4'],
reversed: false,
};

series: Array<SeriesOptionsType> = [
{
type: 'column',
name: 'Serie Name',
showInLegend: true,
colorByPoint: false,
data: [
{ y: 7.39 },
{ y: 9.55, color: '#e01a16' },
{ y: 6.34 },
{ y: 12.2 },
],
},
];

}

Help me :c
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Formatter doesn't work with Higchart.Optios

Hi LucianoHDZ,

Welcome to our forum and thanks for contacting us with your question!

Here is a demo example with Highcharts.setOptions and formatter callback. Everything seems to work correctly:
https://jsfiddle.net/BlackLabel/2tdL4jao/

Please recreate the issue in the demo.

Regards!
Mateusz Bernacik
Highcharts Developer
LucianoHDZ
Posts: 3
Joined: Thu Apr 28, 2022 11:59 pm

Re: Formatter doesn't work with Higchart.Optios

mateusz.b wrote: Mon May 02, 2022 9:57 am Hi LucianoHDZ,

Welcome to our forum and thanks for contacting us with your question!

Here is a demo example with Highcharts.setOptions and formatter callback. Everything seems to work correctly:
https://jsfiddle.net/BlackLabel/2tdL4jao/

Please recreate the issue in the demo.

Regards!

Ok thanks for the demo but not work, the need one building, and I think because the series inte code series: Array<SeriesOptionsType> = [


Code: Select all

export class BaseBarChart4Options implements Highcharts.Options {
  credits = {
    enabled: false,
  };
  
 
  chart = {
    //inverted: true ,// Columnas aparecen horizontales
    //type: 'column',
    type: 'bar',
    scrollablePlotArea: {
      minWidth: 300,
    },
  };

  title = {
    text: 'Title',
  };

  subtitle = {
    text: 'Subtitle',
  };

  tooltip = {
    pointFormat: "Valor: {point.y:,.2f}"
};

  yAxis = {
    scrollbar: {
      enabled: true,
    },
    title: {
      //text: 'yAxis Title',
      text: 'Valor',
    },
    labels: {
      
      rotation: -45,
      step: 1,
      enabled: false
    
      //format: '{value:.0f}'
     
     
    },
    allowDecimals: true,
  };

  xAxis = {
    scrollbar: {
      enabled: true,
    },
    title: {
      //text: 'xAxis Title',
      text: 'Grupos de Edad',
    },
    labels: {
      //rotation: -45,
      step: 1,
    },
    allowDecimals: true,
    categories: ['Categoría 1', 'Categoría 2', 'Categoría 3', 'Categoría 4'],
    reversed: false,
  };
 
  series: Array<SeriesOptionsType> = [
    {
      type: 'column',
      name: 'Serie Name',
      showInLegend: true,
      colorByPoint: false,
      data: [
        { y: 7.39 },
        { y: 9.55, color: '#e01a16' },
        { y: 6.34 },
        { y: 12.2 },
      ],
    },
  ];


the series is correctly ? and the class for the options? Help me please :?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Formatter doesn't work with Higchart.Optios

Hi LucianoHDZ,

Series declaration and its properties seems to be correct. Please let me know what Highcharts version do you use and tell me if you use any framework / library like angular / react. The code that you shared seems to be incomplete and slightly out of context without chart constructor, so it is hard to tell for me what exactly is not working.

Regards!
Mateusz Bernacik
Highcharts Developer
LucianoHDZ
Posts: 3
Joined: Thu Apr 28, 2022 11:59 pm

Re: Formatter doesn't work with Higchart.Optios

mateusz.b wrote: Wed May 04, 2022 3:08 pm Hi LucianoHDZ,

Series declaration and its properties seems to be correct. Please let me know what Highcharts version do you use and tell me if you use any framework / library like angular / react. The code that you shared seems to be incomplete and slightly out of context without chart constructor, so it is hard to tell for me what exactly is not working.

Regards!
Hi,

Ok rigth the version of the Higcharts is "highcharts": "^9.3.1" and the Framework what I use is React with Typescript , is the version correct or do I have update, If so, with what command do I do it?

the code complet is the next , the series are sent from an API


Code: Select all

 import { SeriesOptionsType } from 'highcharts';
import Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);
  

Highcharts.setOptions({
  lang: {
          //loading: 'Cargando...',
          //exportButtonTitle: "Exportar",
          //printButtonTitle: "Importar",
          viewFullscreen: "Ver en pantalla completa",
          rangeSelectorFrom: "Desde",
          rangeSelectorTo: "Hasta",
          rangeSelectorZoom: "Período",
          downloadPNG: 'Descargar imagen PNG',
          downloadJPEG: 'Descargar imagen JPEG',
          downloadPDF: 'Descargar imagen PDF',
          downloadSVG: 'Descargar imagen SVG',
          printChart: 'Imprimir',
          resetZoom: 'Reiniciar zoom',
          resetZoomTitle: 'Reiniciar zoom',
          thousandsSep: ",",          
          //decimalPoint: '.'
      }        
});

export class BaseBarChart4Options implements Highcharts.Options {
  credits = {
    enabled: false,
  };
  
  chart = {
    //inverted: true ,// Columnas aparecen horizontales
    //type: 'column',
    type: 'bar',
    scrollablePlotArea: {
      minWidth: 300,
    },

  };

  title = {
    text: 'Title',
  };

  subtitle = {
    text: 'Subtitle',
  };

  /*tooltip = {
    pointFormat: "Valor: {point.y:,.2f}"
};*/


  yAxis = {
    scrollbar: {
      enabled: true,
    },
    title: {
      //text: 'yAxis Title',
      text: 'Valor',
    },
    labels: {
      rotation: -45,
      step: 1,
      format: '{value:.0f}',
    },
    allowDecimals: true,
    min:-10,
    max:10,
  };

  xAxis = {
    scrollbar: {
      enabled: true,
    },
    title: {
      //text: 'xAxis Title',
      text: 'Grupos de Edad',
    },
    labels: {
      //rotation: -45,
      step: 1,
    },
    allowDecimals: true,
    categories: ['Categoría 1', 'Categoría 2', 'Categoría 3', 'Categoría 4'],
    reversed: false,
    
  };
  
  legend= {
    enabled: true
    
  };
 
  series: Array<SeriesOptionsType> = [
    {
      type: 'column',
      name: 'Serie Name',
      //showInLegend: true,
      //colorByPoint: true,
      data: [
        { y: 7.39 },
        { y: 9.55, color: '#e01a16' },
        { y: 6.34 },
        { y: 12.2 },
      ],
    },
  ];
  
}
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Formatter doesn't work with Higchart.Optios

Hi LucianoHDZ,

Sorry for longer response time.

I created a demo with highcharts, react and typescript. Highcharts version is set to 9.3.1. Same as before, everything seems to work correctly. Please recreate the issue in the demo:
https://stackblitz.com/edit/react-ts-yv ... ckage.json

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”