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).
Related
I'm working on a radar chart and I would like to only show the last scaleline.
I found this post which could have helped me: Chart.js (Radar Chart) different scaleLineColor for each scaleLine but unfortunately, the answer is not working anymore (the jsfiddle link doesn't display anything).
I read parts of the chart.js documentation about gridLines option, then did some tests/changes on this code: [regular radar chart][2] without any result, would anyone know how to adjust it?
Thanks!
[2]: https://codepen.io/grayghostvisuals/pen/xmBpLenter code here
Here is a solution using the latest version of chart.js (v2.5.0). It uses the scale afterTickToLabelConversion callback property to overwrite the values that were set for the scale ticks (e.g. scale lines).
Since you only want to display the last line, you have to overwrite them by keeping the first tick value (which is never displayed) and only the last tick value (the last line). If you only wanted to display some other line then you would keep the first tick and only the other line that you want displayed.
Here is my implementation.
afterTickToLabelConversion: function(scaleInstance) {
// overwrite the ticks and keep the first (never shown) and last
var oldTicks = scaleInstance.ticks;
scaleInstance.ticks = [oldTicks[0], oldTicks[oldTicks.length - 1]];
// overwrite the numerical representation of the ticks and
// keep the first (never shown) and last
var oldTicksAsNumbers = scaleInstance.ticksAsNumbers;
scaleInstance.ticksAsNumbers = [oldTicksAsNumbers[0], oldTicksAsNumbers[oldTicksAsNumbers.length - 1]];
}
Here is a codepen example that shows an original radar chart and one using the approach described above so that you can see the difference.
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).
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.