I have a chart which contains two series, and each of them has its own yAxis. I need to automatically set the second axis maximum to 13.5% of the first axis maximum. For example, if the first axis goes from 0 to 100, then I want the second axis to go from 0 to 13.5 (No matter the second series value).
The only way I found to achieve this is to calculate the max of the first series, and then affect it to the max of the second axis. But this is not what I really want. See this JSFiddle.
My fiddle seems to work, but in reality, I am not calculating the second axis maximum in a good way, as I refer to the first series maximum and not the first axis maximum.
Does anyone knows a general way to set the max of an axis accordingly to the max of another axis ?
The linkedTo attribute from Highcharts axis is close to what I want, but I need to add a coefficient. I don't know how to proceed.
There is no default API function in Highcharts that would allow that.
If you want to get percentage of max of created axis, then you can get it in load event of chart (API: http://api.highcharts.com/highcharts#chart.events.load )or in callback (as in demo below). Next you will need to update second axis' max.
Example: http://jsfiddle.net/cg0c5tkd/
function(chart){
chart.yAxis[1].update({max: chart.yAxis[0].getExtremes().max * 0.135});
}
Related
I'm using NVD3 to generate a multi-bar / stacked chart. Here is a live fiddle.
I am taking an original array of data, transforming it into an nvd3 compatible structure, and maintaining arrays for both the 'current year' (2018) and 'all years'. The button at top allows you to toggle between all years and current year.
I'm pleased with the resulting chart with one exception. The scaling of the Y axis doesn't work if you perform the following steps:
1.) load the chart / fiddle
2.) click 'team 3' (orange) label at the top legend area a couple of times
3.) note the way the left side (Y axis) changes to scale to the resulting min / max
4.) now click 'Current Year' button at top (to only show a single year of data)
5.) again click 'team 3' (orange) label at the top legend area a couple of times... the Y axis does NOT scale at all now to decrease the max amount when 'team 3' is disabled.
When the current year / all years button is clicked, I'm running the following that I thought would force the chart to adapt fully to the new data set and automatically have its Y axis bounds set based on the data and legend items toggled:
data = convertedArray; // THE ALTERNATE ARRAY OF DATA
chart.forceY([uniqueDollarAmounts[0], // THE DISTINCT VALUES THAT GOVERN THE Y AXIS AMOUNTS (AND BOUNDS?)
uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);
d3.select('#NVD3Chart svg').datum(data).call(chart);
What do I need to do to have disabling 'team 3' decrease the Y axis max value to the 392,710.1 value that the next highest team has (team 7)? I also have observed that when you return back to 'All Years' it doesn't work as it does initially (speaking of the scaling of the Y axis)... so I'm breaking something when I pivot to the 2nd data set apparently.
The purpose of chart.forceY(..) is actually the opposite of what you want, it ensures that the Y Axis will not scale when the displayed data is filtered. The call to .datum(data) handles changes in the axis and data based on data. In fact simply remove both of these instances and it will Y-Axis scaling will work.
$('#sort').click(function() {
if ($(this).val() == "All Years") {
$(this).val("Current Year");
data = convertedArray;
//chart.forceY([uniqueDollarAmounts[0], uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);
d3.select('#NVD3Chart svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
getLowerTeamData()
}
else {
$(this).val("All Years");
data = convertedArray2;
//chart.forceY([uniqueDollarAmounts2[0], uniqueDollarAmounts2[uniqueDollarAmounts2.length-1]]);
d3.select('#NVD3Chart svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
getLowerTeamData()
}
});
A note on a functionality you are mentioning:
I also have observed that when you return back to 'All Years' it doesn't work as it does initially
This is because when the chart is first loaded chart.forceY was not used, as such the Y Axis will scale correctly. When you go back to 'All Years' it applies (or rather tried to apply)chart.forceY which wasn't happening initially causing this issue to appear.
This problem is actually due to chart.forceY(..) not working for your initial dataset from what appears to be a typo on your end. Take a look carefully at line 119:
chart.forceY([uniqueDollarAmounts[0], uniqueDollarAmounts2[uniqueDollarAmounts.length-1]]);
The uniqueDollarAmounts2 should be uniqueDollarAmounts, so the value of uniqueDollarAmounts2[uniqueDollarAmounts.length-1] is undefined. This causes .forceY to not work as intended which is why it still appears to scale when you filter "Team3".
Here is a fiddle showing chart.forceY on the initial chart and the typo correction. Notice that the Y-Axis does not change when the data is filtered in any cases. The minim value on the 2018 data is different so you will notice the lower value does indeed change from 0 and 6,641.8 as you would expect.
Here is a fiddle where instances of chart.forceY are removed. Notice that the Y-Axis scale appropriately now.
In below picture,
The date displayed at end of axis line (x-axis) is diff from date displayed at end of data zoom.
Required,
The date should be same, at axis line & data zoom, When no zoom is applied.
The date should be the last value in data that is passed to charts by settings.
Screenshot is taken from official site of echarts.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
Actually, the chart does show data up to 2009/10/18, but since the xAxis ticks aren't equally spaced, there's a small area at the chart's end
Look what happens when I hover over the chart's right end. It does show you 2009/10/18.
Because the axis ticks are alligned from the left, and the chart's axis is dynamic (because of the custom zoom range), it may not always fit perfectly.
You can, however, play a little with the ticks and labels.
For example, when you have 100 datapoints, you can change the tick interval and label from auto to, let's say, 10 (or another whole number divisible by the number of datapoints).
xAxis: [
{
axisTick: {
interval: 10
},
axisLabel: {
interval: 10
},
}
]
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 highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks
Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.
So I'm trying to get my highcharts plot to draw the recent minima and maxima.
I already figured the correct JSON sub-object is "plotLines", however my script just refuses to draw them without any error. Maybe someone of you can spot my error. The corresponding (and probably wrong, but that doesn't really matter for this example) values are listed to the left
thanks!
With you current values, the lines will never plot.
Your axis min is sitting at 500, and you are plotting lines at 498.
The axis will not expand to show plotLines or plotBands - it will only expand to show data (or based on minPadding/maxPAdding, etc).
You will need to check that your lines are within your axis min/max in order to display them.
You can do that by using the getExtremes() method, and if needed, the setExtremes() method:
http://api.highcharts.com/highcharts#Axis.getExtremes
http://api.highcharts.com/highcharts#Axis.setExtremes
Edit to incorporate comments:
If the line is the same value as a grid line, you will need to set a zIndex on either the plotLine or the gridLines - by default the gridLines are above the plotLines