Related
New to Highcharts, trying to generate waterfall chart with stacking only on intermediate stack. (image below)
Please help.
enter image description here
You should be able to achieve something like this by adding these stacking columns as an additional series to the waterfall chart. I think that everything is clearly showed in the demo.
Demo: https://jsfiddle.net/BlackLabel/tmyrk21f/
{
type: 'column',
pointPadding: 0,
stacking: 'normal',
data: [
// First stack
{
y: 50000,
x: 0,
color: 'red'
}, {
y: 50000,
x: 0,
color: 'orange'
}, {
y: 20000,
x: 0,
},
// Second stack
{
y: 500000,
x: 3,
color: 'red'
}, {
y: 400000,
x: 3,
color: 'orange'
}, {
y: 20000,
x: 3,
},
// Third stack
{
y: 145000,
x: 6,
color: 'red'
}, {
y: 100000,
x: 6,
color: 'orange'
}, {
y: 100000,
x: 6,
}
]
}
API: https://api.highcharts.com/highcharts/series.column.groupPadding
API: https://api.highcharts.com/highcharts/series.line.stacking
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
Current result:
Desired result:
Multiple gradients are not supported on a single SVG element, but you can add additional rect elements as layers with radial gradient fill.
chart: {
events: {
load: function() {
...;
this.renderer.rect(...)
.attr({
fill: { // BLUE
radialGradient: {
cx: 0.9,
cy: 1,
r: 0.9
},
stops: [
[0, '#0000ff'],
[1, 'rgba(0, 0, 255, 0.1)']
]
}
})
.add();
this.renderer.rect(...)
.attr({
fill: { // RED
radialGradient: {
cx: 1,
cy: 0,
r: 0.9
},
stops: [
[0, '#ff0000'],
[1, 'rgba(255, 0, 0, 0.1)']
]
}
})
.add();
}
}
},
series: [{
type: "treemap",
color: { // GREEN
radialGradient: {
cx: 0,
cy: 0.5,
r: 0.9
},
stops: [
[0, '#00ff00'],
[1, 'rgba(0, 255, 0, 0.1)']
]
},
...
}]
Result:
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4975/
We are developing some charts using Highcharts.
And we are using the series.events.afterAnimate in combination with an xAxis.max value.
But when we have for example points from Januari until September, but with an xAxis.max value until December the afterAnimate function is called when it reached December we guess..
But we would like have a callback when all the valid points are drawn, and not we it reaches its max value...
is this possible?
That happens because the clipPath width is by default equal width of the plot area. To change it you can overwrite Highcharts.Series.animate method and set clipPath width equal width of the particular series.
EDIT:
Also, note that when the width of the clipPath is shorter and the duration of the animation is the same the animation will be much slower. To make it look better the time has to be shortened - it can be calculated depending on series width and updated in chart load event.
Check demo and code posted below:
Code:
(function(H) {
H.Series.prototype.animate = function(init) {
var series = this,
chart = series.chart,
clipRect,
animation = H.animObject(series.options.animation),
sharedClipKey;
// Initialize the animation. Set up the clipping rectangle.
if (init) {
series.setClip(animation);
// Run the animation
} else {
sharedClipKey = this.sharedClipKey;
clipRect = chart[sharedClipKey];
if (clipRect) {
clipRect.animate({
width: series.group.getBBox().width,
x: 0
}, animation);
}
if (chart[sharedClipKey + 'm']) {
chart[sharedClipKey + 'm'].animate({
width: chart.plotSizeX + 99,
x: 0
}, animation);
}
// Delete this function to allow it only once
series.animate = null;
}
}
})(Highcharts);
Highcharts.setOptions({
chart: {
events: {
load: function() {
var chart = this,
series = chart.series[0],
seriesWidth = series.graph.getBBox().width,
duration = (seriesWidth / chart.plotWidth) * series.options.animation.duration;
chart.series[0].update({
animation: {
duration: duration
}
});
}
}
},
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
});
Highcharts.chart('container', {
title: {
text: 'Chart with half data but with max data'
},
subtitle: {
text: 'A label should appear when all points are drawn'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 0, 1),
max: Date.UTC(2019, 11, 31),
tickInterval: 2592000000, // month
},
plotOptions: {
series: {
events: {
afterAnimate: function() {
this.chart.renderer.label(this.name + ' has appeared', 100, 70)
.attr({
padding: 10,
fill: Highcharts.getOptions().colors[0]
})
.css({
color: 'white'
})
.add();
}
}
}
},
series: [{
data: [{
x: Date.UTC(2019, 0, 1),
y: 29.9
},
{
x: Date.UTC(2019, 1, 1),
y: 139.9
},
{
x: Date.UTC(2019, 2, 1),
y: 59.9
},
{
x: Date.UTC(2019, 3, 1),
y: 19.9
},
]
}]
});
Highcharts.chart('container2', {
title: {
text: 'Chart with full data'
},
subtitle: {
text: 'A label should appear on the plot area after animate'
},
xAxis: {
type: 'datetime',
min: Date.UTC(2019, 0, 1),
max: Date.UTC(2019, 11, 31),
tickInterval: 2592000000, // month
},
plotOptions: {
series: {
events: {
afterAnimate: function() {
this.chart.renderer.label(this.name + ' has appeared', 100, 70)
.attr({
padding: 10,
fill: Highcharts.getOptions().colors[0]
})
.css({
color: 'white'
})
.add();
}
}
}
},
series: [{
data: [{
x: Date.UTC(2019, 0, 1),
y: 29.9
},
{
x: Date.UTC(2019, 1, 1),
y: 139.9
},
{
x: Date.UTC(2019, 2, 1),
y: 59.9
},
{
x: Date.UTC(2019, 3, 1),
y: 19.9
},
{
x: Date.UTC(2019, 4, 1),
y: 29.9
},
{
x: Date.UTC(2019, 5, 1),
y: 139.9
},
{
x: Date.UTC(2019, 6, 1),
y: 59.9
},
{
x: Date.UTC(2019, 7, 1),
y: 19.9
},
{
x: Date.UTC(2019, 8, 1),
y: 29.9
},
{
x: Date.UTC(2019, 9, 1),
y: 139.9
},
{
x: Date.UTC(2019, 10, 1),
y: 59.9
},
{
x: Date.UTC(2019, 11, 1),
y: 19.9
},
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/gj7eqkv8/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
As highchart provides great features of charting, we have incorporated Highchart library in our web application.
As per the requirement we have to display flags on specific datapoints. So I am using flags series to achieve the same as mentioned below:
series: [{
name: 'USD to EUR',
data: [{
y: 1,
x: Date.UTC(2017, 5, 12)
},
{
y: 3,
x: Date.UTC(2017, 6, 13)
},
{
y: 5,
x: Date.UTC(2017, 7, 14)
},
{
y: 7,
x: Date.UTC(2017, 8, 15)
},
{
y: 9,
x: Date.UTC(2017, 9, 16)
},
{
y: 11,
x: Date.UTC(2017, 10, 17)
},
{
y: 13,
x: Date.UTC(2017, 11, 18)
},
{
y: 15,
x: Date.UTC(2017, 12, 19)
},
{
y: 17,
x: Date.UTC(2018, 1, 20)
},
{
y: 19,
x: Date.UTC(2018, 2, 21)
}
],
id: 'dataseries'
// the event marker flags
}, {
type: 'flags',
y: -5,
data: [{
x: Date.UTC(2017, 5, 12),
title: ' '
},
{
x: Date.UTC(2017, 6, 13),
title: ' '
},
{
x: Date.UTC(2017, 7, 14),
title: ' '
},
{
x: Date.UTC(2017, 8, 15),
title: ' '
},
{
x: Date.UTC(2017, 9, 16),
title: ' '
},
{
x: Date.UTC(2017, 10, 17),
title: ' '
},
{
x: Date.UTC(2017, 11, 18),
title: ' '
},
{
x: Date.UTC(2017, 12, 19),
title: ' '
},
{
x: Date.UTC(2018, 1, 20),
title: ' '
},
{
x: Date.UTC(2018, 2, 21),
title: ' '
}
]
But when series is plotted with flags and when I set extremes on Y-Axis, this symbols goes out of chart as shown in below image:
Is there any work around to fix this issue ?
Here is the JS Fiddle.
Issue reported in Highcharts github, marker as a bug: https://github.com/highcharts/highcharts/issues/8546
Workaround:
chart: {
events: {
load: function() {
this.series[1].markerGroup.clip(this.clipRect); // series[1] -> index of flag series
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/md82wpfk/8/
i have a gauge charts with defined tick positions and want to show some text labels there. e. g.:
-300 => Text 1
-200 => Text 2
-100 => Text 3
...
Is there a way to do that? Here's a fiddle of the chart.
jsfiddle.net/r8d3jnx6/
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -70,
endAngle: 70,
background: null
},
plotOptions: {
gauge: {
dial: {
baseWidth: 2,
baseLength: '100%',
radius: '100%',
rearLength: 0
},
pivot: {
radius: 5
},
dataLabels: {
enabled: false
}
}
},
yAxis: [ {
min: -300,
max: 500,
tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
lineColor: '#933',
lineWidth: 0,
minorTickPosition: 'outside',
tickLength: 0,
minorTickLength: 0,
labels: {
distance: 12,
//rotation: 'auto'
},
//categories: ['Grunder'],
offset: 0,
plotBands: [{
from: -300,
to: 2,
thickness: 15,
color: '#55BF3B'
}, {
from: 0,
to: 202,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#55BF3B'], //green
[1, '#DDDF0D'] //yellow
]
}
}, {
from: 200,
to: 500,
thickness: 15,
color: {
linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
stops: [
[0, '#DDDF0D'], //yellow
[1, '#ff0000'] //red
]
}
}]
}, {
min: -200,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -100,
lineWidth: 2,
labels: {
enabled: false
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}],
series: [{
data: [250]
}]
});
You can use a yAxis.labels.formatter function to check what the label value is, and return a text of your choice depending on that value.
To take your example, it could look like this:
yAxis: {
labels: {
formatter: function() {
if(this.value == -300) return '-300 => Text 1';
if(this.value == -200) return '-200 => Text 2';
if(this.value == -100) return '-100 => Text 3';
return this.value;
}
}
See this updated JSFiddle of how it works. As you can see you'll have to face the potential issue of labels overlapping the gauge, but you can fix that with distance, rotation and some other attributes (see API), depending on how your labels end up looking.