[cshickman]

Thank you sir!

[cshickman]

In regard to the indexLabelFontColor question, I’m talking about the actual axis labels for the bar that you can set with the labelColor property. Is there no way to have different colors for those?

https://canvasjs.com/docs/charts/chart-options/axisy/labelfontcolor/

They are all red in the example there. Any way to use different colors? Thanks.

[cshickman]

Thanks Vishwas. I could never get the margins to work like I wanted to, but I was able to do a work-around by giving the chart itself a fixed width rather than the container.

[cshickman]

Thank you Vishwas. I just set the axisX and axisY2 margins to -1 but it didn’t solve the problem. Any ideas?

var chart = {
        interactivityEnabled: false,
        animationEnabled: true,
        creditText: false,
        toolTip: {
            enabled: false
        },
        axisX: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -1
        },
        axisY2: {
            interval: 0,
            gridThickness: 0,
            tickLength: 0,
            tickThickness: 0,
            lineThickness: 0,
            labelFontSize: 0,
            tickLength: 0,
            margin: -1,
            stripLines: [
      {
          value: 50,
          thickness: 1,
          color: "red",
          showOnTop: true,
          label: "Data error",
          labelPlacement: "outside",
          labelFontSize: 12,
          labelBackgroundColor: "transparent",
          tickLength: 0
      }]
        },
        dataPointWidth: 16,
        dataPointMinWidth: 16,
        dataPointMaxWidth: 16,
        data: [
    {
        type: "stackedBar",
        axisYType: "secondary",
        indexLabelFontSize: 25,
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    },
    {
        type: "stackedBar",
        axisYType: "secondary",
        dataPoints: [
        { y: 50, color: "#e6e6e6" },
      ]
    }
  ]
    };

[cshickman]

Just in case you can’t see that, here’s a direct link to the image…

http://imgur.com/2K137Mk

[cshickman]

Sure! I would’ve done it earlier but it’s really difficult to use image share sites from my work network.

[cshickman]

Yes, that’s exactly it! So you can combine two different charts in one container? That’s awesome! I will use this jsfiddle when I am programming my chart.

Out of curiosity, is it also possible to mark a certain spot on a chart like this, such as a target number? For example, adding a splitline on a bar chart.

Thank you sir

[cshickman]

Thank you!!

[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…

[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?

[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, 11 months ago by cshickman.

[cshickman]

Okay. How should I go about doing that? Thanks

[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…

[cshickman]

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

[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>