```html
canvas {
mozuserselect: none;
webkituserselect: none;
msuserselect: none;
}
// Sample data
const labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
const priceData = [100, 120, 90, 110, 105, 130];
const volumeData = [20000, 18000, 22000, 25000, 21000, 24000];
// Creating the stock chart
const ctx = document.getElementById('stockChart').getContext('2d');
const stockChart = new Chart(ctx, {
type: 'bar',
{
labels: labels,
datasets: [{
label: 'Stock Price (USD)',
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
priceData,
yAxisID: 'priceaxis'
}, {
label: 'Volume',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
volumeData,
yAxisID: 'volumeaxis'
}]
},
options: {
scales: {
x: {
grid: {
display: false
}
},
priceAxis: {
id: 'priceaxis',
position: 'left',
grid: {
color: 'rgba(0, 0, 0, 0.1)'
},
ticks: {
callback: function (value, index, values) {
return '$' value;
}
}
},
volumeAxis: {
id: 'volumeaxis',
position: 'right',
grid: {
color: 'rgba(0, 0, 0, 0.1)'
},
ticks: {
callback: function (value, index, values) {
return value.toString().replace(/\B(?=(\d{3}) (?!\d))/g, ",");
}
}
}
}
}
});