Maybe I am not understanding the area chart properly but here is an image to properly display what the problem is and what I am looking for:
Can someone explain why stacking: normal display values like it does? And how to possibly fix it? I have tried stacking: null, and stacking: percent, but both do not give the desired results.
EDIT: I see my error, however, I'm not sure how to fix it. I need to graph the two series in a group so that they are rendered together and not normalized. Any ideas?
When stacking is used, the values of each series for a certain x-value is added together (stacked), and the y-value corresponds to the total of the accumulated series. So the upper graphs looks ok I think.
For 2010-08 its adding 2 + 4 = 6 which is the value of the y-axis and,
for 2010-09 its adding 4 + 4 = 8.
To make your data work with stacking, you want to subtract the 'in-service' from 'total'. Or maybe have two series named 'in-service' and 'out-of-service'. When stacking those two series you will get the total.
Related
I have a bar chart in my react app, and I want to add different limit lines for each column. Does anybody know how to configure it?(For chartJS < 2.9.0) The following is an example of what I am trying to do:
I have solved this issue with adding 3 datasets 1 for target values, 1 for lines and 1 for actual values. After adding 3 datasets, first 2 are stacked and only 2nd one is visible with 0.1 value (so it seems like a line). The 3rd dataset is independent (not stacked).
I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.
Here is a jsfiddle that illustrates the problem I am having:
https://jsfiddle.net/shannonwrege/z8h5eork
The relevant code for this post is this:
chart.yAxis[0].setExtremes(0, max, true, false);
Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.
The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.
In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.
Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.
Does anyone know how to make this work?
I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:
endOnTick: false,
Here's the updated Fiddle showing the results.
https://jsfiddle.net/shannonwrege/z8h5eork/3/
All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).
You will need to read the data and then round up to set the idealMax
var chart,
idealMax = 0; // init the max value
// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
if (options.series[0].data[i][1] > idealMax) {
idealMax = options.series[0].data[i][1];
}
}
// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;
options.yAxis.tickPixelInterval = idealMax/10;
Highcharts.chart('container1', options);
chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);
Updated Fiddle
I've got a chart built using 3 series arrays, each with 5 points of data, displayed as a stacked column chart for each of 5 unique products. Please see this fiddle for a de-branded exampled.
For all my research so far, it seems the plotOptions.column.colorByPoints option is the most likely solution to this, but it's only getting me half way there.
Following the series structure, I need the chart colours to match the following structure:
[ /* note: this example uses pseudo colours */
[transparent, transparent, transparent, transparent, transparent],
[lighter-blue, lighter-green, lighter-red, lighter-yellow, grey],
[blue, green, red, yellow, black]
]
Unfortunately, setting colours for each series does not help because each point in the series needs to be different.
For the record, the plotOptions.column.color option associated with colorByPoints only seems to accept one array (a nested array matching the data structure does not work here), but it applies to each stack as a whole, so setting a single array of 15 colours in my case only makes use of the first 5.
This is perplexing me, am I missing something silly here or is this simply not possible with Hichcharts?
In this case you need to supply the color in the data point object.
ie:
data: [
{y:15, color:'blue'},
{y:64, color:'red'}
]
Example:
http://jsfiddle.net/jlbriggs/rbx9h3r5/3/
I'm facing an issue with my Highcharts-powered component.
Considering the basic column chart JSFiddle example: http://www.highcharts.com/demo/column-basic
My goal is to get the series name (Tokyo, New York, etc...) instead of Jan, Feb, Mar... on the x Axis.
Of course, I also need the columns to be grouped according to the series name. So, in this case, it would be 4 group of columns.
How can I do this ? Should I modify the categories block ?
Thanks a lot
EDIT
I've found the solution and updated the fiddle: http://jsfiddle.net/j658R/1/
But now, I need another bahvior. How can I specify more than one value for each serie ? For example, for "s1", how can I put 4 values for this series and so get 4 bars above the "s1" label on the X axis ?
Thanks
By separating each data point into a separate series, Highcharts will automatically group the data.
So the first data point of each series will be set to the first category. The second data point of series to the second category, etc.
All you need to do is set this up as a single series:
http://jsfiddle.net/j658R/6/
I just started using nvd3 a short while ago and am now facing a big problem for me with multibar charts:
My xAxis data has gaps in between, e.g. [1,2,3,4,9,24,120].
I want these gaps to be displayed in the graph, but nvd3 just displays all bars next to each other, so, that the distance between the bars with the x value 2 and 3 is the same as between those with 9 and 24.
Is there any way to change this, so that you can see all the gaps in the data?
The code I used is just the same as nvd3s example code.
Thank you very much.
Sure there is. You will fill in 0 for all the missing values. For each y that will correspond to a missing value you will set x = 0. That's all you need to do (it's not as simple as it sounds since there can be cases with series which have no data and so on, but this is the main trick).