グラフを表すために Highstock.js を使用しています。問題は、プロットが x 軸の実際の日付の少し右側に値を表示していることです。凡例の日付は、x 軸の日付と一致します。ただし、ズームすると、プロットはその日付の少し右側にあります。
フィドルを確認してください
$('#container').highcharts('StockChart', {
chart: {
//type: 'area',
},
title: {
text: "Weekly Managed Product Fund Flows",
margin:50
},
rangeSelector: {
selected: 0,
align: "left",
buttons: [
{
type: 'month',
count: 1,
text: '1m'},
{
type: 'month',
count: 3,
text: '3m'},
{
type: 'month',
count: 6,
text: '6m'},
]
},
navigator: {
height: 10
},
xAxis: {
type:'datetime',
maxZoom: 24 * 3600000,
alignTicks : false
},
yAxis:[{
title: {
text: 'Flow US$ mill'
}
}, {
title: {
text: 'AMZ'
},
labels: {
format: '{value}'
},
opposite: true
}],
exporting: {
enabled: false
},
credits: {
enabled: false
},
legend: {
align: "top",
layout: "horizontal",
enabled: true,
verticalAlign: "middle",
x:250,
y:-150
/*labelFormatter: function() {
return this.name + ' (T)';
}*/
},
plotOptions:{
series:{
stacking: 'normal'
},
line:{
marker: {
symbol:"circle",
enabled: true
}
}
},
series: [/*{
type: 'area',
name: 'Total Flows',
data: all,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},*/{
type: 'area',
name: 'Mutual Fund Flows',
data: mf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
}, {
type: 'area',
name: 'ETF Flows',
data: etf,
tooltip: {
valuePrefix: '$',
valueDecimals: 2
}
},
{
type: 'line',
name:'Alerian AMZ Index',
yAxis: 1,
data: AMZ_YTD,
tooltip: {
valueDecimals: 2
}
}]
});