I have multiseries spline chart. All series has own plotBand.
Is it possible to limit the plotBand interval by the length of the series?
Example, edited image:
plotLines can't help too:
plotLines: [{
value: 12345,
width: 10
}]
plotBands: [{
from: 30,
to: 45
}],
http://jsfiddle.net/r00tGER/1nuw4fqs/
This is not possible, but you can use Renderer.rect to add custom shape
chart.renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
})
.add();
Second solution is using annotation which allows to add rectangles.
Add one more range-type series as plot for every series.
series: [
{
name: 'as Plot',
type: 'areasplinerange',
data: [
[1434620400000, 58.0, 68.0], [1434620640000, 58.0, 68.0]
],
zIndex: 0
}
]
});
http://jsfiddle.net/r00tGER/ueqht2eL/
Related
I want to create PIE chart using Highchart as below image, please suggest a solution-
Thanks
You can use two pie series with different innerSize and size properties, for example:
series: [{
data: [{
y: 1,
color: 'blue'
}]
}, {
size: '70%',
innerSize: '30%',
data: [{
y: 3,
color: 'green'
}, {
y: 12,
color: 'blue',
showInLegend: false
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4b1phj67/
API Reference: https://api.highcharts.com/highcharts/series.pie
I built a column chart with a plot band
plotBands: [{
zIndex: 1,
to: Date.UTC(2020,4,6),
from: Date.UTC(2020,3,30),
color: 'rgb(217, 217, 217, .4)',
}],
and a zone with a different colors for the x values:
zones: [{
value: Date.UTC(2020,3,30),
color: '#003f6e'
}, {
color: '#999999'
}]
see fiddle
Now I want both to cover the range of the last 7 days from data. The data comes from a google spreadsheet and is updated continuously. I tried something like this:
plotBands: [{
zIndex: 1,
to: this.series.data[this.series.data.length-1].x,
from: this.series.data[this.series.data.length-7].x,
color: 'rgb(217, 217, 217, .4)',
}],
What can I do?
You can use the data.complete callback to set the plotLines and the zones dynamically by updating the xAxis and series.
Demo: https://jsfiddle.net/BlackLabel/m0vdtjzo/
complete() {
let xColumn = this.columns[0];
chart.xAxis[0].update({
plotBands: [{
zIndex: 1,
to: xColumn[xColumn.length - 1],
from: xColumn[xColumn.length - 7],
color: 'rgb(217, 217, 217, .4)',
}]
})
chart.series[0].update({
zones: [{
value: xColumn[xColumn.length - 7],
color: '#003f6e'
}, {
color: '#999999'
}]
})
}
API: https://api.highcharts.com/highcharts/data.complete
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
I would like to add columns inside the area of chart red for negative and green for positive like attaching screenshot.
https://prnt.sc/psk7ge
You need to create a chart with area and column series. The set the colors, use negativeColor and color options:
series: [{
type: 'area',
data: [10, 20, 10, 20, 10],
threshold: -20
}, {
type: 'column',
data: [-10, 10, -15, 10, 15],
color: 'green',
negativeColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/owh16dzL/
API Reference: https://api.highcharts.com/highcharts/series.column.negativeColor
I have a bar chart and I would like to color one of the series white and enable a black border for this series only.
I'd rather not enable a border for everything. Is this possible?
I have a fiddle example - I was hoping it could be achieved in a similar way to the 'color' attribute of the series, but I can't see anything in the API;
series: [{
name: 'Measure',
data: [{
y: 10}, { y:9, color: 'white'}, { y: 8 }, { y: 7 }, { y: 7.2 }]
}]
http://jsfiddle.net/ZzXY2/
It turns out that 'borderColor' is an acceptable attribute of each of the data points, it's just not documented.
Turn the border on and set the default color to white:
plotOptions: {
bar: {
borderColor: '#FFFFFF',
borderWidth: 1
}
}
Set the border color within the appropriate series
series: [{
name: 'Measure',
data: [
{y: score2, color: colors[1], borderColor:'Yellow'},
{y: scoreprev, color: colors[4] },
{y: score1, color: colors[0] },
{y: score3, color: colors[2] },
{y: score4, color: colors[3] }] }]
Can the cross-hairs for Highcharts show on top of the area chart instead of being hidden beneath it?
Here's an example of the problem jsfiddle.net/hHjZb/1286/
Update:
Highcharts has now implemented the OP's feature request. You can now specify the zIndex in the tooltip property. Like:
tooltip: {
crosshairs: [ {
width: 1,
color: 'lime',
zIndex: 22
}, {
width: 1,
color: 'lime',
zIndex: 22
} ]
},
At the time of this question, Highcharts did not give us a way to do that. Not even CSS styles can change the plot order (visibility).
Consider making a feature request. (Update: the FR was made and implemented.)
Meanwhile, you can tweak the Highcharts source (in that example, it is highcharts.com/js/testing.js).
Find this line in the source file:
attribs = {
'stroke-width': crosshairsOptions[i].width || 1,
stroke: crosshairsOptions[i].color || '#C0C0C0',
zIndex: 2
};
and change the zIndex to 20.
Then find this line in the source file:
var group = renderer.g('tooltip')
.attr({ zIndex: 8 })
.add(),
and change the zIndex to 22.
There is a zIndex attribute for crosshairs:
tooltip: {
crosshairs: [{
width: 3,
color: 'green',
zIndex: 50
}, {
width: 3,
color: 'green',
zIndex: 50
}]
},
http://jsfiddle.net/hHjZb/3711/