Black Lives Matter. Please consider donating to Black Girls Code today.

Chart Not Interacting Correctly (Newbie Question)

Hello, I’m very new to Plotly and fairly new to JavaScript in general. (I mostly code in C.) I only recently discovered Plotly but I really like it so far!
I downloaded the JS file onto my work computer and stated playing with it there. I haven’t had any problems. I did the same thing on my home computer and I’m having some issues.

I’m starting with SPC charts. When I hover over a chart, I don’t get the cross-hair icon and it doesn’t show me any data from the plotted points. Instead, the graph grays-out a bit, and the menu that’s usually at the top is broken up strangely. The camera icon is in the upper-left, and the remaining icons seem to be in these “clone divs” below the original graph.

Here’s how it looks when it’s not hovered over:

Here’s what I get when I move the mouse over it:

Here’s the HTML. (The JS code was copied directly from one of the “line charts” examples from the Plotly Basics, except I think that I changed the ‘id’ to “spc” instead of “myDiv”.)

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>First Plotly!</TITLE>
<META charset="UTF-8">
<STYLE>
DIV	{
		width: 640px;
		height: 480px;
	}
BODY{
		background-color: rgb(100,100,100);
		color: rgb(0,20,20);
	}
</STYLE>
</HEAD>

<BODY>
	<H2>Chart!</H2>
	<DIV id="spc"></DIV>
	
<SCRIPT src="plotly-latest.min.js"></SCRIPT>
<SCRIPT>
	var trace1 = {
		x: [1, 2, 3, 4],
		y: [10, 15, 13, 17],
		mode: 'markers',
		marker: {
			color: 'rgb(219, 64, 82)',
		size: 12
		}
	};
		
	var trace2 = {
		x: [2, 3, 4, 5],
		y: [16, 5, 11, 9],
		mode: 'lines',
		line: {
			color: 'rgb(55, 128, 191)',
		width: 3
		}
	};
	
	var trace3 = {
		x: [1, 2, 3, 4],
		y: [12, 9, 15, 12],
		mode: 'lines+markers',
		marker: {
			color: 'rgb(128, 0, 128)',
			size: 8
		},
		line: {
			color: 'rgb(128, 0, 128)',
			width: 1
		}
	};

	var data = [trace1, trace2, trace3];

	var layout = {
	  title: 'Line and Scatter Styling'
	};

	Plotly.newPlot('spc', data, layout);
</SCRIPT>
</BODY>
</HTML>

It’s especially odd because both my work computer and home computer are running Windows 10 and Firefox. And when I go to the codepen.io examples, it works. I get the cross-hair icon, and the menu is in the upper-right.
Any idea what’s going wrong? TIA!

Hello @B-Plot! I’m happy to hear you like Plotly!

The problem in your example is that the CSS is not strict enough. The CSS directive DIV will style all the divs on the page (including the divs in the modebar). If you only want to style your figure, reaplce DIV with #spc in your <style> block and it should now work properly!

Cheers,
Antoine

2 Likes

That worked! Thank you very much!

1 Like