Hello highcharts enthusiasts!
Within my angular 4 project, I am attempting to exclude the display of days and months in the tooltip of my horizontal bar chart, showing only hours, minutes, and seconds. Does anyone have a solution for achieving this?
I have already attempted using the dateTimeLabelFormats property without any success.
Thank you in advance.
horizontalbar.ts:
constructor(public userService3: UserService3) {
const timeZoneOffset = new Date().getTimezoneOffset();
const Highcharts = require('highcharts');
Highcharts.setOptions({
global: {
timezoneOffset: timeZoneOffset
},
});
this.options = {
title : { text : '' },
chart: { type: 'area',
label: {
format: '{data: %B}'
}},
legend: { enabled: false },
credits: { enabled: false },
xAxis: { type: 'datetime',
// day: '%H',
startOnTick: false,
endOnTick: false,
minTickInterval: 24 * 3600 * 1000,
tickInterval: 36e5 * 2, // two hours
},
yAxis: { min: 0,
max: 100,
labels: {
enabled: true
},
title: {
text: null
},
},
plotOptions: {
series: {
color: '#648e59',
fillOpacity: 0.8,
fillColor: '#648e59',
pointInterval: 36e5 * 2 // two hours
}
},
series: [{
name: 'Taux de fonctionnement',
data: [],
}]
};
}
saveInstance(chartInstance) {
this.chart = chartInstance;
console.log(chartInstance);
}
public ngOnInit () {
this.dataSubscription = this.userService3.getData().subscribe((data)
=> {
this.options.series[0].data = data.data.operating_details;
console.log(data);
});
}
ngOnDestroy() {
if (this.dataSubscription){
this.dataSubscription.unsubscribe();
}
}
public hideDem2(): void {
this.hideMeup = !this.hideMeup;
this.hideMeup = !this.hideMeup;
this.hideItup = !this.hideItup;
if (this.hideItup) {
this.opened.emit(true);
} else {
this.closed.emit(false);
}
console.log(this.hideItup);
}
}
horizontalbar.html:
<chart [options]="options" (load)="saveInstance($event.context)">
<!-- <point (select)="onPointSelect($event)"></point> -->
</chart>