Add Scatter plot to stock chart

[shishima123]

Hello

When I try to add Graphics to the stock chart, it works. However, when zooming in on the chart, the lines outside the display area do not disappear; they are visible on both the left and right edges.

This demo works well, but it seems to have an issue with the stock chart.

Amcharts Demo

My JSFiddle

Additionally, is there a way to get the column width? I want the width of drawRect to be the same as the column width. Currently, it does not change when zooming in.

[tranmanhhungdn1201]

I got the same..hic

[zeroin]

Here is how I'd do it:

var canvasBullets = heatmapSeries.children.push(am5.Graphics.new(root, {}))
canvasBullets.set('draw', (display) => {

  var baseDuration = dateAxis.baseDuration();
  var position0 = dateAxis.valueToPosition(0);
  var position1 = dateAxis.valueToPosition(baseDuration);
  var cellWidth = dateAxis.get("renderer").positionToCoordinate(position1) - dateAxis.get("renderer").positionToCoordinate(position0);  

  // loop through all data items  

  for(let i = heatmapSeries.startIndex(); i < heatmapSeries.endIndex(); i++) {

    // set fill style from data context    
    var dataItem = heatmapSeries.dataItems[i];
    var dataContext = dataItem.dataContext
    if (dataContext) {
      const point = dataItem.get('point')
      if (point) {
        display.beginPath()
        display.beginFill(dataContext.strokeSettings.fill, dataContext.strokeSettings.fillOpacity)
        display.drawRect(point.x + cellWidth / 2, point.y, cellWidth, 1)
        display.endFill()
      }
    }
  }
})

I loop only through data items which are visible, as we do not calculate points of other items.

[shishima123]

Thank you You saved my day

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.