JavaScript – Replacing circle elements with images? Response – Google Chart

I’m using Google Chart to show markers on the map. It only has simple circles. I want to use custom images and animations if possible.

    <Chart
      width={'100vw'}
      height={'100vh'}
      chartType="GeoChart"
      data={[
        ['Lat', 'Long', 'Name'],
        [0, 0, 'test'],
      ]}
      options={{
        region: 'US',
        displayMode: 'markers',
        colorAxis: { colors: ['green', 'blue'] },
        resolution: 'provinces',
        defaultColor: '#555',
        backgroundColor: '#444',
        datalessRegionColor: '#f8bbd0',
      }}
    />
circle::before {
  content: '';
  background-image: url('../images/man.svg');
  position: absolute;
  color: blue;
  width: 70px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  right: 0;
  bottom: 0;
}

I really don’t understand why it doesn’t work. Is this something that can’t be done with CSS?

Write a Comment

Your email address will not be published. Required fields are marked *