graph - remove tooltip space between border and content highcharts -
i'm using highcharts genetating graphs, problem is, highcharts generating space between border , content of tooltip , labels of pie diagram visible between generated space. can has solving problem.
please check below example.
$(function () { var chart; $(document).ready(function () { chart = new highcharts.chart({ chart: { renderto: 'graf1', plotbackgroundcolor: null, plotborderwidth: null, plotshadow: false }, title: { margin: 40, text: 'podíl všech potřeb' }, tooltip: { borderwidth: 1, backgroundcolor: "rgba(255,255,255,0)", borderradius: 0, shadow: false, usehtml: true, percentagedecimals: 2, backgroundcolor: "rgba(255,255,255,1)", formatter: function () { return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + highcharts.numberformat(this.y).replace(",", " ") + ' kč [' + highcharts.numberformat(this.percentage, 2) + '%]</b></div>'; } }, plotoptions: { pie: { allowpointselect: true, cursor: 'pointer', datalabels: { zindex: 1, enabled: true, color: '#000000', connectorwidth: 2, usehtml: true, formatter: function () { return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>'; } } } }, series: [{ type: 'pie', name: 'potřeba', data: [ ['firefox', 45.0], ['ie', 26.8], { name: 'chrome', y: 12.8, sliced: true, selected: true }, ['safari', 8.5], ['opera', 6.2], ['others', 0.7] ] }] }); }); });
.label { z-index: 1!important; } .highcharts-tooltip span { background-color:white; border:1px solid green; opacity:1; z-index:9999!important; } .tooltip { padding:5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="graf1" style="width: 400px; height: 250px; float:left"></div>
tooltip space between order , content highcharts
svg tooltip elements can hidden through:
tooltip: { borderwidth: 0, backgroundcolor: "rgba(255,255,255,0)", shadow: false,
example: http://jsfiddle.net/x8lq0yr9/1/
this eliminate space between border , html content.
Comments
Post a Comment