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.
Related
I was building a chart in HighCharts with logarithmic axis type. Here is a link to the code in JSfiddle.
https://jsfiddle.net/PowerHouse/ekwoupcy/15/
I'm consuming data from Google sheets and at the moment, the values are plotted exactly as in Google Sheets. I however wanted to plot the changes over time instead, something similar to this image. Ignore the left percentages (labels), the ones on the right are the workable ones or rather where my focus is on.
I have tried applying the plotOptions and specifying the compare: 'percent', but still I get the chart not showing the change over time but the exact stock value instead. Is there a way I could get the percent changes instead of the values themselves? I will appreciate any assistance. Thanks!
I'm trying to build a box plot representing stats of a lot of data(x-time, y-time) The idea is to use d3.extent() to get the domain and then feed it to timeScale to get ticks in nicely chosen intervals. Then I calculate stats for data points between the ticks. Example below:
The approach works well most of the time. Except for the 1st day of the month which creates an additional tick in an uneven spacing ( see above "Wed 31, June" ). I'm currently calculating bar widths and positions manually assuming that the ticks are spaced evenly so the whole chart gets broken.
The data can span any range of time from a week to couple years, so dynamic ticks are required.
Any ideas how to remove the additional tick or make all the ticks spread evenly?
EDIT. Not sure if removing the tick is going to do the trick... probably even spacing is more important here. I looked up other people's questions about similar problems but I'm still confused how to solve my problem.
I've just started using D3 so forgive me if the question is trivial. I'll be happy if you just point me in the right direction.
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
I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])
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.