I'm new to all this, so much to learn.
I'm working on a simple web site, (nginx + nwsgi + python flask), I calculate my own data in python, then show the data in web page with help of highcharts stock.
Problem is, I can drag candle sticks left and right with mouse in windows browser, like a normal stock chart. Is it called pan? But if I visit in mobile browser (tried on multiple browsers in android, and safari in iphone), touch and drag won't move it. Even, in android, the focus seems to be on the whole page, so dragging left would get back to previous page, etc.
I've tried disabling tooltip, does not help. And in windows browser, tooltip does not disturb the mouse dragging, so it should be none relevant.
Could anybody please enlighten me ?
Here's part of the code in my index.html:
Code: Select all
function plotCharts(chartdata, volume) {
Highcharts.stockChart('container', {
navigation: {
bindings: {
rect: {
annotationsOptions: {
shapeOptions: {
fill: 'rgba(255, 0, 0, 0.8)'
}
}
}
},
annotationsOptions: {
typeOptions: {
line: {
stroke: 'rgba(255, 0, 0, 1)',
strokeWidth: 10
}
}
}
},
chart: {
panning: true,
panKey: 'shift', // Optional: specify a key for panning
events: {
load: function () {
const chart = this;
// Prevent default touch behavior
Highcharts.wrap(Highcharts.Pointer.prototype, 'touchMove', function (proceed, e) {
if (e.touches.length === 1) {
e.preventDefault(); // Prevent default scrolling
this.chart.pan(e); // Call pan method
} else {
proceed.call(this, e); // Proceed with default behavior for other gestures
}
});
}
}
},
yAxis: [{
labels: {
align: 'left',
formatter: function() {
return this.value; // Return the full value without abbreviation
}
},
height: '80%'
}, {
labels: {
align: 'left',
formatter: function() {
return this.value; // Return the full value without abbreviation
}
},
top: '80%',
height: '20%',
offset: 0
}],
tooltip: {
shared: true,
valueDecimals: 2, // Set decimal places for values
formatter: function() {
let s = `<b>${Highcharts.dateFormat('%A, %b %e, %Y', this.x)}</b><br/>`;
this.points.forEach(point => {
s += `${point.series.name}: ${point.y.toFixed(2)}<br/>`; // Display full price
});
return s;
}
},
series: [{
type: 'candlestick',
id: 'aapl-ohlc',
name: 'AAPL Stock Price',
data: chartdata,
color: 'red', // Color for bearish candles
upColor: 'green', // Color for bullish candles
dataGrouping: {
enabled: false // Disable data grouping
}
},{
type: 'column',
id: 'aapl-volume',
name: 'AAPL Volume',
data: volume,
dataGrouping: {
enabled: false // Disable data grouping
},
yAxis: 1
},{
type: 'sma',
linkedTo: 'aapl-ohlc',
params: {
period: 20
},
lineWidth: 1, // Change this value to set the desired line width
color: '#FF0000', // Change this value to set the desired color (e.g., red)
marker: { // Disable markers (dots)
enabled: false
}
}]
});
}And related CSS:
Code: Select all
#container {
touch-action: pan-x; /* Allow horizontal panning */
-ms-touch-action: pan-x; /* Microsoft support */
width: 100%; /* Ensure the chart takes the full width */
height: 400px; /* Set fixed height for the chart */
}