CanvasJS Customization

CanvasJS is a standalone HTML and JavaScript based library which allows you to create customized charts/Graphs very easily. To read more about this library please click here.

In this article we will discuss about latest markers added in CanvasJS, how to use them and a new marker customization that our team did for line markers. We are grateful to Anjali and Sunil from Canvas.js developer team that they permitted us in making changes in their library files.

Unfilled circle

In the older version of CanvasJS there were filled marker types only, in latest version it also allows us to add unfilled markers like circle, square. To create such markers you only have to set following three properties:

markerColor: "transparent",
markerBorderColor: "red",
markerBorderThickness: 1,

Example:

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
  {
  	title:{
    	text: "Un-filled Circle" 
  	},
 
  	data: [
  	{    	
    	type: "scatter",
        markerType: "circle",
        markerSize:5,
        markerColor: "transparent",
        markerBorderColor: "red",
        markerBorderThickness: 1,
        showInLegend: "true",
        legendText:"Un-filled Cirlce",
    	dataPoints: [
    	{ x: 10, y: 21 },
    	{ x: 20, y: 25 },
    	{ x: 30, y: 50},
    	{ x: 40, y: 65},
    	{ x: 50, y: 95},
    	{ x: 60, y: 68},
    	{ x: 70, y: 28},
    	{ x: 80, y: 34},
    	{ x: 90, y: 26}
    	]
  	}	
  	]
  });
 
chart.render();
}

Open in plunker

Output:

Line Marker Type:

Current version of CanvasJS allows us to create charts with different pre-defined marker types including circle, square, cross and triangle. Recently, we had a requirement to have vertically straight line marker types. For this we got in touch with the CanvasJS support team; although they didn't have time to make these changes for us, they allowed us to make changes in their JavaScript code and we are really grateful for their support.

To create line maker type you will add given code in end of RenderHelper function in CanvasJS file.

else if (markerType === "line") {
 
              ctx.beginPath();
            	ctx.moveTo(x, y - markerSize / 2);
            	ctx.lineTo(x, y + markerSize / 2);
                ctx.closePath();
 
            	if (markerColor)
                	ctx.fill();
 
            	if (markerBorderThickness) {
 
                	if (!markerBorderColor) {
                    	alpha = ctx.globalAlpha;
                        ctx.globalAlpha = .15;
                        ctx.strokeStyle = "black";
                        ctx.stroke();
                        ctx.globalAlpha = alpha;
                	} else
                        ctx.stroke();
 
            	}
                ctx.beginPath();
         	}

Now to use this in your code, simply set markerType to "line" at the time of initialization.

Example:

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",
  {
  	title:{
    	text: "Line Marker" 
  	},
 
  	data: [
  	{    	
    	type: "scatter",
            markerType: "line",
            markerSize:16,
            markerColor:"black",
            markerBorderColor: "black",
            markerBorderThickness: 1,
            showInLegend: "true",
 
            legendText:"Line Marker",
            legendMarkerType:"line",
    	dataPoints: [
    	{ x: 10, y: 21 },
    	{ x: 20, y: 25 },
    	{ x: 30, y: 50},
    	{ x: 40, y: 65},
    	{ x: 50, y: 95},
    	{ x: 60, y: 68},
    	{ x: 70, y: 28},
    	{ x: 80, y: 34},
    	{ x: 90, y: 26}
    	]
  	}	
  	]
  });
 
chart.render();
}

Open in plunker

Output:

We hope that this article has given you a basic idea of using markers in AngularJS and also a simple way to override the marker types and add one of your own. If you have any queries or suggestions, please feel free to share in the comments section.