This article is located on outdated, archived website. Please go to the new website to continue browsing. Thank you.

Open new website

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: .

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 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: = {
	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