I tried reverse=true in the yAxes settings but that does not seem to make a difference.
It always assumes that the min < max in the ticks settings.
Is this possible?
reverse=True does not work in 2.x
I was able to say:
yAxes: [
{
id: 'y1',
type: 'category',
display: true,
labels: ['-3', '-1', '+1', '+3'],
position: 'right',
}
]
to explicitly set the labels in decreasing order. The values continue ro be specified in the original scale so the plot appears correctly.
I also had to override the tooltip callback so that it would show the correct value on hover.
Related
For better understanding of this question, let me show a working example in TradingView webpage, on which the following chart shows the combination of Momentum (area chart) + ADX (line chart):
As you can see, there are 2 vertical values, at left side is the ADX which the scale goes usually from 0 to 60(+-), but the right side, it can grow much more.
On my attempt to achieve the same here, the momentum (area chart) has a huge range, and the adx (lineal chart) goes from 0 to 60, so when it tries to fit both values under the same scale, my blue line looks like it's almost zero, in comparison with the area chart values. (Mouse-over the blue line showing that is currently 43)
So I think you get the point, would it be possible to have 2 scales/vAxis for each series of values?
I checked documentation already but nothing here seems to refer to what I mention:
https://developers.google.com/chart/interactive/docs/gallery/combochart
And just in case you need the options provided to the chart, nothing advanced, just the basic examples:
options:{
seriesType: 'area',
series: {
0: { type: 'line', color: 'blue' }
}
};
use option --> targetAxisIndex -- in the series option...
zero is the default v-axis
targetAxisIndex: 0
to create a second v-axis, assign one of the series to index 1
series: {
1: {
targetAxisIndex: 1
}
}
Found the solution over this post in the documentation, it is conceptually known as DUAL-Y Charts
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
I have a Google Chart where I explicitly set the vertical-axis minimum and maximum
vAxis: {
viewWindow: { min: 0, max: 0.20 },
},
Sometimes, the series to draw have values exceeding those values and the chart is rendered as follows:
Is there an option I can define to hide what exceeds the ViewWindow? To get basically the chart below:
I was wondering if it would be possible to ignore the sizes of segments in highcharts pyramid. I would like all segments to be of the same size despite the value. The reason is that sometimes differences between values may be quite significant and value of 1 - even being extremely important, becomes invisible when the next value is 500. Also, would like to be able to add a legend if possible. It would be nice to set a minimum size of a segment if not possible to get dynamic sizing disabled.
Thanks for your help!
Pawel
Yes, you can add additional data according to which the height of the segment will be calculated. Next, use keys option to map the values and show the right one in a tooltip and data label:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.realY}</b><br/>'
},
series: [{
...
keys: ['name', 'realY', 'y'],
dataLabels: {
format: '<b>{point.name}</b> ({point.realY:,.0f})',
...
},
data: [
['Website visits', 15654, 1],
['Downloads', 4064, 1],
['Requested price list', 1987, 1],
['Invoice sent', 976, 1],
['Finalized', 846, 1]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/e83fatk2/
API Reference: https://api.highcharts.com/highcharts/series.column.keys
I have 2 Highchart charts: column chart and point chart.
They share same xAxis config:
{
type: 'datetime',
min: Date.UTC(2010, 01, 02),
max: Date.UTC(2010, 01, 14),
startOnTick: true,
}
I want to align their x axises so values on corresponding dates are located on same vertical line.
How can I modify charts so that their x axises are properly aligned?
jsFiddle:
http://jsfiddle.net/vmdLommk/1/
The difference is caused by automatically applied padding to the axis for a column series, to account for the width of the column itself.
There are probably multiple things that can be done, but I find it easiest to manage this way:
Add a dummy column series to your line chart. This will force the same kind of padding that is applied to the column chart.
Example:
{
name: 'dummy',
showInLegend: false,
type: 'column'
}
Fiddle:
http://jsfiddle.net/jlbriggs/vmdLommk/2/
I have a strange behavior with my drill down to a waterfall chart. My middle column which is a negative value is not positioned on the top, instead it is going from zero down.
I have taken the exact same configuration and applied it to a first level waterfall chart and there it works fine.
Expected result: Column 'Discount' should go from 50 to 40
Actual result: Column 'Discount' goes from 0 to -10
JSfiddle for drilldown chart where waterfall is not as I want it:
[Drilldown][1]
JSfiddle for chart where waterfall is correct:
[Waterfall][2]
I can not figure out what is missing.
[1]: https://jsfiddle.net/a5x2g0q8/
[2]: https://jsfiddle.net/jfgycycp/
Based on the Highcharts example of Drilldown from column to pie, you need to set the chart type to be the drilled down type, i.e. to 'waterfall', and set the type of the top level series explicitly, i.e. to 'column'.
Updated chart options with type:
chart: {
type: 'waterfall',
height: 350,
zoomType: 'xy'
},
Updated top level series options with type:
series: [{
type: 'column',
data: [
{
name: 'Sweden',
y: 55,
drilldown: 'Sweden'
}]
}],
Updated Fiddle