Hello, I have just begun using canvasjs. I tried creating a donut chart. The chart itself looks great, but the title and subtitles aren’t showing up at all. I tried creating a JSFiddle, but they worked there with no problems. It’s the exact same code, so I don’t understand. I am running in a Visual Studio solution off a plain .htm file with no other external files brought in (aka it’s not external CSS or anything). Here is the code: <!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="https://cdn.canvasjs.com/canvasjs.min.js" /> </head> <body> <div id="chartContainer" style="height: 300px; width: 300px"> </div> </body> </html> The donut chart shows up fine, but no text at all. Any ideas?? Thanks!

Update: I got it working. I re-downloaded the canvasjs.min.js file and replaced the one in my project. It worked after that. I have no idea why that worked, as I haven't edited the canvasjs.min.js file at all. But I suppose that all's well that ends well! How bizarre...

I tried it in Firefox too. Still no luck. THEN, I tried uploading the two files to a SharePoint site that I know is external from my company's network. Still no text. THEN, I tried running the file locally, both on my work computer and my personal laptop. No luck. THEN, I tried it on Google Chrome, IE, Firefox, and locally on my personal laptop. No luck. THEN, I tried running a hotspot off my phone to make sure it had nothing to do with being on my company's Wi-Fi. No luck. It just doesn't work! No matter what environment I'm using. Beginning to think that it can't be just me. Are we sure the trial version doesn't affect the text at all? I have submitted a request for my company to purchase the full license for canvasjs, but if I can't even get any text to appear, then how can I hope to do something much more complicated?

Okay, another new discovery. I was trying to isolate the problem to eliminate Visual Studio or any kind of debug mode as the culprit. I just attempted to upload canvasjs.min.js and my .htm file into a folder by itself on my SharePoint team site. Still the same result: no title or subtitle.

Okay. How should I go about doing that? Thanks

@cshickman, Thanks for the info. We followed the steps you have provided but found its working fine. Can you kindly share the sample project with the issue, so that we can look into it and help you out?

Title and subtitles not showing

This topic has 11 replies, 2 voices, and was last updated 7 years, 10 months ago by cshickman.

Viewing 12 posts - 1 through 12 (of 12 total)

January 13, 2017 at 12:59 am #13985
cshickman
Hello,

I have just begun using canvasjs. I tried creating a donut chart. The chart itself looks great, but the title and subtitles aren’t showing up at all.

I tried creating a JSFiddle, but they worked there with no problems. It’s the exact same code, so I don’t understand. I am running in a Visual Studio solution off a plain .htm file with no other external files brought in (aka it’s not external CSS or anything).

Here is the code:
```
<!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="https://cdn.canvasjs.com/canvasjs.min.js" />
</head>
  <body>
    <div id="chartContainer" style="height: 300px; width: 300px">
    </div>
  </body>
 </html>
```
The donut chart shows up fine, but no text at all. Any ideas?? Thanks!
January 13, 2017 at 9:41 am #13987

Vishwas R

@cshickman,

It seems to be working fine with every browser including Firefox, Chrome, Opera, IE, Visual Studio Internal Browser. Can you kindly provide us some more info like the OS and browser details in which you are facing this issue, so that we can look into it and help you out.

January 13, 2017 at 10:36 pm #13994

cshickman

Thanks Vishwas. Yeah, I got it to work in JSFiddle and everything too. My OS is Windows 7 Enterprise. Running on IE Edge out of Visual Studio 2010 (in debug mode). I’ve tried it on both *.htm and *.aspx files. I tried it on different chart types, and the title and subtitle attributes don’t show up no matter the chart type. There is no external CSS file linked that could be coming in to play; the code snippet above is the entirety of the file.

January 13, 2017 at 10:52 pm #13995
cshickman
Here is a link to the image: http://imgur.com/kj1jonc

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>
```
January 13, 2017 at 10:58 pm #13996

cshickman

Dunno why the image link didn’t work, but it’s the donut chart, just no text anywhere. Running out of localhost.

January 16, 2017 at 10:29 am #14001

Vishwas R

@cshickman,

We are unable to reproduce the issue at our end even in Edge in debug-mode.

Can you kindly share your browser version and steps to reproduce the issue?

—
Vishwas R

January 17, 2017 at 3:44 am #14005
cshickman
Here is what I did:

1. Open an instance of Visual Studio 2010.
2. Created an ASP.NET Empty Web Application.
3. Added an HTML page (I named it DonutTest.htm”)
4. Replaced the HTML file contents with:
```
<!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" }
       ]
      }
     ]
    });
          chart.render();
      }
  </script>
  <script src="canvasjs.min.js" type="text/javascript"></script>
</head>
  <body>
    <div id="chartContainer" style="height: 300px; width: 300px">
    </div>
  </body>
 </html>
```
4. Added an existing item to the project (canvasjs.min.js).
5. Started debugging.
6. I see the donut chart, but no text.

When I start debugging, the version of IE being emulated is Edge, according to the IE debugger. But the about window says Internet Explorer version 11.0.9600.18537CO. Update Versions 11.0.38.

I still see the “Trial Version” text however.

I see the same result if I use Debug>Start Without Debugging.

I also sent the project to one of my co-workers. He got the same result as I did.

If I use the debugger to see what is actually contained in the “chart” variable, I can see where the properties have been assigned in chart.options.subtitles[0] and chart.options.title. Does that sound right?

I work for a high-security government complex. Is it possible my network could be blocking a feature or something? It seems unlikely, but crazier things have happened…
January 17, 2017 at 10:11 am #14008

Vishwas R

@cshickman,

Thanks for the info. We followed the steps you have provided but found its working fine.

Can you kindly share the sample project with the issue, so that we can look into it and help you out?

January 17, 2017 at 7:04 pm #14015

cshickman

Okay. How should I go about doing that? Thanks

January 17, 2017 at 8:45 pm #14027
cshickman
Okay, another new discovery. I was trying to isolate the problem to eliminate Visual Studio or any kind of debug mode as the culprit. I just attempted to upload canvasjs.min.js and my .htm file into a folder by itself on my SharePoint team site. Still the same result: no title or subtitle.
- This reply was modified 7 years, 10 months ago by cshickman.
January 17, 2017 at 9:26 pm #14037

cshickman

I tried it in Firefox too. Still no luck.

THEN, I tried uploading the two files to a SharePoint site that I know is external from my company’s network. Still no text.

THEN, I tried running the file locally, both on my work computer and my personal laptop. No luck.

THEN, I tried it on Google Chrome, IE, Firefox, and locally on my personal laptop. No luck.

THEN, I tried running a hotspot off my phone to make sure it had nothing to do with being on my company’s Wi-Fi. No luck.

It just doesn’t work! No matter what environment I’m using.

Beginning to think that it can’t be just me. Are we sure the trial version doesn’t affect the text at all? I have submitted a request for my company to purchase the full license for canvasjs, but if I can’t even get any text to appear, then how can I hope to do something much more complicated?

January 17, 2017 at 9:40 pm #14039

cshickman

Update: I got it working. I re-downloaded the canvasjs.min.js file and replaced the one in my project. It worked after that. I have no idea why that worked, as I haven’t edited the canvasjs.min.js file at all. But I suppose that all’s well that ends well! How bizarre…