JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<div>
<canvas id="chartCanvas"></canvas>
</div>
JavaScript
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var config = {
'type': 'line',
'data': {
'datasets': [{
'yAxisID': 'y-axis-1',
'borderColor': '#ff0000',
'fill': false,
'data': [
{x: 0, y: 0},
{x: 5, y: 10},
{x: 10, y: 5}
]
}, {
'yAxisID': 'y-axis-2',
'borderColor': '#ffff00',
'fill': false,
'data': [
{x: 0, y: 5},
{x: 3, y: 2},
{x: 10, y: 7}
]
}]
},
'options': {
'legend': {'display': false},
'scales': {
'xAxes': [{
'id': 'x-axis-1',
'type': 'linear',
'position': 'bottom',
'scaleLabel': {
'display': false
}
}],
'yAxes': [{
'id': 'y-axis-1',
'type': 'linear',
'position': 'left',
'scaleLabel': {
'display': true,
'labelString': 'My Left Label',
'fontSize': 11
}
}, {
'id': 'y-axis-2',
'type': 'linear',
'position': 'right',
'scaleLabel': {
'display': true,
'labelString': 'My Right Label',
'fontSize': 11
}
},
]
}
}
};
var scatterChart = new Chart(ctx, config);