Example Chart Image
I want to show tooltip for Approval Count as 0 on hovering anywhere in it's general vicinity, is that possible with highcharts?
You can render this particular column as a dummy point - full range & transparent color to show a tooltip for it.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
yAxis: {
max: 10
},
tooltip: {
formatter(tooltip) {
if (this.point.isEmpty) {
return 'Null';
}
return tooltip.defaultFormatter.call(this, tooltip);
}
},
series: [{
data: [{
x: 0,
y: 2
}, {
x: 1,
y: 3
}, {
x: 2,
y: 10,
color: 'transparent',
isEmpty: true
}, {
x: 3,
y: 8
}, {
x: 4,
y: 2
}]
}]
});
Demo: https://jsfiddle.net/BlackLabel/ef8sj4no/
API: https://api.highcharts.com/highcharts/tooltip.formatter
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
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
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
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
I'm trying to create a highstock chart which has some of the points flagged with a circle. All the points in the chart have a tooltip as you hover over the chart.
However the tooltip for the points that have a flag should be one from the flag. I've been trying to see if highstock has an API through which I can say whether tooltip should be displayed on not based on the condition that the point has a flag or not. However, I'm stuck on how to find if a point has a flag or not.
Here a fiddle of my example : http://jsfiddle.net/ulhas87/WSDza/
{
rangeSelector: {
selected: 1
},
title: {
text: 'USDtoEURexchangerate'
},
yAxis: {
title: {
text: 'Exchangerate'
}
},
tooltip: {
formatter: function(){
console.log(this);
if(this.point){
//if this point has a flag then return false
//else return the tooltip for this point
return this.y;
}else{
//this is a flag - hence return the flag tooltip
return this.y;
}
},
},
series: [
{
name: 'USDtoEUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
},
followPointer: false
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
1,
14),
title: '',
text: 'Shape: "circle"'
},
{
x: Date.UTC(2011,
3,
28),
title: '',
text: 'Shape: "circle"'
}
],
onSeries: 'dataseries',
shape: 'circle',
width: 1,
height: 1,
y: -4,
states: {
hover: {
fillColor: '#395C84'//darker
}
},
point: {
events: {
mouseOver: function(){
console.log(this);
}
}
},
zIndex: 10
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
2,
10),
title: 'C',
text: 'Shape: "flag"'
},
{
x: Date.UTC(2011,
3,
11),
title: 'C',
text: 'Shape: "flag"'
}
],
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 'dataseries',
width: 16,
style: {
//textstylecolor: 'white'
},
states: {
hover: {
fillColor: '#395C84'//darker
}
},
marker: {
fillColor: '#000000'
}
}
]
}
Appreciate any help. Thanks
The problem is that your cherries are not the same as you are using for a flags. See updated version: http://jsfiddle.net/WSDza/3/
Also, I advice to set lower hideDelay to observer that point doesn't have tooltip.