I have the sample chart with range slider created with PlotlyJS:
It uses API endpoint to fetch data. Now, the slider can be used to change xaxis range like:
but then the chart looks strange as yaxis has this fixed range and visible data covers only small vertical part of the whole chart.
Is it possible to scale (change range of) yaxis when xaxis range is updated?
I tried listening to plotly_replot event and then rescaling yaxis, but really couldn't make it work properly.
Related
I have a Recharts Line graph, and the X-Axis has too many data points, and is looking very congested. Following is the current graph:
Is there a way that I can rotate this text to lets say 270° so that all the labels would be visible?
I basically want to just combine these two charts:
1) Column range: https://www.highcharts.com/demo/columnrange
2) Basic line: https://www.highcharts.com/demo/line-basic
Is this possible, considering that the first chart has a categorical Y-Axis?
I don't need to use categories, I only want the Y-Axis of the line chart. And the lines would be overlaid on top of the horizontal bars.
So both charts would be using the X-Axis time series, but only the line chart would be using the Y-Axis numbers.
You can link both charts into one but you need to remember, that the columnrange chart is inverted and if you want to display line chart exactly like in this example (https://www.highcharts.com/demo/line-basic), you need to swap x values with y values of line series and both axis should have the same scale.
API Reference:
http://api.highcharts.com/highcharts/chart.inverted
Examples:
http://jsfiddle.net/jmmsyv9w/ - not inverted
http://jsfiddle.net/8unrzm1j/ - inverted
I am using NVD3 to draw a graph that uses an ordinal scale on the x axis for dates. I also have a "focus graph" under it to highlight a specific region to display. To automatically update the ticks that are displayed, I use the tickValues() property.
I want to have label on specific dates at the top of the graph. My solution for this was to create another x axis, but above the the graph, plot the same data, but with a 0 height, and then use tickValues() to set the position of the labels. However, the labels don't show up on the top axis. Is there a solution or alternative?
I guess using a secondary x axis is fine. I forgot to remove the line setting the domain property for my secondary axis. When I removed that, it scaled just like my primary axis :)
I am using jqplot to render the *horizontal bar graph in a popup,*I have 1000+ data to render, calculating the container width dynamically based on bar count.
Issue: It works fine till 700+ data but as it exceeds 1000-1000+ bars do not get rendered instead only x axis, y axis valus and labels alone comes.
I have customized angular directive to which I am sending the bar data, I am not sure if that is an issue.(If that would be the case then why the labels and axis values are coming but bars not drawing)
First of all, no: this question is not about the (yet) ugly transition of the lines (I might open another one for that, though..).
I'm displaying data in line charts and the user can select the time horizon. The x-axis then correspondingly transitions so as to fit to the changed time horizon. In attached image, e.g., the time horizon was 1 week and then I switched to 4 weeks. The number of ticks on the x-axis increases from 7 to 28, correspondingly.
Question: How can I prevent the x-axis animation to display outside the svg container? As you can see, the additional dates fly in from the left and they are being animated far far outside the container.
Any ideas?
Right now, the transition works probably in the most simple way it could:
// format for x-axis
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%d.%m"))
.ticks(d3.time.days, 1)
.tickSubdivide(0);
// Update x-axis
svg.select(".x")
.transition()
.duration(500)
.call(xAxis);
It could work if you set CSS rule
overflow:hidden
for part of page which contains the chart.