AssetTitle_Column
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="container">
<div class="info">
<div class="sigma">
<img src="http://www.wrightslaw.com/blog/wp-content/plugins/wpdiscuz/assets/img/plugin-icon/icon_info.png" align="right" style="margin: 7px 0;" />
</div>
</div>
<div id="chart1" style=""></div>
</div>
CSS
.container {
width: 300px;
height: 300px;
background-color: #eceded;
position: relative;
}
.info {
width: 290px;
height: 30px;
}
.sigma {
display: none;
}
.container:hover .sigma{
display: block;
}
#chart1 {
cursor: pointer;
width: 275px;
height: 220px;
overflow: visible;
margin: 0 auto;
-webkit-box-shadow: 0px 1px 1px 1px rgba(171,172,172,1);
-moz-box-shadow: 0px 1px 1px 1px rgba(171,172,172,1);
box-shadow: 0px 1px 1px 1px rgba(171,172,172,1);
}
.highcharts-container {
position: inherit !important;
}
.highcharts-tooltip {
z-index: 9998;
}
.highcharts-tooltip span {
background-color: transparent;
border: 0;
color: black;
z-index:9999!important;
}
JavaScript
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column'
},
colors: ['#e6e6e6'],
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
tooltip: {
borderWidth: 0,
backgroundColor: "transparent",
borderRadius: 0,
shadow: false,
useHTML: true,
formatter: function () {
return '<div class="tooltop"> x: ' + this.x + '| y: ' + this.y + '</div>';
},
positioner: function () {
return { x: 5, y: 0 };
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0,
cursor: 'pointer',
states: {
hover: {
color: '#f37021'
}
},
useHTML: true,
formatter: function () {
return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>'; }
}
},
series: [{
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});