var chartColors = {
	red: 'rgb(255, 99, 132)',
	blue: 'rgb(54, 162, 235)'
};

var color = Chart.helpers.color;
var config = {
	type: 'bar',
	data: {
		datasets: [{
			type: 'line',
			yAxisID: 'temperature',
			backgroundColor: 'transparent',
			borderColor: chartColors.red,
			pointBackgroundColor: chartColors.red,
			tension: 0,
			fill: false
		}, {
			yAxisID: 'precipitation',
			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
			borderColor: 'transparent'
		}]
	},
	plugins: [ChartDataSource],
	options: {
		title: {
			display: true,
			text: 'JSON data source (datapoint) sample'
		},
		scales: {
			xAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Month'
				}
			}],
			yAxes: [{
				id: 'temperature',
				gridLines: {
					drawOnChartArea: false
				},
				scaleLabel: {
					display: true,
					labelString: 'Temperature (°C)'
				}
			}, {
				id: 'precipitation',
				position: 'right',
				gridLines: {
					drawOnChartArea: false
				},
				scaleLabel: {
					display: true,
					labelString: 'Precipitation (mm)'
				}
			}]
		},
		plugins: {
			datasource: {
				type: 'json',
				url: 'sample-datapoint.json',
				rowMapping: 'datapoint',
				datapointLabelMapping: {
					_dataset: 'dataset',
					_index: 'month',
					x: 'month',
					y: 'value'
				},
				data: '*.*'
			}
		}
	}
};

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
};
[{
	"dataset": "Temperature",
	"month": "January",
	"value": 7
}, {
	"dataset": "Temperature",
	"month": "February",
	"value": 7
}, {
	"dataset": "Temperature",
	"month": "March",
	"value": 10
}, {
	"dataset": "Temperature",
	"month": "April",
	"value": 15
}, {
	"dataset": "Temperature",
	"month": "May",
	"value": 20
}, {
	"dataset": "Temperature",
	"month": "June",
	"value": 23
}, {
	"dataset": "Temperature",
	"month": "July",
	"value": 26
}, {
	"dataset": "Precipitation",
	"month": "January",
	"value": 8.1
}, {
	"dataset": "Precipitation",
	"month": "February",
	"value": 14.9
}, {
	"dataset": "Precipitation",
	"month": "March",
	"value": 41.0
}, {
	"dataset": "Precipitation",
	"month": "April",
	"value": 31.4
}, {
	"dataset": "Precipitation",
	"month": "May",
	"value": 42.6
}, {
	"dataset": "Precipitation",
	"month": "June",
	"value": 57.5
}, {
	"dataset": "Precipitation",
	"month": "July",
	"value": 36.0
}]
<head>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
</head>
<body>
	<div>
		<canvas id="myChart"></canvas>
	</div>
</body>