Fix both y-axis to 0 highcharts - highcharts

I am trying to make a highchart, with both negative and positive values. Now the thing is, that negative values, are not very big, compared to the positive ones.
Here is a picture of the graph as is:
Now if you look closely on both the y-axis, they do not meet up at 0, there is a tiny gap. Is it possible to make them both start at 0, but allowing them to be negative?
This is my code:
Highcharts.chart('chart', {
chart: {
type: 'column'
},
title: {
text: 'Sales Graph'
},
xAxis: {
categories: xAxisTicks
},
plotOptions: {
column: {
stacking: 'normal'
}
},
tooltip: {
formatter: function() {
debugger;
if (this.series.type == "column") {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>' +
'Sales without discount: ' + prettyNumber(this.point.stackTotal);
} else {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + prettyNumber(this.y) + '<br/>';
}
}
},
colors: ['yellow', 'orange', 'red', 'blue', 'green', 'red', 'blue', 'green'],
yAxis: [
{
title: {
text: 'Daily sales'
},
min: minYAxisValue,
startOnTick: false
}, {
title: {
text: 'Accumulated sales'
},
min: minYAxisValue,
startOnTick: false,
opposite: true
}
],
series: data
});

If you want two to align 0 tick together that is not yet possible with highcharts. Follow this discussion https://highcharts.uservoice.com/forums/55896-general/suggestions/2554384-multiple-axis-alignment-control?page=3&per_page=20.
However you can try this simple workaround:
Have fixed min/max on both y Axes:
yAxis: [{ min: minYAxisValue, max: maxYAxisValue }
Or just link second axis to the first:
yAxis: [{ opposite: true, linkedTo: 0 }

Related

highcharts xaxis label data display

The date displayed on the highcharts xaxis label is showing non-existent dates, not actual data. What should be set on the xaxis label to show the existing date values?
My code is below.
Highcharts.stockChart('dataChart', {
credits: {
enabled: false
},
rangeSelector: {
selected: 5
},
title: {
text: result[0].chartRptCdNm
},
xAxis: {
type: "datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: result[0].graphYaxis
},
opposite: false,
lineWidth: 1,
margin: 0,
labels: {
format: '{value}' + result[0].graphYaxisUnit,
align: "right",
y: -5,
x: -5
}
},
tooltip: {
headerFormat: "",
useHTML: true,
valueDecimals: 2,
split: true,
formatter: function () {
var s = "";
$.each(this.points, function() {
s += '<span style="color:' + this.series.color + ';">\u25CF</span><b>' + this.series.name + '</b><br/>';
s += '<span style="font-size: 13px"> 일자 : ' + Highcharts.dateFormat('%Y-%m-%d', new Date(this.x)) + '</span><br/>';
s += '<span style="font-size: 13px"> 금리 : ' + (Math.floor(this.y * 100) / 100) + '</span><br/>';
});
return s;
}
},
series: seriesArr
});
I am making a chart using a single line series.

HighCharts: Compare the series data with each other and show percentage

I am working with highcharts and I have to display the series data in form of the percentage. considering first series data as total value and for another calculate its percentage with respect to total
e.g
series: [{
name: 'Total value',
data: [50,100,50,100,50,]
}, {
name: 'Value 1',
data: [5,20,10,62,31,]
}]
I have these values for series data and need to calculate the percentage for value1 field which will be (5*100)/50=20% (50 is consider as total value)
same for all values. I have tried many ways but it considers total value as 50+5, i.e the total of both data fields respectively.
Can anyone help me to solve this problem? I have uploaded the highchart at link
Highcharts.chart('container', {
chart: {type: 'area' },
xAxis: { categories: ['A','B','C','D','E',] },
yAxis: { min: 0,
allowDecimals: false,
title: { text: ' Count'}, },
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormat: '{series.name}: {point.y}<br> ({point.percentage:.1f}%)'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,stacking: 'normal',
dataLabels: {
enabled: true,},},
series: {
cursor: 'pointer',}},
series: [{
name: 'Total value',
data: [50,100,50,100,50,]
}, {
name: 'Value 1',
data: [5,20,10,62,31,]}]});
You can achieve what you are after by using a pointFormatter in the tooltip, like this:
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
Additionaly, if you move the tooltip formatting inside the series, you will only have the tooltip display for the series you want in that way, and not for the total series. Like this:
series: [{
name: 'Total value',
data: [50, 100, 50, 100, 50, ]
}, {
name: 'Value 1',
data: [5, 20, 10, 62, 31, ],
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
}
}]
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', ]
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: ' Count'
},
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
},
},
series: {
cursor: 'pointer',
}
},
series: [{
name: 'Total value',
data: [50, 100, 50, 100, 50, ]
}, {
name: 'Value 1',
data: [5, 20, 10, 62, 31, ],
tooltip: {
headerFormat: '<b>{point.x}</b> ',
pointFormat: '{series.name}: {point.y}<br> ({point.percentage:.1f}%)',
pointFormatter: function() {
return this.series.name + ": " + this.y + "<br/>(" + this.y * 100 / this.series.chart.series[0].data[this.x].y + "%)"
}
}
}]
});
#container {
min-width: 310px;
max-width: 800px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
Working example: https://jsfiddle.net/ewolden/eudhkgp3/

How to move tooltip position in Highchart?

I am using highcharts.js to build horizontal bar chart. Its working correctly but by default tooltip appears horizontally so I want tooltip position to be vertical instead of horizontal.
Is it possible to achieve that? Any help appreciated!
JSFiddle - Example
Sample Code:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Expected Output:
I am able to fix this issue using Tooltip.positioner as following -
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
},
positioner: function(labelWidth, labelHeight, point) {
var tooltipX = point.plotX + 20;
var tooltipY = point.plotY - 30;
return {
x: tooltipX,
y: tooltipY
};
}
},

How to display bars next to each other

Problem
When I have only 1 series to show with multiple users in highcharts bar graph it display on top of each other instead of next to each other. Below is the code am using. Please guide me in the right direction.
Also if I add 1 more date in any user's series it shows up properly but that is not the solution as I will always have 1 date on my graph.
JS fiddle link: http://jsfiddle.net/bhats1989/b33mN/3/
Code
$(function () {
$('#team_container').highcharts({
chart: {
type: 'bar',
//inverted: true,
renderTo: 'container',
zoomType: 'xy',
events: {
},
zIndex: 5
},
title: {
text: 'Team Activity Game',
x: -20 //center
},
subtitle: {
text: 'Click and drag in the plot area to zoom in and scroll',
x: -25 //center
},
xAxis: {
title: {
text: 'Week Ending'
},
type: 'datetime',
maxZoom: 24 * 3600000, // Two days
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
},
tickInterval: 24 * 3600 * 1000,
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (!this.visible)
return true;
var seriesIndex = this.index;
var series = this.chart.series;
var j = series.length;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ? series[i].hide() : series[i].show();
series[j-1].hide();
}
}
return false;
}
}
}
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#f4e3e7',
from: 0,
to: 15,
events: {
mouseover: function(e) {
team_tooltipUpdate();
}
},
zIndex: 3
}],
gridLineColor: null,
title: {
text: 'Distance (kms)'
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 15 }]
},
tooltip: {
useHTML: true,
formatter: team_myFormatter
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'Mark',
data: []
}, {
name: 'Joe',
data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
}, {
name: 'Max',
data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
}, {
name: 'John',
data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
} ,{
name: 'yellowline',
visible: false,
showInLegend: false,
data: []
}
]
});
});
function team_tooltipUpdate(){
var chart = $('#team_container').highcharts();
chart.tooltip.refresh(chart.series[4].points[0]);
}
function team_myFormatter(){
var game_parameter = 'running';
if(this.series.name == 'yellowline'){
return '<span style="color:Red;"><b>Danger Area</b></div>';
}else{
if(game_parameter == 'running'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'steps'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'floors'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'cycling'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'heartrate'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
}
}
}
You have to set your pointRange option for series.
pointRange : On linear and datetime axes, the range will be computed as the distance between the two closest data points.
As there is only one point, Highchart won't be able to calculate the pointRange...
To be sure that it will work, put it at the tickInterval value.
// ...
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000, // tickInterval has the same value
// ...
},
// ...
},
// ...
For your question about First and Last label :
xAxis: {
// ...
showFirstLabel: false,
showLastLabel: false,
// ...
}
Look at this Example.
The problem is that with one point Highcharts won't be able to calculate pointRange for any of series. In that case set directly pointRange for series, see: http://jsfiddle.net/b33mN/5/
In the example, pointRange = tickInterval, it's probably you want to achieve.
I know this is a late but helpful answer, I use pointPlacement attribute of the config when using column charts and here is a plunker that shows how to use it to make columns stay next to each other .Results: http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview
$(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories:["Population","Kokulation"]
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth:20
},
},
tooltip: {
shared: false
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1]
],
pointPlacement:0.23
},
{name:"Kokulation",
data:[
['Istanbul', 14.2],
['Karachi', 14.0]
],
pointPlacement:-0.2146
}
]
});
});

Move flags tooltip to upper side

I have Highstock chart with flags. Everything is fine but I wanted to change the position of the tooltip of the flags. (Move tooltip of flags to upper side of the flags). And also i want to give link to flags text "Test test", which will open in new tab. Can any one help me? This my full code http://jsfiddle.net/anant_ghate/8byc9/1/
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX + 20,
y: point.plotY + -20
};
},
shared:true,
formatter: function(){
var p = '';
if(this.point) {
p += '<span>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.point.x) +'</span><br/>';
p += '<b>'+ this.point.title + '</b>' // This will add the text on the flags
}
else {
p += '<b>'+ Highcharts.dateFormat('%A, %b %e, %Y', this.x) +'</b><br/>';
$.each(this.points, function(i, series){
p += '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>'+ this.y;
});
}
return p;
},
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to EUR',
data: data,
id: 'dataseries',
tooltip: {
yDecimals: 4
}
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 20),
title: 'Test test'
}, {
x: Date.UTC(2011, 3, 20),
title: 'Test test'
}],
onSeries: 'dataseries',
allowPointSelect : true,
shape: 'squarepin',
y : -40
}]
});
You can tweak the tooltip like in this answer Highcharts tooltip always on right side of cursor
And make the flags clickable with an approach similar to this highcharts clickable labels how to goto anchor
To redirect to a url when clicking a flag you can create a function on the "click-event":
http://jsfiddle.net/8byc9/5/
I don't think it will be easy to create your own positioner only for the flag-tooltip but not for the currencytooltip...

Resources