[ekaqu1028]

I finally figured it out… rangeChange on the stockChart doesn’t trigger, but rangeChange on the underline chart does, so had to register the handler on each chart as well.

stock chart event != chart event, so also had to normalize to get it working

on stockChart options

rangeChanged: function(e) {
// normalize to show StockChart
if (isUndefined(e.stockChart)) {
e.stockChart = self.lastChart
e.maximum = e.axisX[0].viewportMaximum
e.minimum = e.axisX[0].viewportMinimum
}
opts.onRangeChange(e) // real handler
},

then for each chart

for (var i = 0; i < options.charts.length; i++) {
options.charts[i].zoomEnabled = true
options.charts[i].rangeChanged = options.rangeChanged
}

[ekaqu1028]

Also, when i hit the arrow to undo the zoom the rangeChanged function triggers, so it only seems to not trigger on the actual zoom… I tried to repo from the examples on the site but wasn’t able to.

I also tried rangeChanging, but seems to have the same issue for me.

[ekaqu1028]

hmmm, y axis is off… graphing NVDA over the past 3m shows the min value of 500, but

document.getElementById(“chartContainer”).offsetTop + chart.charts[0].axisY[0].convertValueToPixel(510)

returns 713.6666666666666, which puts the div element off screen. When I manually place it the value should be 225. I also tried subtracting the other charts (volume + MACD) but the result is still off screen…

document.getElementById(“chartContainer”).offsetTop + chart.charts[0].axisY[0].convertValueToPixel(510) – chart.charts[1].height – chart.charts[2].height
553.6666666666666

any idea how to fix the y axis to point to the actual bottom of the chart?

• This reply was modified 3 years, 10 months ago by ekaqu1028.
• This reply was modified 3 years, 10 months ago by ekaqu1028.

[ekaqu1028]

Based off https://canvasjs.com/forums/topic/getting-x-y-of-data-point/ I think i figured out how

chart.charts[0].axisX[0].convertValueToPixel(chart.charts[0].options.axisX.stripLines[44].value) // returns negative if outside of view, positive when in the view
chart.charts[0].axisY[0].convertValueToPixel(0) // returns the bottom of the chart

will play around with this to see how far i make it

[ekaqu1028]

I am fine without mouseover events, but was wondering if I can get the offset of the label so i can add my own div to simulate this?

Another way of looking at it, is there a way to get the position of a single X axis point? If i know the X axis offset and the bottom of the chart, i can overlay my own thing.

[ekaqu1028]

Found a workaround to get this working

e.stockChart.options.rangeSelector.selectedRangeButtonIndex = e.index || 3
self.chart = new CanvasJS.StockChart(“graph-quotes”, e.stockChart.options);
self.chart.render();

After the JSFiddle was shown to work with 1y that gave me the idea that the range button isn’t being updated and stays stuck on 3m.. so i create a new chart, update the default button, then render… this seems to be working… but doesn’t answer why this wasn’t working before =(

[ekaqu1028]

Heh… i created a JSFiddle https://jsfiddle.net/qz4whveg/8/ trying to replicate (shrunk the data to 1w since jsfiddle had too much issues with that much data)… and it works fine there (click on 1y to see the correct shape). So it seems the issue is some how related to my range change function… which is just the following

` e.stockChart.options.charts[0].data = Charts.getRoRData({
minimum: e.minimum,
tables: [
{
name: self.histories[self.ref].name,
table: self.histories[self.ref]
},
{
name: “S&P 500”,
table: self.histories[SP500]
},
],
})
Charts.removeGaps(e.stockChart.options, {
interval: $scope.interval,
})
e.stockChart.render();`

[ekaqu1028]

Thanks, I got this working! The issue was the conditional in your example is designed for weekends, so had to change it to match minutes (if days do not match, take the last as millis + 1 and the latest as millis – 1); with that the lines now line up!

[ekaqu1028]

I tried doing the following, but now the day is shrunk to a single line…

scaleBreaks.push({
startValue: new Date(dataPoints[i – 1].x.getTime() + 1),
endValue: new Date(dataPoints[i].x.getTime() – 1),
});

scaleBreaks: {
spacing: 0,
lineThickness: 0,
customBreaks: scaleBreaks
}

I tried to avoid the double render, but the jsfiddle has two renders… was this imporant?

[ekaqu1028]

Thanks, i am trying this out but unable to get it to work, keep getting “canvasjs.stock.min.js:152 CanvasJS Error: Breaks 1189 and 1190 are overlapping.” console logs and the UI is unchanged. I am trying to change the start/end dates to see if i can fix this.