I have a page with 3 different charts. I'd like to make them look good. Here's what it looks like:
http://i.stack.imgur.com/JY0Yl.jpg
As you can see there are several problems with the formatting here.
How do I make the Y-axis labels align? In this case, they're right aligned, and the graph starts at the right. So, since the labels are different, each of the graphs starts in a different column.
How do i remove the first and last or the X-axis labels? In this case, two things happen. In one side, the label overlaps the Y-label, and on the other side, the label wraps around and uses two lines.
How do I space the graphs? Each graph is its own DIV container, and it's jqPlot that decides to format it, and overrides my DIV formatting.
For point 3 you may be able to place each div inside an additional div that you will be able to format with CSS as you want. And if it work you may reuse your hide X axis solution with a better result.
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I have used Highchart for one of my calendar based requirement to show events throughout the year. I have made various changes to basic columnrange graph.
However from the presentation point of view, I have still two points to accomplish:
Will it be possible to wrap the headers (Jan, Feb, Mar ....) in boxes, to give a <thead> kind of effect.I tried passing the html from label.formatters as below.
return '<div style="height:10px">Jan</div>'
But this didn't seem to do the trick. Applying css border or anything to this div does nothing.
I want to remove the extra bit of gridlines that comes out from top and bottom of the graph. How can I do that??
I have my demo here. Have a look.
I was developing a solution for another question here on Stack Overflow (see Highcharts : selection) that has some simple slider elements (using input type="range") to change the categories shown in a column chart. Whenever the user changes the range in either slider element, the chart is redrawn using setExtremes().
I noticed that, in some instances, some of the x-axis labels disappeared, even when I moved the sliders back to their original positions. I've tinkered with a number of x-axis settings, including minPadding, startOnTick, and tickInterval, and none of them seem to solve "The Case of the Missing Labels."
The first screenshot below shows the chart when it's first loaded. All of the x-axis labels are present.
The second screenshot below shows the chart when I change one of the sliders. Some of the x-axis labels are now missing. It looks like they're being staggered.
Here's where the plot thickens: if I adjust the sliders to some other values, all of the labels come back:
Here's the fiddle I developed so you can see a live example of this behavior: https://jsfiddle.net/brightmatrix/uvat8u05/
I'm curious to know why this is happening, and what settings I could use to ensure that all x-axis labels are shown, regardless of what values the user chooses in the sliders.
Thank you very much!
Update: The responses from both Max Uppenkamp and Grzegorz Blachliński are valid and helpful solutions. What I also discovered by chance was that explicitly setting the slider values to integers using parseInt() solved this issue as well. It also helps in comparing both values to make sure a user doesn't choose an end date that is earlier than the start date.
This seems to be intended behavior of Highcharts, however inconsistent it may be.
According to this this should be fixed in current versions of Highcharts, but you might as well try this tick formatter solution.
Edit: If the above doesn't work for you, you might be able to solve the issue by rotating your labels:
http://www.highcharts.com/demo/column-rotated-labels/grid
By default, Highcharts fills horizontal legends with legend items from left to right, introducing a line break between items when the next item would overflow the legend's bounding box.
I would like to be able to control where such line breaks occur, so that (for example) instead of this:
I could visually group the "Target" and "Actual" items together, and then list the remaining series on subsequent lines like this:
Using useHTML and labelFormatter, I've tried a few different approaches involving <span>s, <div>s and styling to try to achieve this, but none of them have had any effect. The one approach I did manage to make work (from which I generated the second image above) is horribly kludgey, and probably can't be easily generalized for use in real code.
I'm thinking this ought to be a fairly simple thing to do, and I suspect that I'm merely overlooking some existing Highcharts feature that would do it.
Can someone point me in the right direction?
I have tried using all sorts of combinations of tickInterval, tickPixelInterval label formatter and tickPositioner and I haven't been able to solve this issue.
I have a chart builder that pulls in different feeds and allows the user to modify the date range of those feeds before shooting this data into highcharts and spitting out the chart.
The problem is that some of the time, the first and/or last dates get cut off. Here is an example:
Without adjusting the margins of the chart (which causes the chart to take up less space), how do I prevent this from happening?
If I was able to determine the pixel location of the ticks and their labels, I could in theory, hide the specific ticks and their corresponding labels which were located outside the graph / cut off. Thoughts?
Without looking at your code - there are a few things you can do.
Rotate your labels
Play around with the x/y axis labels
Align them to the right
Hopefully one of these would help your cause.