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?
Related
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.
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 :)
What I am trying to achieve is to develop a graph that combines line series with bars. The x axis should be a simple timeline (dates) and the 2 y axes should be linear or logarithmic values. I have no problem creating the line series and the timeline axis.
My problem is when I am trying to implement the "time span bars". It's sort of a gantt chart combined with a line chart I guess. The bars represent data where each bar has a start date, and optionally an end date. I want each bar to start at the start date (aligned with the x axis) and end at the end date if available. If no end date is available, the bar should fill the entire chart until the right edge. I cannot figure out how to combine these time span bars with the line series. I have checked out the jsfiddle /8JhXv/1/ which is pretty close to what I am trying to achieve, except in that example, they are not on top of each other. Anyone who could give me some hints on how to put these on top of each other?
Look at some of the options here:
http://highcharts.uservoice.com/forums/55896-general/suggestions/804783-gantt-chart
Best option is not to use actual bars, but to use line series with lineWidth set to a high enough value to mimic bars visually.
You can try to use line series and columnrange (http://www.highcharts.com/demo/columnrange)
Is there an easy way to swap the axes on a Flot graph? Or will I have to write code to iterate over my data and manually switch the X and Y values and axes labels?