Highcharts bar chart rendering issue - bars getting rendered under each other - javascript

I'm seeing a strange issue with a Highcharts bar chart. I am trying to render just under 10k items, and I have my plot options series turboThreshold set to 50k.
The issue is happening whether I structure my series as an array of objects
series: [
{
name: "string",
y: number
}
]
or as an array of arrays
series: [
[
"string",
number
]
]
What's happening is that, up to 4004 items, the chart renders fine. With 4005 items, the top bar is moved down one and is rendered under the second bar. With 4006, the top two are rendered under the third, etc. The x-axis labels remain fine, it's just the bars themselves that move.
Here is a screen shot with 4007 (4004 + 3) items. As you can see, the top three bars are under the fourth.
With the full 10k items, you have to scroll most of the way down (~6000 bars) to see the "first" bar.
I have a calculation to determine the height of the chart based on the number of items, to keep the bar size roughly the same, and that seems to be working fine. Inspecting the containing div shows that it is indeed the height set by the calculation, and the chart renders all of the x-axis labels correctly (even if I let through the full 10k items, the last one is right there at the bottom of the chart).
Any ideas as to why this might be happening? At 4004 items the chart height is 100100 px, is there some kind of limit or threshold within SVG that might be causing the issue?
(Highcharts 4.1.9, jQuery 1.11.3 for backwards compatability.)
Here is a fiddle showing the behavior. Apparently it is related to the fact that I have my y-axis opposite (so the scale is on top) and the y-axis and chart titles set to display: none.
Still would appreciate any ideas on how to deal with this. I would rather not have to show a y-axis title or chart title, but even if I do show them, the behavior still happens.
I agree with what #Mark said in the comments, it seems to be a bug in Highcharts, but it does not have to do with the visibility of the chart title or y-axis title. I did a little more playing around in an updated fiddle, and found that the problem is related to the chart height. A chart height of 100050px renders fine, no matter how many items are in it. At 100075px the top bar looks slightly off, and at 100100px it is definitely wrong.
The reason the problem was occurring for me at around 4000 items is that I was setting the chart height like this:
$('#container').height(function(){
return Math.max(400, (25 * numItems));
});
4002 * 25 = 100050 and 4003 * 25 = 100075, which is why it seemed to start right around that threshold.

Related

Highcharts Gantt - data labels in top row are not respecting y offset positioning

I'm making a milestone comparison chart, and I'm putting the data labels above the milestone markers. The data labels are two rows of text.
I'm setting my own calculated chart.height in order to increase the row height so I can fit the data labels nicely within each row, and I'm using a combination of series.point.graphic.translate() and series.datalabels.y in order to position everything vertically within the row where I want it. I've got everything almost dialed in exactly how I want it.
However, it seems as though the data labels for the first row of data are not respecting the y offset I'm trying to set. In fact, it looks to me like instead of starting at the center of the row and offsetting the amount specified by series.datalabels.y, there's actually more offset being applied that is forcing the data labels to push up to the very top of the plot area.
In the screenshot, the red lines near most of the milestone markers/labels show what the offset should be: something very minimal, the label should be just barely above the point of the milestone marker. But the red boxes in the top row show how that offset is too much, the labels are being pushed too high (to where the top of the label is right against the edge of the plot area):
What's going on there, and how can I fix it?
Reference pen.
Well, I figured it out...
If I just don't apply the y offset to the datalabels for the first row, they seem to line up much better:
// yValue is essentially the row here, so 0 is the first row
series: {
dataLabels: {
y: yValue === 0 ? 0 : -31
}
}
Reference pen.

ChartJS Bar chart painting second bar to the right

I have a barchart using the latest version of charts.js. Now I need to show the bars and at the right, a bar that actually has nothing to do with the rest. (the first bars are thre monthly values, the last bar is the forecast for this month)
See here to better understand what I mean. https://jsbin.com/diqetaxeqi/edit?js,output
The forecast bar has it's own y axis on the right. I've struggled setting the bar to the right and have solved this by creating a new dataset filling the values with 0 to make sure it is the last bar that is drawn. The problem with this is that the labels are not centered anymore as the bars with 0 value is still painted.
How can I solve this better?
Thanks
Your code requires 2 different datasets ? Or can they be all 4 like:
data: [18739460, 33056135, 36562034, 3234234] ?
Ok. stacking the bars does the trick.
do
stacking:true
at xAxis

Alter first vertical grid line in nvd3

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

How to prevent tiny bars on charts in Highcharts

http://d.pr/i/U5bb/4n26fLZr
Here's an example of a chart of ours. Pretty unreadable, yea? Is there an easy, dynamic way avoid this? I've tried implementing a dynamic height, but the problem is I can never seem to find the sweet spot that accommodates a smaller number of bars, and a larger number of bars. I feel like this has to be a problem that others have encountered before. Any help would be appreciated!
I accomplish this by doing the following:
1) determine height of non-data elements on the chart (ie, explicitly set the top and bottom margins, and add them together to get a base_height for the chart
2) determine how much space I want each bar to take, including bar width, and padding between bars, and set as my height_multiplier (I usually end up going for 20-25 pixels, personally)
3) on pulling my data, determine how many bars will be needed, and set as my bar_count
4) calculate: chart_height = base_height + (bar_count * height_multiplier)
5) Pass that value to the html to set the height of the chart's containing element.
If your data will vary so much that the chart height in your example works some times, but then you have as many data points as you've posted there, there simply will not be a 'sweet spot' that will handle both extremes well.

Mis-aligned labels/slice text in my Google Pie Charts

I'm using Google Charts to show some data regarding opens and clicks from emails as Pie Charts. I've got the Pie Charts showing the right data, however I'm having issues with the label on the pie chart.
I'm not sure why, but it's mis-aligned - it's decided that the label should not be in the middle of the slice like usual (Left Picture).
Interestingly enough, even though most of the time I've seen it misaligned, I have noticed the text aligns itself correctly a few times for the top slice (mainly when I've just made changes to the code) but then it goes back to being at the edge of the slice after refreshing (Right Picture).
Does anyone know how to get the positioning correct for these or if there's something I'm doing that's knocking out the positioning?
function drawPieChartOpens()
{
var data = new google.visualization.arrayToDataTable([
['Opens','Count'],
['Opens',3988],
['Non Opens',21145]
]);
var options = {
'width':200,
'height':300,
'legend':'none',
colors: ['#00933B','#DDDDDD'],
slices: {0: {offset: 0.2}},
'chartArea':{width:'100%'}
};
var chart = new google.visualization.PieChart(document.getElementById('opens-2782714'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawPieChartOpens);
This issue was fixed in November 7, 2013, it shouldn't cause more issues.
From the bug report:
Steps to reproduce the problem:
Highlight any cell in the main table's left column in dev inspector (e.g. the one containing "100")
On page, highlighted box shows width 32, metrics in devtools shows width 32, and a separate "ruler" extension shows width 32
What is the expected behavior?
That element's offsetWidth also returns 32
What went wrong?
offsetWidth is dramatically under the actual value, with offsetWidth of 22 in this case. Off by arbitrary amounts in other cases (e.g. upper-right cell and the one beneath it differ by 1px).

Categories