My site generates a lap chart for a bunch of riders, like so:
The problem is, on some devices the legends don't line up. E.g. if it's perfect in one browser, it stretches a bit too far in others, presumably due to font rendering differences. (I have it set to Roboto).
The API documents the possibility of using lineHeight css property in itemStyle, but it doesn't seem to work for me. I've set it to 50 and '50px', both in "legend" and "legend: itemStyle". No good.
(http://api.highcharts.com/highcharts#legend.lineHeight)
As such the best I can do is fiddle with the fontsize and the itemMarginBottom, which leads me to the problem I have.
Anyone have a solution?
I'm using the latest version of highcharts by the way.
Related
I have an app that uses Highcharts and several other components and the app is used, among many other things, to produce bar charts. Users can select time ranges against which they view data. One of the templates that we've put together does a side by side comparison and when the user chooses a short'ish timespan, the chart is cut off at the outside edges. I've looked at overflow and some other CSS solutions but this one just continues to perplex. When the app is looking a longer time ranges, it has no issue squeezing & adjusting to accommodate. But when the app tries to render shorter periods - like quarter by quarter - the result is that the outermost bars are cut off.
I included a screenshot. Does this look like anything that anybody has seen. And if so... any ideas on how to tackle it? The page template is liquid/responsive/elastic and should be able to accommodate this. Going further, Highcharts seems to do well in other areas where the width is elastic so I am wondering why this thing doesn't seem to be able to detect its own width and display the bars without cutting off.
If anyone has any ideas about this, I'd love to hear about it.
Thank you in advance!
I am trying to write a graphing function for .Net MVC to produce a pure HTML bar graph. I want to set the width of each bar to be a percentage of the parent div so that the chart scales correctly if the user re-sizes the browser.
However, I will normally have around 300 bars in the graph so the width of each bar ends up being computed at 1.54px (for example). This does horrible things to how the browser renders the bars (in IE and chrome at least).
This uneven rendering of the bars goes away if I set a fixed width to each bar with an integer value of pixels (i.e. 2px, not 1.6px). However if I do this the the chart won't scale with the browser.
Is there a "best practice" solution to this problem? Can I get the bars to scale with the browser without allowing non-integer values for the width of the bars?
EDIT: One other point to note, my boss has a pathological mistrust of 3rd party libraries, hence writing the function from scratch.
Have you looked at http://d3js.org/ this is a library for all sorts of graphs. It takes care of calculating the spaces. Has nice effects and is easy to use with binding in javascript.
As silverfighter pointed out, there are a lot of graphing libraries for a variety of graphs. These solutions are again divided into Canvas based and HTML based. The canvas based libraries may not work on certain old browsers. Some solutions such as google charts are a little better at handling old browsers.
So, depending on the support you want to provide for old browsers, you can choose between the libraries. A simple google search gave me the below link
http://techslides.com/50-javascript-charting-and-graphics-libraries
Canvas based - d3js.org, visjs.org
https://developers.google.com/chart/
If you still fixated on writing your own code to positioning a div relatively, the "auto" value for the "margin" css tag should help.
[Edit] - Sorry misread the question and thought the problem was with the height. The width can be set after the graph data is available using javascript. Assign a class to each bar, calculate available width and then divide by your total count. So, you get the width dynamically based on the page size.
I have a Rails webapp currently deployed at http://orbit-analytics.herokuapp.com/user/2990 which utilizes D3.JS and JavaScript to generate an SVG graph of the specific user's uploads with relation to time. The graph renders correctly in Chrome, Safari, and Firefox but highlighting the tick labels or scrolling can cause parts of the graph to disappear in Safari (but not Chrome or Firefox). This isn't a problem on another page with a similar graph, available at http://orbit-analytics.herokuapp.com/video/10.
Is this a Safari issue or some problem with my code? Thanks.
Your problem is fixed when you remove the stroke property from line in your CSS. As you mentioned, you can directly apply this style with the style function.
As far as adding minor lines goes, look into using axis.tickSubdivide([n]). If not you will probably find your answer in the Axis component.
I recently posted an issue regarding unpredictable hover on points in Highcharts, but the question didn't get much traction. Probably because it's difficult to explain.
I now posted a video here
http://www.youtube.com/watch?v=LovfLWpVVtc
showing this behavior.
It happens both on Chrome and Firefox (the video was done on FF on a high spec MacPro).
The video was done using this JsFiddle from the docs.
http://jsfiddle.net/HnwbQ/1/
As you can see, when approaching the first or last point from outside of the chart, no tootlip is shown. However if the cursor enters the chart and then approaches the first/last point, then a tooltip is rendered. This is erratic, and sometimes a tooltip is rendered when coming from the outside, sometimes it's not.
Any ideas what's the issue?
MORE INFO
This seems to occur mostly when using xAxis: {type: 'datetime'},
I am using Highcharts v2.1.9.
There is no need in 'hack' - just use the latest version of Highcharts http://jsfiddle.net/WdVtE/
OK I think I found a hackish solution to this.
It seems to me this is a bug related to the fact that
xAxis: {type: 'datetime'}
pushes the first and last datapoint to the limits of the plot area (this doesn't happen when using category).
So the way around this problem is to create some padding using
x-axis: {
minPadding:0.02,
maxPadding:0.02
}
Then hover behaves correctly, similar to when x-axis is category.
Note that minPadding and maxPadding have to be > 0.02. If you use 0.01 you'll have a buggy hover.
my site looks fine untill people start zooming in and out and after hours of work on it and messing with its css I am clueless on how to fix this zoom problem. Should I somehow fix the zoom to a certain level? if so, how can I do it? I tried fixing this zoom issue but putting everything into a table but that isnt really working so I dont know what to do..help..
This is how it looks on safari, its fixed if i adjust my zoom level but initially looks like this:
Then on firefox and chrome looks perfect:
The zoom level of the browser is something that is strictly the domain of the user - it is bad practice to interfere with user-level choices such as page zoom, and usually you are technically unable to do so anyway. A user will zoom a webpage because they wanted to enlarge it, the reasons are their own and an individual site should not (and can not) interfere with that choice.
Instead of fighting the user, you should seek to design your site in such a way so as to make the content the most important thing. You should craft your design in such a way so that when a user zooms (or makes other changes like disabling CSS or Javascript), the content (presumably the point of having a website at all) is the focus.
Using percentages for your layout, using em for font sizes, and other such techniques will increase the accessibility of your site. See articles like http://24ways.org/2007/css-for-accessibility or http://www.w3.org/TR/WCAG10-CSS-TECHS/ for information on using accessible web design techniques.
EDIT
The screenshots demonstrate one of the many pitfalls in trying to prevent accessibility support - different browsers implement zoom in different ways. Some only increase the font size, some enlarge the images, it is not consistent. The trick is to make it not matter, not to prevent it from happening.
Here's an IE fix
http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm
.css
{
zoom: 1
}
Short answer: No, You cannot modify the end user's browser setting for zoom level.
Maybe you should look into CSS patterns for designing sites that zoom nicely. For example I beleive em's zoom better than point based font sizes. etc
take a look at articles like these: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
Also, if you post specific problems we may be able to help solve them on a one off basis