I have a Highcharts line chart with multiple series. The X axis is a datetime axis. One series is a step line and the max data point for this can finish before the other series on the x axis, e.g. 5 days before the end.
Is there an easy way of extending this line to the end of the chart automatically without filling in the extra data points before the data is passed to Highcharts? The line should just carry on to the end of the chart at the same y coordinate as the last plotted point.
I have already tried setting minPadding and maxPadding to 0 along with start/endOnTick to false, but this had no effect.
Thanks!
See answer here:
continue the line drawing on dotnet highchart
The basic idea is to
1) retrieve the final y value of your data
2) retrieve the final x value that you want it to extend until
3) add a new point to the data with those x and y values.
Related
I am trying to create the UI to show the X and Y axis line graph using Svg Charts in React Native as above attached screenshot. I have an array for the x and y-axis respectively. Example:
var xAxisData = [1.002, 1.045, 1.084, 2.08, 2.021, .... so on] // price list
var yAxisData = [12-11-2021, 13-11-2021, 14-11-2021, 18-11-2021, .... so on] // dates
I have plotted the y-axis graph for that, had filtered & sort the array on the basis of date and some interval so will show only some dates as intervals on the y-axis for example my start date is 20 April and the end date is 20 July. The plotted y-axis will be shown as for only 4 dates as 4 intervals in the period of 4 months.
But now need to plot the x-axis graph, I am getting stuck on what basis will filter or sort the x-axis array within some interval or value.
Note: I Don't want to show or plot all the values of the array for the x and y-axis. My requirement is needed to show the values of the x and y-axis at some intervals
Can anyone help with the same?
I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?
As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.
I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?
In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699
Is it possible to set custom x axis labels in Chart.js? Currently I'm using my array of indexes but is is hard to read anything on this chart, so I would like to scale it and show only specified indexes.
For example: instead [1,2,3,4,5,6,7,8,9,10], I would like to set [1,5,10]
With Chart.js you can't override the horizontal axis labels. Its a great library, sad it doesn't support this.
The easiest way to do it, without getting into the Chart.js code and without redrawing the canvas, is to leave the label cell with an empty string.
For example, if you just want to show the x axis label every 10 points, you can do something like this when generating the labels:
if (ix % 10 == 0) {
labels[ix]="Label";
} else {
labels[ix]="";
}
I am trying to create a line chart in using graphael. Both my x and y data have both positive and negative values. The way I am able to plot it now, the x and y axis end up intersecting and the least values in the arrays. For example, they could intersect at (-12,-12).
I want to create the plot such that the axis intersect at (0,0) to make a quadrant plot. Is it possible to do this using graphael?
After searching all over the web, I figured out out there is no option of achieving this in the library itself. I ended up drawing two extra lines for the X and Y axes to create a four quadrant graph.