CHEP Pallets Monitoring And Report. Step 14 – Formatting chart 1

I will not go step by step, how I coded this chart, instead I will take the finished code and will brief what it does. In this post I will briefly explain the formatting of chart 1.

Formatting chart

The simplest change was to alter the format of the sample chart, I removed the suffix, yValueFormatString, changed titles, font sizes and theme. Changes done are marked green in the code below.

const renderChart1 = (colorArrayForChart1, stripLinesArray, dataPointsArray) => {
	
	CanvasJS.addColorSet("customColorSet1", colorArrayForChart1);
	 
	 let chart = new CanvasJS.Chart("chart1InnerContainer", {
	  theme: "light1",
	  animationEnabled: true,
	  exportEnabled: true,
	  colorSet: "customColorSet1",
	  title: {
		text: "Monthly pallet transfers by supplier",
		fontSize: 20,
	  },
	  axisX: {
		titleFontSize: 20,
		labelFontSize: 14,
		tickPlacement: "inside",
		stripLines: stripLinesArray,
		//removes all labels from axisX, later on they are added but as stripLines and with colors.
		labelFormatter: function(e) { return "";} 
	  },
	  axisY2: {
		title: "Pallet Quantity",
		titleFontSize: 14,
		labelFontSize: 14,
		includeZero: true,
	  },
	  data: [{
		type: "bar",
		indexLabelFontSize: 14,
		axisYType: "secondary",
		indexLabel: "{y}",
		dataPoints: dataPointsArray
	  }]
	});
	chart.render();
}

labelFormatter: function(e) { return “”;} removes all label values from y axis. I will explain why I have done this in some later post. So now all I got is an empty chart, with no labels, no values and no scales on neither x or y axis.

So now when the sample chart formatting is removed, time to add some data to the chart! Will demonstrate how I added bars to it in my next post.