I basically want to make it so I can write some notes about the variable, so I want to split the chart in half/ have 2 axes: the left is the hbar and the right is the text corresponding to the hbar. I'm trying to figure out how to convert what I've had in matplotlib to mpld3 to incorporate more dynamic features with html. My matplotlib version is below.
Here is my html so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "garamond";
}
.chartMenu {
width: 100vw;
height: 40px;
background: #006600;
color: #ffffff;
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(54, 162, 235, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 700px;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(54, 162, 235, 1);
background: white;
}
</style>
</head>
<body>
<div class="chartMenu">
<h1>Chart</h1>
</div>
<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<script>
// setup
const data = {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
datasets: [{
label: 'Dataset 1',
data: [3, 1, 2, 1, 3, 2],
backgroundColor: [
"#006600"
],
borderColor: [
'#006600'
],
borderWidth: 1
},
{label: 'Dataset 2',
data: [1,1,1,1,1,1],
backgroundColor: ['#001100']}]
};
// config
const config = {
type: 'bar',
data,
options: {
indexAxis: 'y', // <-- MAKES CHART HBAR
scales: {
y: {position:"bottom",
beginAtZero: true
},
y2: {position:"top",
beginAtZero: true,
},
x: {position:"left",
beginAtZero: true,
reverse:true
},
x2: {position:"right"
}//, type:"linear", display: false} // display:fales makes right axis invisible
}
}
};
// render init block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
// Instantly assign Chart.js version
const chartVersion = document.getElementById('chartVersion');
chartVersion.innerText = Chart.version;
</script>
</body>
</html>