I am trying to have my own y axis labels for the bubble chart in nvd3. Currently the labels are [1,2,3,4,5]. I want them to be displayed as [2,4,8,16,32]. I found the following function,
chart.yAxis.tickValues(['2','4','8','16','32']);
But the labels are not being changed here. I am unable to understand why.
These tick values will not have any effect if the y values themselves are not within the 2-32 range. Right now that chart only has y values up to 2+.
So, if in addition to adding chart.yAxis.tickValues(['2','4','8','16','32']); to the Chart Code/Javascript tab as you have in your question, you also make the following change to the code in the Data(JSON) tab...
y: Math.floor(Math.random() * 33) // change from y: random()
...then you will see the tick values you specified (2-32) show up in the y axis.
NOTE: I assume you are looking at the Scatter / Bubble Chart.
Related
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
I am trying to achieve divisions measurement on Y axis and X axis should be equal. Means whatever user see it'll be looks like blocks of same measurement.
Twist comes here,both X and Y axis belongs to two different measurement unit.
X Axis define Time and Y Axis define Voltage.
Images shows two grids on X Axis, one is minor grid and other is major grid.
For minor grid i'm using plotLines and Major grid i'm using tickInterval.
Now i want same px partitions(Major / Minor) on Y Axis. Whenever X and Y minor grid line intersect, it'll form square
Is there any way in Highcharts to Scale X and Y axis.?
Your help will be highly appreciated.!
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/
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 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.