We Keep Coding

Why would the label of the vertical axis only show after the button is clicked?

I am working on a website which needs to show something on the chart (highchart) upon clicking of a button.
The issue is: when the page is first loaded, the label on the vertical axis can not be seen, no matter how big I set the margin for the chart. However, after the button is clicked for the first time, the labels can be seen and remains so.
There was no such problem before I set "reversed", "opposite" for xAxis and "reversed" for yAxis as true.
What causes this phenomenon and how can I solve this?
See the JSFiddle for detail. (There are some logic mistakes in the code which is irrelevant for my question.)
I just discovered that when I first load the JSFiddle, the vertical axis of the graph shows up with label; but when I click on "Run" additionally, the graph is refreshed with a vertical axis without label. Maybe I can simulate certain process which takes place when a JSFiddle is loaded to make sure that the vertical axis of the graph shows up with labels. But I am not sure how to do that.
Browser: Google Chrome Version 69.0.3497.92 (Official Build) (64-bit) (up to date)
My OS: Windows 10
Code for the generation of the chart:
function createColumnHorizChart(argMinY = minYAxis, argMaxY = maxYAxis) {
var chart = new Highcharts.Chart({
chart: { //not to be changed lightly
renderTo: 'contr2',
type: 'bar',
width: 749,
marginTop: 5,
marginLeft: 1,
marginRight: 90,
marginBottom: 55
},
colors: [
'#0000ff'
],
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ['smaller than 100', '100 - 110', '110 - 120', '120 - 130', '130 - 140', '140 - 150', 'bigger than 150'],
gridLineWidth: 1,
startOnTick: true,
title: {
text: 'Money Unit (MU)'
},
opposite: true,
reversed: true
},
yAxis: {
reversed: true,
min: 0,
max: 15,
tickInterval: 5,
title: {
text: 'Frequency',
}
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX - 50,
y: point.plotY - 10
};
},
style: {
fontSize: "10px",
fontWeight: "unbold"
},
formatter: function() {
return Math.round(chartData[index - 2] * 100) / 100;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
},
series: {
borderColor: '#FFFFFF',
animation: false, //disable all the animations,
pointPadding: 0,
groupPadding: 0,
borderWidth: 1,
shadow: false
}
},
series: [{
enableMouseTracking: false,
data: Array(7).fill(0)
}]
});
return chart;
}

So, it's only possible to reproduce on Windows platform. Could you provide us also with minified demo where the problem occurs? I'm asking because in current demo there are a lot of lines which are unnecessary.
Additionally, until we find the source of the problem, you can workaround it by calling this.reflow() in chart.events.load event handler.
chart: {
events: {
load: function() {
this.reflow()
}
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

I'm not sure why but it works fine when you remove the marginLeft property or set it to 0.

highcharts datetime data not working on column type, but working on line

I want to create a stacked column chart using highcharts.js with datetime data
It works on line type, but not working on column. The result were flat 100%.
What i need is the chart will appear as stacked column. what do i missed?
I tried stacked: 'normal' on plotOptions, but still not working.
Please advise, thank you
My highcharts options:
var optionsProcessTime = {
global: {
useUTC: false
},
title: {
text: '',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [],
labels:{
formatter: function(){
return '#'+this.value;
}
}
},
yAxis: {
title: {
text: ''
},
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S',
second: '%H:%M:%S',
minute: '%H:%M:%S',
hour: '%H:%M:%S'
},
labels:{
format: '{value:%H:%M:%S}'
},
gridLineWidth: 0
},
tooltip: {
enabled: true,
type: 'datetime',
formatter: function(){
return Highcharts.dateFormat('%H:%M:%S',new Date(this.y))
}
},
legend: {
enabled : false
},
plotOptions: {
series: {
pointPadding: 0.05,
groupPadding: 0
},
column: {
stacking: 'normal'
},
line: {
marker: {
radius: 2,
fillColor: '#ad050b'
},
dashStyle: 'ShortDash',
lineWidth: 1,
}
},
series: []
}
My Json output:
[{
"name":"Checker",
"data":[86,87,91,92,93,94,99,100,101]},
{
"name":"Estimate",
"type":"column",
"data":[1517018400000,1517014800000,1517014800000,1517018400000,1517017200000,1517015700000,1517013900000,1517013900000,1517013900000]},
{
"name":"Process",
"type":"column",
"data":[1517018400000,1517013666000,1517014800000,1517016664000,1517015107000,1517014984000,1517013604000,1517013900000,1517013900000]
}]

I suggest to disable, for debugging only, your definition for yAxis.labels. You will see original labels and realize how it works :)
In short, stacking renders each value on top of the previous one, for example: 1517018400000 + 1517018400000 = 3034036800000 so it renders point in 2066 year. And since all columns starts from zero (0) the distance is quite big: 136 years. Take a look: http://jsfiddle.net/BlackLabel/L4Lgbvvm/45/
Why it works for a line chart then? Simply, line type doesn't start at zero as column does. You can achieve the same result (without stacking) for column too, by setting series.threshold to null: http://jsfiddle.net/BlackLabel/n1s4sqps/
What about stacking? I'm not sure how this should work.. it works the same way for columns and lines, compare stackings:
line: http://jsfiddle.net/BlackLabel/n1s4sqps/1/
column: http://jsfiddle.net/BlackLabel/n1s4sqps/2/
If you could explain how stacking should be rendered in your opinion, let me know, maybe we can find some solution for it. An image of such stacking would be great.

How to display x and y axis values of where the crosshair line intersects in series using Highcharts?

I have been working on a project that uses highchart to draw multiple line charts. With that, I have already achieved some configuration (eg. x-axis crosshair, fixed tooltip, zooming) for my chart in accordance to the business requirements. As such, one requirement is that when x-axis crosshair moves from left to right (or vice versa) within the plotted chart, the selected values on y-axis and dates and time on x-axis will be displayed in the fixed tooltip.
Example:
Series CDT158 has a value of 100.46 (as shown in Chart 1) on 27 Apr 2017 20:49:48 pm. When I move the x-axis crosshair to the right, it jumps directly to the next point which has a value of 103.47 (as shown in Chart 2) on 27 Apr 2017 20:50:38 pm.
Is it possible when the crosshair passes through the series (from one point to the next point), the y-axis values between 100.46 and 103.47 as well the datetime values on x-axis will be rendered in the fixed tooltip? I also want to display the CDEP158 y-axis values simultaneously in the fixed tooltip. How can I achieve this?
[Chart 1]
[Chart 2]
This is the Highchart initialization.
myChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
plotBorderWidth: 1
},
title: {
text: ''
},
legend: {
layout: 'horizontal',
align: 'left',
itemDistance: 10,
borderWidth: 0,
itemMarginTop: 0,
itemMarginBottom: 0,
padding: 20
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
dataLabels: {
enabled: false,
format: '{y}'
},
allowPointSelect: false
}
},
xAxis: {
type: 'datetime',
labels: {
rotation: -65,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
},
crosshair: true,
dateTimeLabelFormats: {
second: '%d %b %Y <br/> %H:%M:%S %P',
}
},
yAxis: {
gridLineColor: '#DDDDDD',
gridLineWidth: 0.5
},
tooltip: {
positioner: function () {
return {
x: this.chart.plotLeft,
y: this.chart.plotTop
}
},
useHTML: true,
formatter: function (tooltip) {
var formattedDate = Highcharts.dateFormat('%d %b %Y <br/> %H:%M:%S %P', new Date(this.x));
const header = `<span style="font-size: 8px">${formattedDate}</span><br/>`;
let body = this.points.reduce((body, p) => body + `<small><font color="${p.series.color}"><strong>${p.series.name}</strong></font>: <strong>${p.y}</strong></small><br/>`, '');
return header + body;
},
shared: true,
valueDecimals: 2,
//followPointer: true,
shadow: false,
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [{
name: 'CDT158',
data: [
[1493326164493, 87.54],
[1493326174018, 97.09],
[1493326188245, 100.46],
[1493326238635, 103.47],
[1493326284930, 106.12]
]
},{
name: 'CDEP158',
data: [
[1493326165993, 94.34],
[1493326174772, 88.87],
[1493326188895, 98.25],
[1493326272411, 96.48],
[1493326299520, 100.13]
]
}]
});
I'm pretty sure that this can be achieved through Highcharts but, my limited knowledge and experience in Highchart stops me to figure it out.
I have posted a sample fiddle that illustrate the above scenario.
Any help is greatly appreciated.

Add legend name to JQPlot tooltip and format date correctly in tool tip

I want to add the plot's legend name to the mouse over tool tip for a series line. I've used one of the solutions to this jqplot tooltip on bar chart.
Specifically I used the following function:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
However, the problem I have is that it does not use the legend name 'My legend name' instead it will use the JQPlot default of 'Series 1' or 'Series 5' (number depending on series position).
The second problem is that I lose my date formatting once I start using the above function. So I get a number e.g. something like 123672378328 instead of it being converted to the format I specified in tickOptions.
My code to generate the chart is below:
var plot;
function buildChart(chartDivId, graphData, chartTitle, graphSeriesNames, labelNames) {
var id = "#" + chartDivId;
$(id).empty();
var seriesLine = { lineWidth:1, markerOptions: { show:false } };
plot = $.jqplot(chartDivId, graphData,
{
title: chartTitle,
axes:
{
xaxis:
{
label:'Date',
renderer:$.jqplot.DateAxisRenderer,
tickOptions: { formatString:'%b %#d %H:%M' }
},
yaxis: { label: 'Parameter Values', tickOptions: { formatString:'%.2f' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions : { angle: 270, fontFamily: 'Arial, Verdana, Helvetica', fontSize: '8pt' }, autoscale: true },
},
seriesDefaults: {
markerOptions: {
show: true, style:'filledCircle', size: 4.5
}
},
highlighter:
{
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor //new code added to attempt to add legend name to mouse over tool tip
},
cursor:
{
show: true,
zoom: true,
showTooltip: false
},
legend:
{
labels: labelNames ,
show: true,
location: 's',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:
{
numberColumns: 10,
numberRows: 5,
seriesToggle: 900,
disableIEFading: false
},
marginTop: '100px',
marginBottom: '100px',
placement: 'outside'
}
}
);
}

FURTHER UPDATE:
After being a bit silly and digging down deep into the plot object of JQPlot I realised that the str variable passed into the tooltipContentEditor method has what I need. So the following is the solution:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label with x and y values value
return plot.legend.labels[seriesIndex] + ", " + str;
}
No help or advice provided so I thought I'd provide the solution I found after spending a few hours trying to fix.

Highcharts X-Axis New Values

I am using highcharts to draw a column chart as following:
var chart;
var count = 0;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Random Data'
},
xAxis: {
categories: [
'T1',
'T2'
],
startOnTick: true,
endOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Y-Axis'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Tip is: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'Population',
data: [34.4, 21.8],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
I added the following function in order to add new points to the chart
function addPoints(name,acc)
{
var series = chart.series[0];
series.addPoint(acc, false, true);
categories = chart.xAxis[0].categories;
categories.push(name+count);
count++;
chart.xAxis[0].setCategories(categories, false);
chart.redraw();
}
The problem is that everytime I add a new point, one column shifts out of the chart. I would like to keep all columns in the chart view, so when I add a new point the chart just zooms out.
Check it on JSFiddle
Thanks in Advance ....

addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
Add a point to the series after render time.
Parameters
options: Number|Array|Object
The point options. If options isa single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively, or inthe case of OHLC or candlestick, as [x, open, high, low, close]. If it is an object, advanced options as outlined under series.data are applied.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more thanone point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly calledafter the adding of points is finished.
shift: Boolean
Defaults to false. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.
animation: Mixed
Defaults to true. When true, the graph will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.
series.addPoint(acc, false, true);
/\ here's the problem, it should be false
Reference
http://api.highcharts.com/highstock#Series
Updated demo