Confused how to make heatMap with angular and plotly Please help!

I am using angular and type script so I installed angular-plotly.js. However I am wondering if I really need to use that because I cant seem to find any tutorials on how to create heatMaps for that. I found the plotly.js tutorial and I did this:

import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-optimization-heat-map’,
template: <plotly-plot [data]="graph.data" [layout]="graph.layout" [useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}"> </plotly-plot>,
styleUrls: [’./optimization-heat-map.component.css’]
})
export class OptimizationHeatMapComponent implements OnInit {

constructor() { }

ngOnInit() {
}

public graph = {
data: [
{z: [[1, 20, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
x: [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’],
y: [‘Morning’, ‘Afternoon’, ‘Evening’],
type: ‘heatmap’}
],
layout: {autosize: true, title: ‘A Fancy Plot’}
};
}
But I end up getting a line graph or something not what the example looks like at https://plot.ly/javascript/heatmaps/
Not sure what to do I need to create a heat map for a project at work.

Any luck with this? I’m also having trouble with plotly’s heatmap. None of the examples work for me. Please help!