Highcharts lines not being drawn until browser is resized - javascript

I'm running into issues while testing Highcharts javascript charting library on one of my pages.
The issue i'm seeing is none of the data is visible until I slightly adjust the browsers size. Before resizing the tooltip does show the points.
First I thought the issue was due to jquery tabs, but that was not the case. I added the fix from Highcharts recommendations. http://www.highcharts.com/studies/jquery-ui-tabs.htm
I tried calling the charts setSize() method after initialization to see if manually resizing would cause the lines to be viable.
Any ideas?
Here how i'm initializing the chart.
$(div).ready(function(){
var chart = new Highcharts.Chart({
chart: {renderTo: 'some-div', type: 'line'},
title: {text: 'Title'},
xAxis: {type: 'text',title: {text: null}},
yAxis: {title: {text: 'Usage'}},
series: [{name:"Series 1", data : [1,2,3,4,5,6,6,7,2,7] }],
legend: {enabled: true}
});
})

Figured it out, well I didn't exactly find the problem but found a solution.
Upgrading from version v2.1.6 to the latest (v2.3.5) solved it.
Looking through the changelog there were a few references to bug fixes with Jquery 1.7/1.8 compatibility issues possibly the reason.

Related

Highstock displayed inconsistent

I'm working on a website where I'm using HighStock. The site was working fine and then I went away for a few hours. When I came back the chart would only display one datapoint.
Looking in the code with Chrome there were no errors and the datpoints had been printed by the PHP correctly.
By a coincidence, I noticed when resized the window it would suddenly display correctly. The only thing that's changing on resize in my CSS is the containers width (parent of the chart div).
I tried taking just a few of my datapoints into a HighStock example on JsFiddle, there I see no datapoints. https://jsfiddle.net/p9jqvw41/
Highcharts.stockChart('chart2', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: "[1574880360000,9],[1574876760000,10],[1574873160000,10]",
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
I also tried:
Using a proxy to visit my site, then It's displayed
correctly. (So I guess It has to be a local error?)
Using a different browser, displayed incorrectly.
Clearing Cache, still incorrectly displayed.
The only thing that would seem reasonable is that I've reached some limited number of calls to HighStock, but even that isn't consistent with some of the mentioned above.
I feel like I'm going nuts so any help would be very appreciated.
Solved: I had data in Descending order instead of Ascending, probably stopped working after update to Highchart.

Highcharts move xAxis down / off of chart

I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.

Highstock Column Chart dragging issue

I am trying to display a stock chart with columns. But there is a strange issue I am facing right now. Even when the chart is completely zoomed out I am able to drag it.
Fiddle link: http://jsfiddle.net/j8cqzm4x/1/
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: [10,20,30,40,50,60,70,80,90,100]
}]
});
Can this behavior be avoided somehow? I have went through the documentation and none of the properties I have tried worked.
Note: In the same chart making the series as 'line' does not reproduce the same behaviour.
I contacted the Highcharts support for this. It seems there was an issue in highcharts which they have already fixed on the master branch. Using the updated code resolves the issue.
http://jsfiddle.net/j8cqzm4x/4/
<script src="https://github.highcharts.com/stock/highstock.js"></script>
That is all that was needed, using master branch form github.

How to remove the white outline/border on Highcharts 3D on setData?

I am loading a column chart in 3D with Highcharts. On the inital load, the chart works perfectly. When I use setData() to change the series, the chart gains an odd white outline around its edges.
Before:
After:
I tried a few fixes such as using edgeColor and edgeWidth, although they made no difference.
Note: If I hover over one of the columns, the outline is instantly removed on that particular item until setData() occurs again.
How can I remove this white outline from the chart?
edgeWidth should be working, however there is a bug. Reported here - thanks.
As workaround, set edgeColor: 'rgba(0,0,0,0). Demo: jsfiddle.net/hdghyz2x
Bug is fixed already by commit (4c94d34) - will be included in next release (4.1.5). Available already in github version: http://github.highcharts.com/highcharts-3d.js
like this
$('#container').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Pie without borders'
},
series: [{
borderWidth: 0,
}]
});
});

Chart.js pie tooltip getting cut

I'm using Chart.js pie chart with tooltips which being cut for some reason.
Screenshot attached, didn't found any attribute/option to take care of it..
Is there anyway to take care of it?
Thanks!
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
This was determined to be a bug (evidently this bug hasn't yet been fixed)
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
I'm sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
- worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work
fine with bar charts.
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
Here is the code where I create my labels. The ratings is my actual data defined earlier:
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below.
Would be cool if you could choose which direction the tooltip appears compared to the mouse.
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }

Categories

Resources