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