0
215
Views¿Cómo crear un gráfico Chartjs de burbujas de una sola línea?
Quiero crear este gráfico: 
Estoy pensando que necesito un gráfico de burbujas para obtener las burbujas de diferentes tamaños, pero no sé cómo obtener una sola línea. Intenté usar un diagrama de dispersión pero nuevamente no sé cómo obtener una sola línea:
¿Qué gráfico sería mejor para recrear este gráfico?
·
Juan Pablo Isaza
1 answers
Answer question0
Puede hacer que los colores sean transparentes de todas las demás líneas y hacer que el gráfico sea pequeño con css así:
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