When using the pointPlacement in highcharts when data is more than 1 it works fine, but when get one data from server all bars compress to one bar.
Sorry my English is bad
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>
you can try my code here
try the normal code
That is a Highcharts bug reported here: https://github.com/highcharts/highcharts/issues/11800
As a workaround you can set pointRange: 1:
plotOptions: {
column: {
pointRange: 1,
...
}
}
Live demo: http://jsfiddle.net/BlackLabel/Lzx3shrn/
API Reference: https://api.highcharts.com/highcharts/series.column.pointRange
Related
High everyone,
I am trying to get two things to happen. First, I want to create a custom tooltip for a columnrange-type series where the tooltip shows something like HIGH: 'this.point.high' and on a new line "LOW:" 'this.point.low'. Second, I would like these 'low' and 'high' values to populate a form field dynamically. For example, when a user drags the high value for the columnrange entry, I want this to dynamically update a number in the corresponding formfield that collects user input.
Here is a fiddle: https://jsfiddle.net/e9zqmy12/
Code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
var myChart;
Highcharts.setOptions({
plotOptions: {
series: {
animation: false
}
}
});
// draw chart
myChart = Highcharts.chart('container',
{
chart: {
type: "line",
events: {
click: function (e) {
// find the clicked values and the series
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
},
drag: function (e) {
var y = Math.round(e.yAxis[0].value),
x=12
series = this.series[3].data[12];
series.update({x, y, color: 'blue'});
}
}
},
title: {
text: "Forecasting History"
},
xAxis: {
type: 'category',
allowDecimals: true,
title: {
text: "Quarter"
},
plotBands: [{
color: 'rgba(204,153,255,0.2)', // Color value
from: 11.5, // Start of the plot band
to: 12.5, // End of the plot band
label: {
text: 'Forecast'
}
}]
},
yAxis: {
title: {
text: "Inflation (%)"
},
plotLines: [{
value: 0,
width: 2,
color: '#aaa',
zIndex: 10
}]
},
tooltip: {
style: {
color: 'black',
fontWeight: 'bold',
fontSize: 13
},
positioner: function () {
return { x: 80, y:0 };
},
shared: true,
headerFormat: '',
valueDecimals: 2,
shadow: false,
borderWidth: 2,
borderColor: '#000000',
shape: 'rect',
backgroundColor: 'rgba(255,255,255,0.8)'
},
series: [
{
name: 'Inflation',
data: [3.9,4.98,5.72,5.73,3.61,3.68,3.72,2.64,2.1,1.94,1.99,1.87,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Central Bank Forecast',
data: [2,3.47,4.2,4.62,4.51,3.079,3.13,3.15,2.43,2.17,1.7,2.17,null],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
},{
name: 'Your Forecast',
showInLegend: false,
data: [null,null,null,null,null,null,null,null,null,null,null,null,2],
tooltip: {
pointFormat: '{series.name}: <b>{point.y}%</b><br/>',
},
marker: {
radius: 2.5,
fillColor: 'red'
},
},{
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
}
}
},
name: 'Forecast Range',
color: 'rgba(255,0,0,.1)',
type: 'columnrange',
data: [[12,1,3]],
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: "+this.point.low + " HIGH:" +this.point.high;
}
},
dragDrop: {
draggableY: true,
groupBy: 'GroupId',
dragMinY: -10,
dragMaxY: 10,
dragPrecisionY: .01,
liveRedraw: false
},
}
],
});
It seems that your code was almost good except this callback pointFormatter callback - notice that this calls for point already, so this.point refers to undefined, it should be:
tooltip: {
pointFormatter: function() {
console.log(this);
return "LOW: " + this.low + " <br>HIGH:" + this.high;
}
},
Demo: https://jsfiddle.net/BlackLabel/vbo6j9em/
I want to create a dynamic chart that shows all bars in the same color except for the person, who looks at it (in this case: The person who is represented by Afrika, Amerika, etc. Do you have any idea how to do it (in an easy way)?
Thanks in advance!
Highcharts code from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
});
You can simply set color for the point in data:
Highcharts.chart('container', {
series: [{
type: 'bar',
data: [43934, {
y: 52503,
color: 'red'
}, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
If you want to change the color depending on some condition, you can use update method for point, for example in load event:
chart: {
events: {
load: function() {
Highcharts.each(this.series[0].points, function(p) {
if (p.y > 8) {
p.update({
color: 'red'
});
}
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/4ucx3skh/
API: https://api.highcharts.com/class-reference/Highcharts.Point#update
I'm using candlestick chart of HighChart-HighStock. I want to reduce the gap between candlesticks. It's not so bad when it's on a wide range zoom. But when I zoomed the chart a lot, the padding between candle makes me annoyed because they are too wide apart.
I tried setting pointPadding of plotOption&xAxis to 0, but nothing happened. How can I shrink this gap?
Zoomed chart - too wide gap between candlestick
Wide view chart - not so bad
Highcharts.stockChart('container', {
// title: { text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{
type: 'day',
count: 1,
text: '1d'
},
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
pointPadding: 0,
type: 'datetime',
}, {
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
plotOptions: {
candlestick: {
pointPadding: 0,
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
},
line: {
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
},
{
name: 'avg5',
type: 'line',
data: avg5Data,
color: '#FF0000',
},
{
name: 'avg10',
type: 'line',
data: avg10Data,
color: '#0C9B3A',
},
{
name: 'avg20',
type: 'line',
data: avg20Data,
color: '#FF9900',
},
{
name: 'avg60',
type: 'line',
data: avg60Data,
color: '#000000',
},
{
name: 'vol',
type: 'column',
data: moneyData,
yAxis: 1,
color: '#0944a3',
dataGrouping: {
enabled: false,
}
}
],
});
}
You need to set the series.pointPadding combined with series.groupPadding (equal to zero) to achieve the expected effect. Here is the example: https://jsfiddle.net/ahxrk5zq/
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
groupPadding: 0,
pointPadding: 0.04,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
API Reference:
https://api.highcharts.com/highstock/series.candlestick.pointPadding
https://api.highcharts.com/highstock/series.candlestick.groupPadding
I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/
I have what I'd consider a relatively simple Highcharts chart that I want to use shared crosshairs, but for some reason, I can't get my tool tip to work properly. Here is my javascript code:
var myChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
width: '675',
height: '400',
},
toolTip: {
crosshairs: {
width: 2,
color: 'gray',
dashStyle: 'shortdot'
},
shared: true,
enabled: true
},
xAxis: {
title: {
text: 'Date',
align: 'middle',
margin: 15,
},
reverse: false,
type: 'datetime',
opposite: false,
},
yAxis: [{
title: {
text: '% Change',
align: 'middle',
margin: 15,
},
reverse: false,
opposite: false,
},
{
title: {
text: 'actual amount',
align: 'middle',
margin: 15,
},
reverse: false,
opposite: true,
}, ],
title: {
text: 'Comparison Chart',
align: 'center',
margin: 15,
},
series: [{
pointInterval: 86400000,
name: 'Your actual amount',
type: 'spline',
yAxis: '1',
color: '#4572A7',
data: [[1291248000000, 4140],
[1291334400000, 342],
[1291420800000, 56],
[1291507200000, 58],
[1291593600000, 712],
]},
{
pointInterval: 86400000,
dashStyle: 'ShortDashDot',
name: 'Other\'s %',
type: 'spline',
yAxis: '0',
color: '#89A54E',
data: [[1291248000000, 47.02],
[1291334400000, -28.68],
[1291420800000, -59.98],
[1291507200000, 182.14],
[1291593600000, -12.81],
]},
{
pointInterval: 86400000,
dashStyle: 'ShortDash',
name: 'Your %',
type: 'spline',
yAxis: '0',
color: '#AA4643',
data: [[1291248000000, 246.73],
[1291334400000, -91.74],
[1291420800000, -83.63],
[1291507200000, 3.57],
[1291593600000, 1127.59],
]},
],
});
The only thing I spotted was that in the JSON above you've put toolTip whereas in the highchart examples it's tooltip (all lower case).