I'm trying to use Ant Design charts to plot an area chart with 3 series - actual, target and forecast. For some reason, the chart plots the series relative to the last item in the array, rather than relative to the x axis. I tried setting the startOnZero: true but that didn't help.
See below example:
In this example, the target is 220 and the actual is 1558, but the target point is higher on the y axis. Recreated:
https://codesandbox.io/s/beautiful-grothendieck-qtjj7?file=/App.tsx:8366-8384
If we put the 'Target' values to the bottom of the data array, it works fine for some reason:
By default it creates a stacked chart. You can set isStack to false.
Related
Is it possible to show the value labels of the y-value below the x-axis instead of showing them inside the chart in Rechart? I have found nothing similar to this in the examples on the Recharts page and the API does not have options for this either. (At least I didn't find them) An example of what I mean is in the link below.
value labels below x-axis
Use the "position" prop with only "y" value to set the position along Y-Axis. This will only fix the Y-Axis position and the X-Axis would change, hence giving you the Tooltip the way you require.
function chart (data, selector) {
// generate chart with zoom feature. it scales the X domain and update the chart accordingly.
}
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")
the code above is a chart generator function which I give it different datasets to make me charts. in all charts, the dataset has the same X values but different Y values.
problem:
lets say we have 3 charts, all the X axis ranges are between 0-100. In the first chart, I drag mouse and create a zoombox between 30-60 and the first chart updates, now it is scaled between 30-60. But the second and third chart are intact. I need them to be updated as well between 30-60.
similarly if I do the same for second chart, I need the first and third one get updated.
here is jsfiddle to illustration
I made not so big modification to make this works.
First of all we remember globally the information about single chart in var charts array. This is done during creation of charts
charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));
Next we can use this array in function zoomdrag and update.
This work maybe not perfect (reset of chart is missing) but show how to handle it and get the same zoom in all charts.
Here is jsfiddle
I have created a subplot with plotly.JS , x axis is shared for each graph as given in the below picture.
I want to show the x axis values for all graphs in the subplot instead for showing it only for graph at bottom. I achieved this using anchor attribute, but the graphs are not aligned well. Look at the below picture, here 600 of graph2 is not positioned exactly to the other two graphs.
I want all the graph to share x axis as well as show the x axis values on each graph.
I am trying to create a highmaps chart that contains two mapbubble series so that it will show two bubbles in each country rather than just one. I am however struggling to understand how I can manipulate the x coordinates of the series so that they are not drawn on top of each other.
You need to manipulate second serie's data and change x/y values, because points are printed according to these values.
I was wondering if there is a way to prevent Highcharts from recalculating and redrawing the scale of the Axis when I add a new serie.
What I need to do is the following: I have a scatter chart with a lot of data; when the user selects a point, I add a new series with a "line" type. This series' points are a limited sample from the previous ones, so no "real" new points are added, but the scale of the xAxis changes.
Setting xAxis' min and max value, startOnTick and endOnTick to true did not solve the problem. Any idea?
Edit:
As I wrote, the way Highcharts handles axis' scales is still a mistery to me. In my case, I was rendering one scatter and one column graph on the same canvas. In response to a user click, I was adding 2 new series: a line serie and a column serie each one based on a subset of the original data. The problem was caused by the column graph: when you add a new serie to a column graph, bars are not overlapped, but redistributed, thus creating the scale change effect.
Try to create the line series but hidden, and when you want to show it use chart.series[1].show().