AmChart second value axis display missbehaviour - javascript

I have an amChart with 2 value axis. When the categoryAxis.autoWrap is set to true and the label does not fit, the chart is not drawn correctly, the second value axis is out of view. When resizing the container, sometimes is ok, sometimes not.
Here is an example in jsFiddle.

Related

Tooltip indicator on axis displaying different data than the data plotted on chart

I have multiple y axis and x axis of chart which I change using setInterval based on different criteria
After those changes the cursor displaying values on y axis and x axis displays different value than the value plotted.
How can the cursor display correct value corresponding to the axis?
Please find screenshot attached highlighting the issue.
Thanks

Multiple linecharts with different Y scales with shareable X Axis using d3js

Im working on this project where I have a big amount of data. It's segmented by categories Soybean, MA20, MA50, MA100, BBW_2 and date.
What I've done so far was to use a code where you can filter and zoom in the data. The result is
Selecting Soybean:
Selecting MA50:
Selecting BBW_2 !HERE IS THE PROBLEM! :
The problem is when BBW_2 is selected. You can see an orange line touching the X axis. This is BBW_2. It has it's Y' axis max value of 2, which is infinitely smaller than 1200, so the scale doesn't work as expected. This doesn't occur with the other categories because they have similar Y' axis values.
What Do I Want to Achieve?
I want to plot all the categories that the user selects appending the selected categories`generated linechart to the same X axis but with different Y scales. One example of what it would look like is this one: .
What I've tried:
Change the Y scale by changing it when the user selects BBW_2.
Plot in different SVG`s. This doesnt work great because it loses the zooming effect.
The code:
https://jsfiddle.net/ldepaula/3q1k9hyj/1/

NVD3: Have labels at certain tick values at the top of the graph

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 :)

Highcharts - Series tooltip doesn't work when plotting lines that zigzag on the x axis

I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.

Hiding multiple axis highstock, fill empty space

I'm building a demo chart with highstock displaying 4 axis, two on each side http://jsbin.com/oyicuc/3/edit
I'd like the axis to hide when you click on the series in the legend and for the chart to fill the remaining space. I've used the showempty: false property on the y axis, this works on the outer axis but if you hide the inner axis then the gap where it was remains.
Anybody know if this can be done? Thanks in advance

Categories