zidance's avatar

How to make a bubble chart using image as background with chartJS?

I am looking for solution to applied image on each bubble display. At the moment, it can only be displayed with background color.

I want attach each bubble with respective image url. Anyone have idea how to it can be done? Any solution to achieve?

<script>
  import { Bubble } from 'vue-chartjs'

  export default {
    extends: Bubble,
    data() {
      return {
        chartData: {
          datasets: [{
            label: 'Population Data',
            borderWidth: 1,
            borderColor: '#2554FF',
            backgroundColor: '#2554FF',
            data: [{
                x: 6,
                y: 3,
                r: 15
              }, {
                x: 3,
                y: 12,
                r: 4
              },
              {
                x: 5,
                y: 15,
                r: 10
              },
              {
                x: 3,
                y: 12,
                r: 8
              },
              {
                x: 4,
                y: 5,
                r: 20
              },
              {
                x: 2,
                y: 6,
                r: 3
              },
              {
                x: 4,
                y: 9,
                r: 11
              },
              {
                x: 5,
                y: 10,
                r: 6
              }
            ]
          }]
        },
        options: {
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted() {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

<template>
  <div>
    <h3>Bubble Chart Example in Vue</h3>
    <bubble-chart></bubble-chart>
  </div>
</template>

<script>
import BubbleChart from '@/components/BubbleChart'

export default {
  components: {
    BubbleChart
  }
}
</script>
0 likes
4 replies
furqanDev's avatar

First check whether the library you are using allow to perform such action or not.

zidance's avatar

@furqanDev Do you know any can make it? I am using chartjs and I can't find a real example for it.

furqanDev's avatar

@zidance What you eventually can do is add the fill option in the chart.

This is simple bubble chart.

var options = {
          series: [{
          name: 'Bubble1',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble2',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble3',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble4',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        }],
          chart: {
            height: 350,
            type: 'bubble',
        },
        dataLabels: {
            enabled: false
        },
        fill: {
            opacity: 0.8
        },
        title: {
            text: 'Simple Bubble Chart'
        },
        xaxis: {
            tickAmount: 12,
            type: 'category',
        },
        yaxis: {
            max: 70
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

This is with fill option.

var options = {
          series: [{
          name: 'Bubble1',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble2',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble3',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        },
        {
          name: 'Bubble4',
          data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
            min: 10,
            max: 60
          })
        }],
          chart: {
            height: 350,
            type: 'bubble',
        },
        dataLabels: {
            enabled: false
        },
        fill: {
  colors: undefined,
  opacity: 0.9,
  type: 'solid',
  gradient: {
      shade: 'dark',
      type: "horizontal",
      shadeIntensity: 0.5,
      gradientToColors: undefined,
      inverseColors: true,
      opacityFrom: 1,
      opacityTo: 1,
      stops: [0, 50, 100],
      colorStops: []
  },
  image: {
      src: [],
      width: undefined,
      height: undefined
  },
  pattern: {
      style: 'verticalLines',
      width: 6,
      height: 6,
      strokeWidth: 2,
  },
}
        title: {
            text: 'Simple Bubble Chart'
        },
        xaxis: {
            tickAmount: 12,
            type: 'category',
        },
        yaxis: {
            max: 70
        }
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();

Please or to participate in this conversation.