Bubble Chart Custom Markers

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartData = [{
        values: [
          [1, 15, 8],
          [2, 4, 2],
          [5, 10, 1],
          [6, 3, 3],
          [3, 6, 2],
          [7, 15, 1],
          [8, 2, 4],
          [1, 6, 6],
          [2, 12, 3],
          [4, 4, 4],
          [5, 1, 5],
          [6, 0, 1],
          [8, 16, 2]
        ],
        hoverMarker: {
          backgroundColor: '#d2d9af #b2bf77',
          borderColor: '#a1ae64',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#b2bf77 #829550',
          borderColor: '#728440',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      },
      {
        values: [
          [3, 5, 1],
          [2, 17, 2],
          [8, 8, 3],
          [4, 6, 2],
          [7, 3, 5],
          [2, 12, 1],
          [1, 0, 3],
          [6, 2, 2],
          [4, 12, 7],
          [6, 14, 2],
          [2, 6, 2]
        ],
        hoverMarker: {
          backgroundColor: '#c3c2e3 #9d9ad1',
          borderColor: '#8a87c2',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#9d9ad1 #615faa',
          borderColor: '#514f99',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      },
      {
        values: [
          [3, 6, 5],
          [6, 8, 8],
          [8, 12, 5],
          [3, 2, 3],
          [5, 5, 2],
          [7, 10, 2],
          [2, 1, 1],
          [7, 4, 1],
          [6, 17, 4],
          [1, 9, 3],
          [5, 14, 1]
        ],
        hoverMarker: {
          backgroundColor: '#f9f0c8 #ecd466',
          borderColor: '#d5bc4c',
          borderWidth: '1px'
        },
        marker: {
          backgroundColor: '#ecd466 #e0b140',
          borderColor: '#cb9f34',
          borderWidth: '1px',
          fillType: 'linear',
          shadow: true
        }
      }
    ];

    let chartConfig = {
      type: 'bubble',
      title: {
        text: 'Bubble Legend',
      },
      bubbleLegend: {
        layout: 'v',
        marker: {},
        connector: {},
        item: {}
      },
      plotarea: {
        margin: '90px 150px 50px 50px',
        alpha: 0.3,
        backgroundColor: '#fff'
      },
      scaleY: {
        values: '0:20:5'
      },
      tooltip: {
        text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
        textAlign: 'left'
      },
      series: chartData
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });


    zingchart.loadModules('bubble-legend', function() {
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        modules: 'bubble-legend'
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

let chartData = [{
    values: [
      [1, 15, 8],
      [2, 4, 2],
      [5, 10, 1],
      [6, 3, 3],
      [3, 6, 2],
      [7, 15, 1],
      [8, 2, 4],
      [1, 6, 6],
      [2, 12, 3],
      [4, 4, 4],
      [5, 1, 5],
      [6, 0, 1],
      [8, 16, 2]
    ],
    hoverMarker: {
      backgroundColor: '#d2d9af #b2bf77',
      borderColor: '#a1ae64',
      borderWidth: '1px'
    },
    marker: {
      backgroundColor: '#b2bf77 #829550',
      borderColor: '#728440',
      borderWidth: '1px',
      fillType: 'linear',
      shadow: true
    }
  },
  {
    values: [
      [3, 5, 1],
      [2, 17, 2],
      [8, 8, 3],
      [4, 6, 2],
      [7, 3, 5],
      [2, 12, 1],
      [1, 0, 3],
      [6, 2, 2],
      [4, 12, 7],
      [6, 14, 2],
      [2, 6, 2]
    ],
    hoverMarker: {
      backgroundColor: '#c3c2e3 #9d9ad1',
      borderColor: '#8a87c2',
      borderWidth: '1px'
    },
    marker: {
      backgroundColor: '#9d9ad1 #615faa',
      borderColor: '#514f99',
      borderWidth: '1px',
      fillType: 'linear',
      shadow: true
    }
  },
  {
    values: [
      [3, 6, 5],
      [6, 8, 8],
      [8, 12, 5],
      [3, 2, 3],
      [5, 5, 2],
      [7, 10, 2],
      [2, 1, 1],
      [7, 4, 1],
      [6, 17, 4],
      [1, 9, 3],
      [5, 14, 1]
    ],
    hoverMarker: {
      backgroundColor: '#f9f0c8 #ecd466',
      borderColor: '#d5bc4c',
      borderWidth: '1px'
    },
    marker: {
      backgroundColor: '#ecd466 #e0b140',
      borderColor: '#cb9f34',
      borderWidth: '1px',
      fillType: 'linear',
      shadow: true
    }
  }
];

let chartConfig = {
  type: 'bubble',
  title: {
    text: 'Bubble Legend',
  },
  bubbleLegend: {
    layout: 'v',
    marker: {},
    connector: {},
    item: {}
  },
  plotarea: {
    margin: '90px 150px 50px 50px',
    alpha: 0.3,
    backgroundColor: '#fff'
  },
  scaleY: {
    values: '0:20:5'
  },
  tooltip: {
    text: 'Y-Axis Value: %v0<br>X-Axis Value: %v1<br>Bubble Size: %v2',
    textAlign: 'left'
  },
  series: chartData
};

zingchart.render({
  id: 'myChart',
  data: chartConfig
});


zingchart.loadModules('bubble-legend', function() {
  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    modules: 'bubble-legend'
  });
});