I need to draw a rectangle and other shapes in HighCharts
Going to use a built-in annotations module, but unable to create a simple Rectangle by xAxis & yAxis points
For example - here's the Shape I'm trying to create
annotations: [{
shapes: [{
type: 'rect',
points: [
{
xAxis: 1,
yAxis: 20
}, {
xAxis: 10,
yAxis: 20
}
]
}]
}]
E.g. I wanna stretch it diagonally from 1:20 to 10:20
By documentation such way may work, but it's not.
Is there any way to do what I want?
Your shape object isn't defined in correct way, because xAxis and yAxis parameters are used to specify which axes the point will be connected to.
Second reason why your implementation is not working is the fact that you didn't specified any height and width values of the shape.
If you would like to draw a rectangle between two points (if I clearly understood your expectations), please use Highcharts.SVGRenderer.rect() function to generate it.
You can simply calculate the x and y values of a rect you need to create by Axis.toPixels() value, which converts the axis values to plot pixels values.
Another, and in my opinion the best solution is by creating new fake series, which has only the points for your annotations (and it's unaccessable for users), then create a shape pathtype with all points from that series connected to it. Here is the code and example:
series: [{
data: [{
y: 29.9,
id: 'min'
}, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
id: 'max'
}, 194.1, 95.6, 54.4]
}, {
name: 'Fake annotations points',
// To make this series hidden and unaccessible for user.
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
//
data: [{
x: 0,
y: 29.9,
id: '1'
}, {
x: 0,
y: 216.4,
id: '2'
}, {
x: 8,
y: 216.4,
id: '3'
}, {
x: 8,
y: 29.9,
id: '4'
}]
}],
annotations: [{
shapes: [{
type: 'path',
points: ['1', '2', '3', '4'],
}]
}]
});
Live example: http://jsfiddle.net/quag6ey2/
Related
I try to implement this, but for scatter3d:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/point/color
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
color: '#BF0B23'
}, 194.1, 95.6, 54.4]
I would like to specify the color of each bubble in this: https://jsfiddle.net/638yn59p/11/
series: [{
name: 'Data',
colorByPoint: true,
accessibility: {
exposeAsGroupOnly: true
},
data: [[0.052359,-0.316845,0.122564],
You can also specify a wanted color for each point by defining it in the data. When your data is an array of objects, the config should look like this:
[{
x: ...,
y: ...,
z: ...,
color: 'string',
}]
Or you can define it in the array of arrays, but you will need to use the series.keys feature to make able render it.
Demo: https://jsfiddle.net/BlackLabel/g5rvmnhe/
series: [{
name: 'Data',
keys: ['x', 'y', 'z', 'color'],
data: [
[0.052359, -0.316845, 0.122564, 'red'],
]
}]
API: https://api.highcharts.com/highcharts/series.line.keys
Seems like this did the trick: Add variable for the colors:
var colors = ['#FF530D','#FF530D','#FF530D','#FF530D','#FF530D', '#E82C0C', '#FF0000']
Use the variable in the series:
series: [{
name: 'Data',
colorByPoint: true,
colors: colors,
i want to do a chart like below:
red bar's xAxis share with blue line's yAxis datas
red bar's yAxis using top scale,
blue line's xAxis using bottom scale.
To achieve the wanted result you will need to use two xAxis and two yAxis - each for one series type and redefined your line data, because the bar series inverts the axes.
Demo: https://jsfiddle.net/BlackLabel/482vc9np/
series: [{
data: [{
x: 49.9,
y: 0
}, {
x: 71.5,
y: 1
}, {
x: 106.4,
y: 2
}, {
x: 129.2,
y: 3
}, {
x: 144.0,
y: 4
}],
}, {
type: 'bar',
yAxis: 1,
xAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0],
}]
Use the following chart as an example.
https://jsfiddle.net/albertwang/rqekhf9s/1/
legend: {
symbolHeight: 20,
......
I want to change the height of both of these two legend symbols. However, I can only change the first one by using legend.symbolHeight.
Thank you for your help.
You cannot change the legend size of the spline series, because highcharts uses the same spline symbol in the legend as in the series. You can change the width, and the line will get longer, but height has no effect. If the height was also changed, the legend would not be identical to the series anymore. Imagine if you had 2 series, both with round symbols where one of them is larger than the other. The only way to tell these two apart in the legend, would be the size of the symbol.
There is no setting you can set to achieve what you want, your only option would be to wrap the function that draws the legend symbols.
How to wrap functions in highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
The function that draws legend symbols: https://github.com/highcharts/highcharts/blob/master/js/parts/Legend.js#L1277
If you are going to do this, be aware that you can wrap this function for different series types, or all of them.
To acheieve the wanted result, you can use a simple workaround. Create additional empty spline series with the marker like you want and id property. Next, use linkedTo in basic spline series:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
type: 'spline',
linkedTo: 'fakeSeries',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}, {
type: 'spline',
marker: {
radius: 10,
symbol: 'circle'
},
color: 'black',
name: 'Temperature',
id: 'fakeSeries'
}]
Live demo: https://jsfiddle.net/BlackLabel/8cmurd3q/
API:
https://api.highcharts.com/highcharts/series.spline.linkedTo
https://api.highcharts.com/highcharts/series.spline.marker.symbol
I've started to use a graphic pretty similar to the dual combo axes. I've added the navigator from highstocks but the navigator graphic differs a lot from the graphic.
It seems that the navigator is plotting both series on the same column and I'm not capable of configuring both axis for it.
I'm trying to modify the jsfiddle example but I couldn't make it work:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
},
showInNavigator: true
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
},
showInNavigator: true
}]
http://jsfiddle.net/guconnmn/2/
Here's a workaround for the problem that ewolden pointed out:
I did not find a way to put each series on its own axis in the
navigator.
You can compute the ratio of the both y axes maximums and than update all the points in the second series using new values. That should mimic the presence of the second y axis.
chart: {
zoomType: 'x',
events: {
load: function() {
var chart = this,
navigator = chart.navigator,
ratio = chart.yAxis[0].getExtremes().max / chart.yAxis[1].getExtremes().max;
navigator.series[1].points.forEach(function(p) {
p.update({
y: p.y / ratio
});
}, false);
this.redraw();
}
}
}
Live demo: http://jsfiddle.net/kkulig/p44kx9xn/
You can add both graphs to the navigator using the following code:
navigatorOptions: {
type: 'column' //in the column series
}
And
navigatorOptions: {
type: 'line' //in the line series
}
That said, I did not find a way to put each series on its own axis in the navigator. Furthermore, highstock does not support xAxis categories, see API, highstock.xAxis only supports datetime format. So you will have to fill in timestamps and format them to show months if that is your desired output.
Working example: http://jsfiddle.net/ewolden/p5amaofc/
API on series.navigatorOptions: https://api.highcharts.com/highstock/series.line.navigatorOptions
I have a High Chart chart similar to this bar chart: http://jsfiddle.net/s4zzpLzL/
How would I got about spliting the bar colors so that the color of the bar up until 500 is grey and the color of the bar after is the color you see on the screen? See image below.
You can set gradient color for series, demo: http://jsfiddle.net/pscwnzk7/1/
$('#container').highcharts({
chart: {
type: 'bar'
},
series: [{
color: {
linearGradient: [0, 0, 0, 500],
stops: [
[0, '#ff0ff0'],
[0.5, '#ff0ff0'],
[0.5, '#f0f00f']
]
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
}]
});
The only problem with that solution is that you can't specify (in values) where will be break - try to resize chart. So you would need to update series color gradient on each window resize etc.
You can use zones in each serie like this:
zones: [{
value: 500,
color: '#A0A0A0'
}]
value is the up until value, and color is the color of that zone. Here's your edited FIDDLE
EDIT:
You can also use plotBands but it's not exactly what you would want: DEMO
There is also a plugin which I don't think covers exactly what you are asking: Plugin
Other than these I don't think there is another way unless you alter your data and use stacked bar chart. You will have to change all of your data though and it will be tiresome.
You can use concept of grouping, threshold and negativeColor to achieve this. Create 2 series with the same data and overlap them with grouping: false and a negativeColor: 'transparent'
demo: https://jsfiddle.net/1dp8L1gw/
plotOptions: {
bar: {
grouping: false,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'red'
}, {
name: 'Tokyo',
data: [45.9, 71.5, 106.4],
color: 'blue',
threshold: 50,
negativeColor: 'transparent'
}]