hyukmin
Posts: 3
Joined: Fri Feb 17, 2023 2:31 am

How can I move the highchart stock sma plot to the left x-axis?

Hello,

I made moving average plot for 3 month with monthly line data. when I used sma option, the start xaxis is 3 not 2. how can i move x axis for sma plot to left?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How can I move the highchart stock sma plot to the left x-axis?

Welcome to our forum and thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on for ex. jsFiddle?

Best regards
Jakub
hyukmin
Posts: 3
Joined: Fri Feb 17, 2023 2:31 am

Re: How can I move the highchart stock sma plot to the left x-axis?

can I reproduce it like this?

Highcharts.chart('container', {
chart: {
type: 'area',
width : 1500,
height : 300,
backgroundColor: '#F8F9F9',
zoomType: 'x',
borderWidth: 1,
borderColor : 'black',
borderRadius : 30
},
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
horizontalAlign: 'left',
x: -30,
y: 10,
floating: true,
borderWidth: 1,
backgroundColor:Highcharts.defaultOptions.legend.backgroundColor ,
itemStyle: {
fontWeight:'bold',
fontSize : '15px'
}
},
mapNavigation: {
enabled: true
},
tooltip: {
crosshairs: true,
shared: true
},
title: {
style: {
'font-weight': 'bold',
fontSize: '25px'
},
text: 'Title'
},
subtitle: {
style: {
'font-weight': 'bold',
fontSize: '16px' }
},
xAxis:{
type: 'datetime',
labels : {
style: {
'font-weight': 'bold',
fontSize: '16px' }
},
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
},
yAxis: {
title: {
text: '(m/s)',
style: {
'font-weight': 'bold',
fontSize: '16px' }
},
labels : {
style: {
'font-weight': 'bold',
fontSize: '16px' }
},

},
plotOptions: {
line: {
states: {
hover: {
lineWidth: 3
}
},
threshold: null
},
area: {
states: {
color : 'rgba(255,0,0,0.9)'
}
}
},
series: [{
name: 'ECS',
id: 'ecs',
data: [10,20,30,25,40,16,30,28,16,42,15,16,10,14],
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}, {
name : 'moving means(3 months)',
type :'sma',
linkedTo:'ecs',
params: {
period: 3,
},
color: 'red',
showInLegend: true,
marker: {
enabled: false
}
}
]});
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How can I move the highchart stock sma plot to the left x-axis?

Hello again,

Now I get what you are asking for but I'm not sure if I understand your question well.
Just to clarify, SMA with period: n (in our case 3), calculates the average from the current point and (n-1) previous ones.
So for the 3rd point, the average is calculated from 1st, 2nd and 3rd and displayed on the 3rd point.

I assume you want to have the first average displayed on the 2nd point but I think it will be unintuitive for the user.

The point is, how do you want to calculate the SMA starting on the 2nd point when the period equals: 3?

Best regards
Jakub
hyukmin
Posts: 3
Joined: Fri Feb 17, 2023 2:31 am

Re: How can I move the highchart stock sma plot to the left x-axis?

thank you for reply,

we want to display first average(for 3) value on 2nd point.

I understand your concern that It can be unintuitive for the users.

but in some case, I thick it is necessary .

best regards,
hyukmin
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: How can I move the highchart stock sma plot to the left x-axis?

Hey,

There is no way to display SMA for the 2nd point but i created a custom solution for you, by simply adding a new series which counts the average of the points from the previous one.

Demo: https://jsfiddle.net/BlackLabel/rqavw8bf/

I hope you will find it useful

Best regards
Jakub

Return to “Highcharts Stock”