Home forums Using CanvasJS Title and subtitles not showing Reply To: Title and subtitles not showing

#13995

cshickman
Member

Here is a link to the image: http://imgur.com/kj1jonc

What I see

And here’s what is actually getting rendered when I look at it with IE’s debugger:

<!DOCTYPE html>
<html><head>
  <script type="text/javascript">
      window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer",
    {
        interactivityEnabled: false,
        backgroundColor: "transparent",
        title:{
            text: "Test",
            fontColor: "black"
        },
        subtitles: [
		{
		    text: "7",
		    verticalAlign: "center",
		    horizontalAlign: "center",
		    fontFamily: "tahoma",
		    fontSize: "16",
            fontColor: "black"
		}
		],
        creditText: false,
        data: [
      {
          type: "doughnut",
          startAngle: 270,
          dataPoints: [
         { y: 7, color: "#00a04a" },
         { y: 3, color: "#fdc02b" }
       ]
      }
     ]
    });
          debugger;
          chart.render();
      }
  </script>
  <script src="../../Scripts/Dashboard/canvasjs.min.js" type="text/javascript"></script>
</head>
  <body>
    <div id="chartContainer" style="width: 300px; height: 300px;"><div class="canvasjs-chart-container" style="text-align: left; position: relative; cursor: auto;"><canvas height="300" class="canvasjs-chart-canvas" style="position: absolute;"></canvas><canvas height="300" class="canvasjs-chart-canvas" style="position: absolute;"></canvas><div class="canvasjs-chart-tooltip" style="border-radius: 5px; height: auto; display: none; position: absolute; z-index: 1000; box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.1);"><div style="background: rgba(255, 255, 255, 0.9); margin: 0px; padding: 5px; border-radius: 5px; border: 2px solid gray; border-image: none; width: auto; height: auto; text-align: left; color: rgb(0, 0, 0); text-indent: 0px; font-family: Calibri, Arial, Georgia, serif; font-size: 14px; font-style: italic; font-weight: normal; white-space: nowrap; min-width: 50px; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none;"> Sample Tooltip</div></div><a tabindex="-1" class="canvasjs-chart-credit" style="margin: 0px; top: 286px; right: 2px; color: white; font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif; font-size: 11px; text-decoration: none; position: absolute;" href="https://canvasjs.com/" target="_blank">CanvasJS.com</a></div></div>
  
 <span style="margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 0px; top: -20000px; line-height: normal; font-family: Calibri, Optima, Candara, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; display: none; white-space: pre; position: absolute;">Mpgyi</span></body></html>