I am able to access the point object in the js fiddle link below.
https://jsfiddle.net/r43tL6j1/2/
However when I am implementing in my local environment the following code isn't working.
- tooltip_config.png (22.39 KiB) Viewed 786 times
Code: Select all
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import HC_Data from 'highcharts/modules/export-data';
import Accessbility from 'highcharts/modules/accessibility';
require('highcharts-grouped-categories')(Highcharts);
import more from 'highcharts/highcharts-more';
more(Highcharts); // init highcharts-more
HC_exporting(Highcharts);
HC_Data(Highcharts);
Accessbility(Highcharts);
Highcharts.AST.allowedAttributes.push('onclick');
Highcharts.AST.allowedAttributes.push('src');
Highcharts.AST.allowedReferences.push('');
Highcharts.AST.allowedAttributes.push('data-value');
Highcharts.AST.allowedReferences.push('tel:');
Highcharts.AST.allowedTags.push('blink');
Highcharts.AST.bypassHTMLFiltering = true;
@Component({
selector: 'app-stack-column',
templateUrl: './stack-column.component.html',
styleUrls: ['./stack-column.component.scss'],
})
export class StackColumnComponent implements OnInit {
@Input() highChartsData = [
{
name: 'Asian',
pointPadding: 0.01,
pointWidth: 20,
opacity: 0.5,
data: [
{ x: 5, low: 18.4, high: 75.40, low2: 22.10,high2: 66.6,med: 43.2, grey:63.2, color: '#67a6d9' ,name: 'Asian1',},
{ x: 6, low: 26.3, high: 66.4,low2: 53.6,high2: 63.7,med: 59.4, grey:63.2,color: '#f4ae61' ,name: 'Asian2', },
{ x: 7, low: 17.2, high: 81.9,low2: 21.4,high2: 72.8,med: 60.3,grey:63.2, color: '#c79eb9' ,name: 'Asian3', },
{ x: 8, low: 17, high: 31.8,low2: 21.4,high2: 28.7,med: 25.4,grey:63.2, color: '#d35160' ,name: 'Asian4',}
],
}
];
Highcharts: typeof Highcharts = Highcharts;
isHighcharts = typeof Highcharts === 'object';
updateFlag = false;
chartConstructor = 'chart';
@ViewChild('columnChart', { static: false }) columnChart: any;
chartOptions: any = {};
constructor() {}
ngOnInit() {
this.updateChartOptions();
}
updateChartOptions(){
this.chartOptions = {
chart: {
type: 'columnrange',
width: '400',
events: {
load: (event: any) => {
this.loadChart(event.target);
},
},
},
title: {
text: 'SC',
style: {
display: 'none',
},
},
exporting: {
enabled: false
},
xAxis: {
min: 1,
max: 12,
labels: {
enabled: false,
},
tickLength: 0,
lineColor:'#D1D1D1',
lineWidth: 1
},
yAxis: {
title: {
text: '',
},
min: 0,
max: 100,
tickLength: 0,
labels: {
format: '{value}%',
},
gridLineColor: '#ffffff',
lineColor:'#D1D1D1',
lineWidth: 1
},
credits: false,
tooltip: {
// crosshairs: [true, true],
valueSuffix: '%',
useHTML: true,
formatter: () => {
const point:any = this;
console.log('this: ', point);
console.log('series: ', point.series);
// return `Point (${point.x}, ${point.y}) has color ${point.color}`;
return`<span>
<button type="button" onclick="showMoreDetails()">More Details</button>
</span>`
},
style: {
pointerEvents: 'auto'
},
},
plotOptions: {
columnrange: {},
},
legend: {
enabled: true,
},
series: [
{
// name: 'Asian',
name: this.highChartsData[0].name,
pointPadding: 0.01,
pointWidth: 20,
opacity: 0.5,
data: this.highChartsData[0].data
}
],
};
}
showMoreDetails() {
console.log('test');
alert('test');
};
}
