0
225
ViewsHow to Create Single line bubble Chartjs chart?
I want to create this chart:
I'm thinking I need a bubble chart to get the different size bubbles but I don't know how to get a single line. I tried using an scatter plot but again I don't know how to get a single line:
Which chart would be best to recreate this chart?
·
Juan Pablo Isaza
1 answers
Answer question0
You can make the colors transparent of all other lines and make the chart small with css like so:
Chart.register(ChartDataLabels)
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 0,
r: 4
}, {
x: 3,
y: 0,
r: 8
}, {
x: 6,
y: 0,
r: 4
}],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
align: 'end',
color: 'purple',
formatter: (point, ctx) => (
((ctx.dataset.data.length - 1) === ctx.dataIndex) ? point.x : ''
)
},
legend: {
display: false
}
},
scales: {
x: {
grid: {
borderColor: 'transparent'
}
},
y: {
ticks: {
display: false
},
grid: {
color: (ctx) => (ctx.tick.value === 0 ? 'rgba(0,0,0,0.1)' : 'transparent')
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);canvas {
max-height: 70px
}<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
</body>
·
Juan Pablo Isaza
Report
Answer question