Scatter Plot Overwriting my Heatmap?

plotly.js
1

Hi All, I asked a question a few days ago on how to be able to add plot points - one of the ways mentioned was to add a heatmap. I’ve added the heatmap to my diagram, however, I can’t have both the heatmap and a scatter plot. If I include the scatter plot in the data array the diagram will only show the scatter plot. Here’s what I’m doing -

Scatter Plot Code:

this.breakPointData = {
x: [45, 97.911409339465635, 133.18568223244273, 222.10782989757635, 355.49105139527671, 2047],
y: [1, 19.800805339403475, 48.002013348508683, 125.62625834281795, 177.37575500569076, 255],
type: ‘scatter’,

            marker: {
                color: 'black',
            },
            name: "Break Point"
        };

HeatMap Data:

this.myHeatMap = [{
x: [500, 1000, 1500, 2000, 2500],
y: [100, 200, 300, 400, 500],
z: [[0,0,0,0,0], [0,0,60,40,20], [0,60,10,15,40], [60,5,0,0,0], [45,0,20,30,0]],
type: ‘heatmap’
}];

self.myBreakPointEditor = Plotly.newPlot(document.getElementById(‘graphDisplay’), [self.myHeatMap, self.breakPointData], self.myLayout, {responsive: true});

Thank you for the help!!