<html>
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="graphDiv"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
  </script>
</body>
</html>

var trace1 = {
   x: ['.1', '.2'],
   y: ['.4', '.6'],
   // z: [[0.5, 0.75], [-0.5, 0.4]],
	z: [[NaN, NaN], [NaN, NaN]],
   type: 'heatmap',
   zmin: -1,
   zmax: 1,	
	showscale: false,   
	colorscale: [[0, '#ffffff'],[0.5, '#ff00ff'],[1, '#00ff00']],
	hoverinfo: 'none'
};

var data = [trace1];

var annotations = [
	{
		x: '.1',
		y: '.4',
		text: '-------------------',		
		showarrow: false
	},
	{
		x: '.1',
		y: '.6',
		text: '-------------------',		
		showarrow: false
	},
	{
		x: '.2',
		y: '.4',
		text: '-------------------',		
		showarrow: false
	},
	{
		x: '.2',
		y: '.6',
		text: '-------------------',		
		showarrow: false
	}
];

var layout = {
	title: 'Graph Title',	
	annotations: annotations,
	plot_bgcolor: '#979797'
};

Plotly.newPlot(graphDiv, data, layout);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.