I refer to http://jsfiddle.net/VJsjg/2/
$(function() {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
marginTop: 100, //avoid overlapping with navigator
spacingLeft: 0
},
scrollbar: {
enabled: false
},
navigator: {
enabled: true,
top: 40
},
rangeSelector: {
selected: 1
},
yAxis:[{
top:140,
height:150
}],
series: [{
id:'msft',
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addAxis({
id:'secondY',
top:300,
height:150
});
chart.addSeries({
id:'adbe',
yAxis:'secondY',
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
chart.addSeries(
// the event marker flags
{
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
text : 'Euro Contained by Channel Resistance'
}, {
x : Date.UTC(2011, 3, 28),
title : 'G',
text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
}],
onSeries : 'adbe',
shape : 'circlepin',
width : 16
});
});
});
Notice that the circlepin H and C are at the correct position of the bottom series. However, when we do a mouseover, the position of the tooltip followed the top series instead.
Has anyone encountered the same problem before?
I fixed my own problem by adding a
tooltip: {
followPointer:true
}
to the series.
Refer to http://jsfiddle.net/VGj9q/ for the solution.
Tooltip can follow yAxis by adding followingPointer:true, but in this way, the tooltip shape became 'square', not 'callout'.
I think this is a bug of highcharts, some similar issues can be found on github. But seems they didn't fix it for 'flag' series.
Refer to http://jsfiddle.net/4jt9jxs1/2/ for this issue.
Highcharts.stockChart('container', {
chart: {
height: 600,
},
navigator: {
enabled: false
},
yAxis: [{
id: "1",
height: 200,
},{
id: "2",
top: 300,
height: 200,
}],
tooltip:{
shared: false
},
series: [{
name: 'USD to EUR',
id: 'dataseries',
data: usdeur,
yAxis: "1"
},{
name: 'USD to EUR1',
id: 's1',
data: usdeur,
yAxis:"2"
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'A',
text: 'Shape: "squarepin"'
}, {
x: Date.UTC(2011, 3, 28),
title: 'A',
text: 'Shape: "squarepin"'
}],
onSeries: 'dataseries',
shape: 'squarepin',
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2010, 2, 1),
text: 'Shape: "circlepin"'
}, {
x: Date.UTC(2010, 9, 1),
text: 'Shape: "circlepin"'
}],
shape: 'circlepin',
onSeries: 's1',
yAxis:"2",
title: 'B',
tooltip: {
followPointer: true,
},
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2012, 2, 10),
title: 'C',
text: 'Shape: "flag"'
}, {
x: Date.UTC(2013, 3, 11),
title: 'C',
text: 'Shape: "flag"'
}],
yAxis:"2",
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 's1',
width: 16,
style: { // text style
color: 'white'
},
states: {
hover: {
fillColor: '#395C84' // darker
}
}
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
Related
I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
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 trying to create a funnel visualization that would visualization the number of guests and also percent of prior visit for 3 categories of consumers: 1 Visit, 2 Visits, 3+ Visits.
Right now I have 2 labels for each category (sticking out to the right hand side) but I want 1 label for each category sticking out on the right hand side stating both the # of Guests and Percent of Prior Visit. I also want a box-shaped label for each block of the funnel so that when you hover over it it looks like:
[CATEGORY]
Percent of Prior Visit: [VALUE]
Guests: [VALUE]
Right now, the box-shaped label when I hover over the block just shows Percent of Prior visit. So I want the box to be fixed and the label to the right hand side to be just 1 per block. I hope this makes sense. How would I do something like this? Thanks in advance.
My code is at: https://jsfiddle.net/ug4rc6pn/150/
Using the style you tried with earlier makes this easier. That is, setting both value and percentage in the same series, like this:
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
...
]
}]
You can then format your datalabel like this:
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
...
}
And your tooltip like this:
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
Which gives you this:
Highcharts.chart('container', {
chart: {
type: 'funnel',
//Only for Pie Charts
options3d: {
enabled: false, // change to true to activate 3D
alpha: 40,
beta: 40,
depth: 100,
},
},
title: {
text: 'Guest Return Funnel'
},
plotOptions: {
funnel: {
depth: 100
},
series: {
events: {
legendItemClick: function() {
$.each(this.chart.series, function(i, serie) {
if (serie.visible)
serie.hide();
else
serie.show();
});
return false;
}
},
shadow: true,
allowPointSelect: true,
borderWidth: 18,
animation: {
duration: 400
},
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> <br/>{point.y:,.0f} ({point.yPercentage} %)',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true,
crop: false
},
center: ['50%', '50%'],
neckWidth: '40%',
neckHeight: '0%',
width: '65%',
height: '100%',
tooltip: {
headerFormat: '<span style="font-size: 10px"><b>{point.key}</b></span><br/>',
pointFormat: 'Percent of Prior Visit: {point.yPercentage} % <br/>Guests: {point.y:,.0f} '
}
}
},
legend: {
enabled: true
},
series: [{
name: 'Guests',
data: [{
y: 352000,
yPercentage: 100,
name: '1 Visit',
color: "#ff0000",
},
{
y: 88000,
yPercentage: 25,
name: '2 Visits',
color: "#FFA500",
},
{
y: 42000,
yPercentage: 48,
name: '3+ Visits',
color: "#32CD32"
}
]
}
]
});
/*
series: [{
name: 'Guests',
name2: 'Percent of Prior Visit',
data: [{
y:352000,
name: '1 Visit',
color: "#ff0000",
y2: 100,
name2: 'Percent of Prior Visit'
},
{
y: 88000,
name: '2 Visits',
color: "#FFA500",
y2: 25,
name2: 'Percent of Prior Visit',
},
{
y: 42000,
name: '3+ Visits',
color:"#32CD32",
y2: 48,
name2: 'Percent of Prior Visit'
}
]
}]
});
*/
<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/funnel.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: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JSFiddle working example: https://jsfiddle.net/ewolden/org6quk9/
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 a Highstock diagram such as below:
And I want to add some series to this diagram by addSeries function. But new diagram type is "line". In this case it's return error and does not draw as good as I want.
my code is:
$('.diagram').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
selected: 6,
inputEnabled: false,
buttonTheme: {
fill: 'none',
width: 60,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: 14,
},
},
buttons: [{
type: 'day',
count: 1,
text: '?? ???'
}, {
type: 'week',
count: 1,
text: '?? ????'
}, {
type: 'month',
count: 1,
text: '?? ???'
},{
type: 'month',
count: 3,
text: '?? ???'
}, {
type: 'ytd',
text: '??? ????'
}, {
type: 'year',
count: 1,
text: '?? ???'
}, {
type: 'all',
text: '???'
}]
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: '???? - ????'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '???'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: data[0].name,
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}],
plotOptions: {
candlestick: {
color: '#009933',
upColor: '#d14836',
lineColor:'#009933',
upLineColor:'#d14836',
}
},
});
and I call this function when I want to append new diagram:
function appendBollinger (newData) {
var chart = $('.diagram').highcharts();
chart.addSeries({
type: 'line',
data: newData
}, true, true);
}
Can you help me? Thnx.