Search code examples
chartsaxiscanvasjs

axis border not shown in canvasjs line chart

I can't get the border/line of the axis to show up. I checked canvasjs.com but couldn't find anything about this in the documentation.

Any ideas?

JSiddle

enter image description here

The setting for this chart are given in the following code.

HTML

<div id="chartContainer" style="height: 360px; width: 360px;"></div>

JAVASCRIPT

        var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",


        toolTip: {
        shared: true
      },
        title:{
        text: "",  
      },
        axisX: {
        labelFontSize: 11,  
        labelFontColor: "black", 
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        interval: 10,
        minimum: 15,
        maximum: 95,
      },
        axisY: {
        labelFontSize: 11, 
        labelFontColor: "black",
        labelFontFamily: "calibri",
        labelFontWeight: "normal",
        gridThickness: 0,
        lineColor: "gray", 
        interval: 20,
        minimum: 170,
        maximum: 400,
      },

        data: [ 
            {   
                type: "line",
                //axisYType: "secondary",
                name: "Downloads",
                lineThickness: 2,
                //showInLegend: true,
                name: "downloads",
                markerType: "none",
                dataPoints: [
                { x: 46, y: 170 },
                { x: 40, y: 353 },
                { x: 47, y: 397 },
                { x: 47, y: 397 },
                { x: 57, y: 396 },
                { x: 92, y: 353 },
                { x: 70, y: 170 },
                ]
            },

            {        
                type: "line",
                markerType: "none",
                //showInLegend: true,
                lineThickness: 2,
                name: "visits",
                dataPoints: [
                { x: 39, y: 170 },
                { x: 35, y: 255 },
                { x: 27, y: 262 },
                { x: 17, y: 355 },
                { x: 25, y: 392 },
                { x: 57, y: 396 },
                { x: 92, y: 353 },
                { x: 70, y: 170 },
                ]
            },
            {        
                type: "line",
                //showInLegend: true,
                 markerType: "cross",
                name: "Unique Visits",
                lineThickness: 2,
                dataPoints: [
                { x: 60, y: 280 },
                ]
            },
            ],

        });

 chart.render();
Solution

  • ethannn,

    This seems like a bug in “theme2″. “theme1″ seems to be working fine.

    In “theme2″ you can workaround this issue by setting lineThickness as shown here.

    axisX:{
      lineThickness: 2
   },
axisY:{
      lineThickness: 2
   }