• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: 'bar',
                tooltip: {
                    border: 'none',
                    "z-index": 1,
                    htmlMode: true,
                    "sticky": true,
                    "timeout": 55000,
                    "font-family": "Helvetica Neue, Helvetica, Arial, sans-serif",
                    text: "<div style='border: 1px solid black; z-index:999999;'><span>Tooltip text goes here</span></br></br></br><input onclick='llcooljay()' id='check' type='checkbox'>Click me for some action</div>",
                    "border-radius": "4px",
                },
                series: [{
                    values: [35, 42, 67, 89, 25, 34, 67, 85]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                width: '100%'
            });
    
            window.llcooljay = function() {
                if (document.getElementById("check").checked === true) {
                    alert("HTML Tooltips! We made it!");
                }
            }
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myConfig = {
     	type: 'bar',
     	 tooltip: {
                            border: 'none',
                            "z-index":1,
                            htmlMode: true,
                            "sticky": true,
                            "timeout": 55000,
                            "font-family": "Helvetica Neue, Helvetica, Arial, sans-serif",
                            text: "<div style='border: 1px solid black; z-index:999999;'><span>Tooltip text goes here</span></br></br></br><input onclick='llcooljay()' id='check' type='checkbox'>Click me for some action</div>",
                            "border-radius": "4px",
                        },
    	series: [
    		{
    			values: [35,42,67,89,25,34,67,85]
    		}
    	]
    };
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });
    
    window.llcooljay = function() {
      if (document.getElementById("check").checked === true) {
        alert("HTML Tooltips! We made it!");
      }
    }