JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<br/>
<div id="chartContainer2" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Basic line Chart"
},
axisX: {
minimum: 0,
maximum: 350000.25,
labelAutoFit: false,
crosshair:{
enabled:true,
updated: crosshairHandler
}
},
data: [{
type:'line',
dataPoints: [
{ x: 8000, y: 71 },
{ x: 250000, y: 55},
]
}]
});
chart.render();
var chart2 = new CanvasJS.Chart("chartContainer2", {
title:{
text: "Basic rangebar Chart"
},
toolTip:{
shared:false
},
axisY: {
minimum: 0,
maximum: 350000.25,
labelAutoFit: false,
crosshair: {
enabled:true,
updated: crosshairHandler
}
},
data: [{
type: 'rangeBar',
toolTipContent: '<b>{label}</b>: {y_formatted[0]},{y_formatted[1]}<br>{data}',
dataPoints: [
{
label: 'test 0',
y: [0, 50000],
x: 0,
},
{
label: 'test 1',
y: [60000, 250000],
x: -1
},
{
label: 'test 1',
y: [280000, 320000],
x: -1
}
]
}]
});
chart2.render();
let charts = [chart, chart2];
function crosshairHandler(e){
for (var j = 0; j < charts.length; j++) {
if (charts[j] != e.chart) {
if (e.chart.plotInfo.axisPlacement == 'xySwapped') {
charts[j].axisX[0].crosshair.showAt(e.value);
} else {
if (charts[j].plotInfo.axisPlacement == 'xySwapped') {
charts[j].axisY[0].crosshair.showAt(e.value);
} else {
charts[j].axisX[0].crosshair.showAt(e.value);
}
}
}
}
}
function alignYAxes() {
var axisYBound = 0,
axisYChartIndex = 0;
for (var i = 0; i < charts.length; i++) {
if (charts[i].axisY.length == 0) {
continue;
}
if (charts[i].plotInfo.axisPlacement == 'xySwapped') {
if (charts[i].axisX[0].bounds.x2 > axisYBound) {
axisYBound = charts[i].axisX[0].bounds.x2;
axisYChartIndex = i;
}
} else {
if...