ZingChart tooltip issue when my stylesheet has title

I am doing a proof-of-concept to see if ZingCharts is a viable solution in our web application. I am trying to create a simple stacked bar chart. Everything works fine in my example until I add a title to my style tag, title="mystyle". I am using the title in the style tag as this models the situation in our full-blown application where we include a number of css files all titled with our custom page style.

Here is my example code...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
  .h1 {
    margin: 0 0 1px 0;
    padding: 5px 7px 7px 7px;
    font-size: 11px;
    font-weight: bold;
    background-color: #ceceb5;
    border-color:#ffffff #ffffff #998B74 #ffffff;
    border-width:0px 0px 2px 0px;
    border-style:solid solid ridge solid;
  }
  table.fullTable {
    width: 100%;
  }
  td.jsChartSection {
    text-align: center;
    border: 1px solid #888888;
    background-color: #EFEFEF;
    padding: 10px 20px 10px;
  }
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
    "type": "bar",
    "stacked":true,
    "stack-type":"normal",
    "backgroundColor":"#FFF0FF",
    "hoverMode":"node",
    "tooltip": {
        "htmlMode":false
    },
    "legend":{
        "align":"center",
        "vertical-align":"bottom"
    },
    "plotarea": {
        "width": '100%',
        "height": '100%',
        "margin": '20 20 50 70'
    },
    "scale-x":{
        "values":["2009","2010","2011","2012","2013", "2014"],
        "items-overlap":true,
        "item":{
            "font-angle":-45,
            "auto-align":true
        }
    },
    "scale-y":{
        "label":{
            "text":"# of Widgets"
        },
        "values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
    },
    "series": [
        { "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
        { "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
    ]
};
window.onload=function(){
zingchart.render({
id:'chartDiv',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
    <div class="h1">Chart Management with Zingcharts</div>
    <div class="h1">Another div element</div>
    <div class="h1">And another div element</div>
    <div class="h1">And yet another div element</div>
    <div class="databox">
        <table cellspacing="5" class="fullTable">
            <tr>
                <td class="jsChartSection">
                    <div>
                        <div id='chartDiv'></div>
                    </div>
                </td>
            </tr>
        </table>
    <!--  databox -->
    </div>
    <!-- Content -->
</body>
</html>

When I do this in this example it causes an issue with the following img element that is generated by ZingChart...

<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">

This element is placed in the top left-hand corner of my page, and the tooltips now behave strangely.

How can I get ZingChart to work correctly while still using my custom page style?

Thanks!

Place this in your <head> element:

<style title="zingchart"></style>

This will force ZingChart to inject its own styles into that element, preventing conflicts.

I'm on the ZingChart team, please let me know if you need anything else :)

Edit:

Apparently browsers implement the concept of "preferred" stylesheets, the idea being that if on one page you have:

<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">

...only the style from one CSS element will be used, the other will be ignored. The same happens with inline tags.

The problem is that ZingChart creates its own CSS rules dynamically, and injects a tag with title="zingchart". So, when in the HTML page there is another <style> or <link> with a different "title", one of them (most likely the ZingChart style) will be ignored.

We have removed the code which sets the "title" from our code, which will be available in our next public release. Meanwhile, you will need to remove the "title" attribute from your <style> element.

Recommended topics

Hot tags