CanvasJS Custom Tooltip

Example of the tooltip breaking

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.square {
    height: 10px;
    width: 10px;
    display: inline-block;
}

.time{
    width: 57px;
    display: inline-block;
    text-align: right;
}

.percent{
    width: 43px;
    display: inline-block;
    text-align: right;
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            theme: "light2",
            title: {
                text: "Title"
            },
            axisX: {
                valueFormatString: "DDDD",
                labelAngle: 30,
                interval: 1,
                intervalType: "day",
                crosshair: {
                    enabled: true,
                    snapToDataPoint: true
                }
            },
            axisY: {
                title: "Y Axis",
                crosshair: {
                    enabled: true
                }
            },
            toolTip: {
                shared: true,
                reversed: true,
                borderColor: "black",
            },
            legend: {
                cursor: "pointer",
                verticalAlign: "bottom",
                horizontalAlign: "left",
                itemclick: toogleDataSeries1,
                reversed: true
            },
            data: [{
                type: "stackedArea",
                xValueFormatString: "MMM DD HH:mm",
                showInLegend: true,
                name: "Bad",
                toolTipContent: "<div class='\"'square'\"' style='\"'background-color: {color}'\"'></div> <div class='\"'time'\"'>{y}m</div> " +
                "<div class='\"'percent'\"'>#percent%</div><br/>" + "<div class='\"'square'\"'></div> <div class='\"'time'\"'>#totalm</div > " +
                "<div class='\"'percent'\"'>100%</div><br/>",
                color: "#ff0000",
                dataPoints: [ { x: new Date(2018, 6, 11, 11, 0), y: 13 }, { x: new Date(2018, 6, 11, 12, 0), y: 10 }, { x: new Date(2018, 6, 11, 13, 0), y: 8 }, { x: new Date(2018, 6, 11, 14, 0), y: 42 }, { x: new Date(2018, 6, 11, 15, 0), y: 0 }, { x: new Date(2018, 6, 11, 16, 0), y: 0 }, { x: new Date(2018, 6, 11, 17, 0), y: 0 }, { x: new Date(2018, 6, 11, 18, 0), y: 0 }, { x: new Date(2018, 6, 11, 19, 0), y: 0 }, { x: new...