将半透明的div放在highcharts图上

Question

is it possible to put a div over a generated highcharts graph? As in, a div with a transparent background that will have text in it for purely aesthetic purposes.

Being able to select the chart isn't important -- just seeing it.

Answer 1

Doing what you want can be done in CSS alone.

As was mentioned in a comment, you want to have a relative container, and then absolute position the elements within it.

HTML

<div class="container">
    <canvas id="myCanvas"></canvas>
    <div class="overlayed"></div>
</div>

CSS

.container {
    width: 150px;
    height: 150px;
    position: relative;
}
div.overlayed, canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

I just used a sample canvas element to give an idea of where your chart would be.

Here's a JSFiddle

Answer 2

Add div positioned absolutely with higher z-index than Highcharts chart. See: http://jsfiddle.net/Ww5Tg/9/

<div class="over"></div>
<div id="container" style="height: 300px; width: 400px"></div>

And CSS:

.over {
    width: 400px;
    height: 300px;
    position: absolute;
    z-index: 100;
    border: 1px solid black;
    background-color: black;
    opacity: 0.2;    
}