chart: {
renderTo: 'chart-selection',
backgroundColor: null,
type: 'scatter'
},
title: {
text: txt + ' (' + title + ')'
},
plotOptions: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: title
},
height: 200,
lineWidth: 2
},
series: [{
color: 'rgba(100, 100, 200, .5)',
data: datax
}]
datax = [{x:1381942800000,y:23.000,price:26.00,change:0.00},{x:1382029200000,y:45.000,price:23.000,change:0.00}];
this code not show the tooltip
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
The tooltip property is not meant to be directly under plotOptions, but inside the series(or scatter) sub property of the plotOptions
Any of the following changes should work
plotOptions.series.tooltip
plotOptions: {
series: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}
}
plotOptions.scatter.tooltip
plotOptions: {
scatter: {
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}
}
series[i].tooltip
series: [{
data: datax,
tooltip: {
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
}]
@jsFiddle
You need to use tooltip in general cofnigruation so you can remove plotOptions, and leave tooltip object like this:
xAxis: {
},
tooltip:{
crosshairs: true,
headerFormat: '<b>{point.x}</b>',
pointFormat: '<br /><b>Volumn : {point.y}</b><br/>Price : {point.price}<br/>Change : {point.change}'
}
I was in the same situation and what I missed was a config call on my index.js file which is
Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
//series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function () {
}
},
animation: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
},
tooltip: {
yDecimals: 2 // If you want to add 2 decimals
}
,
colors: ['rgb(124, 181, 236)']
});
And finally I found this after 2 days :) ...
I am really sorry to make here busy about this stupid issue .After I deleted this config call on my index.js all my charts' tooltips are fixed .
I hope I can help anybody having the same problem .
