Chartjs-How to Create Single line bubble Chartjs chart?

by

1👍

✅

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>

Leave a comment