How to Migrate From Chart.js 1.x to 2.x

Now I’ll describe migration process and explain what we will achieve after this. If you never met Chart.js - it’s a simple, lightweight library which allows us to render beautiful charts using HTML5 Canvas. It’s free and opensource, so I’ll promote it a bit - you can check it’s page: http://www.chartjs.org/ .

The 1.x branch of Chart.js was beauty and stupid at the same time. I spent a lot of time to implement functionality like manual step calculation, extreme values calculation, pointers hiding, managing X and Y axis labels etc. But it was open source and was a pretty good option for my purposes.

Today I was surprised and found Chart.js 2 released. Since the first release chart.js developer has been improving his library and now we can see almost all weaknesses were resolved.

As maybe you know I have been working on http://hrivna.in.ua since March 2016 and already implemented few complicated charts, so I quickly decided to update chart.js to the newest version and throw out complicated logic which was solving
weaknesses of described one.

I was expecting from update (and got it):

• reduce the amount of project code
• change the representation of charts like it done in chart.js 2
  Unfortunately, API of the new version appeared mostly incompatible with the old chart.js. But you can solve it for 10 minutes for each chart. Interesting? Let’s try step by step:

Step 0:

Update chartjs itself. Sure :)

Step 1:
Pay attention on changed initiation process:

// GetChartDOM - just a wrapper for document.getElementById
this.element = getChartDOM('bank').getContext('2d');
this.chart = new Chart(this.element).Line(chartsData, {
	bezierCurve: false,
	scaleOverride: true,
	scaleStepWidth: stepWidth,
	scaleSteps: steps,
	scaleStartValue: min,
	responsive: true,
});

Don’t forget, your selected element should be a canvas.

Now we can’t use .Line method, it’s deprecated and initialization process changed. All options, datasets migrated to the constructor and placed into configuration object:

this.chartUsd = new Chart(this.element, {
	type: 'line',
	data: chartsData,
	options: {
		responsive: true,
		scales: {
			xAxes: [{
				position: "top",
				ticks: {
					autoSkip: false,
				}
			}]
		}
	}
});

As you can understand - options section has an object with a pretty different set of keys of parameters.

Parameters which depend on the metrical representation of the chart are hidden into ‘scales’ option. If you drawing a small chart - I suggest setting ticks.autoskip to ‘false’. Autoskip has absolutely unexpected behavior:

I don’t understand is it a bug or feature yet. :)

But for my opinion, the following example does more excepted one:

Step 2:

Take care about datasets. Sure, after step 1 your chart will work, but without any representation settings. I mean old datasets compatible only for data. So it can be easily solved.

Old dataset was similar to:

tempSets.usd.buy = {
	label: this.t('dashboard_buy_dollar'),
	fillColor: 'rgba(32,176,44,0.2)',
	strokeColor: generatedColor,
	pointColor: generatedColor,
	pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
	pointHighlightStroke: "rgba(220,220,220,1)",
	data: target.rates,
}

Now it’s changed to something like this:

tempSets.eur.sell = {
	label: this.t('dashboard_buy_dollar'),
	backgroundColor: 'rgba(32,176,44,0.2)',
	borderColor: generatedColor,
	pointHitRadius: 10,
	radius: 0,
	data: sets.eurSell,
}

Except added new attributes you can see those old ones also changed, now ‘stroke’ become ‘border’ and ‘fill’ become ‘background’. Seems like a step closer to people who doesn’t familiar with Canvas, but it makes your dataset incompatible. Just change attributes and it will work.

Step 3

Check the new functionality of updated version of Chart.js and enjoy! One of the most useful features of the new version which you can:

• Hide dots for each data point
• Setup radius for a dots
• Setup steps amount and step width without any custom calculations
• Round label values without custom callbacks
• Manage position of labels and their angle