Bubble Chart with Patterns

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/9HVQAVNR

<!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>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .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"]; // load the patterns module and then render the chart
    zingchart.loadModules('patterns', function() {
      let chartConfig = {
        type: 'bubble',
        theme: 'classic',
        backgroundColor: '#f4f4f4 #ffffff',
        title: {
          text: 'Payment Volumes',
          backgroundColor: 'none',
          fontColor: '#000000',
          fontFamily: 'sans-serif',
          fontSize: '18px',
          fontWeight: 'bold',
          y: '7%',
        },
        plot: {
          cursor: 'hand',
          scaling: 'radius',
          selectionMode: 'multiple',
          sizeFactor: 2.5,
        },
        scaleX: {
          values: '0:10:2',
          alpha: 0.25,
          guide: {
            visible: false,
          },
          item: {
            fontFamily: 'Tahoma',
            fontWeight: 'normal',
            rules: [{
                text: 'Lowest Volume',
                rule: '%v == 0',
              },
              {
                text: '',
                rule: '%v >= 2',
              },
              {
                text: 'Highest Volume',
                rule: '%v == 10',
              },
            ],
          },
          lineColor: '#141414',
          lineWidth: '1px',
          tick: {
            visible: false,
          },
        },
        scaleY: {
          values: '0:4:2',
          guide: {
            visible: false,
          },
          visible: false,
        },
        series: [{
            values: [
              [0, 2, 20]
            ],
            tooltip: {
              text: '$1.5 billion',
              backgroundColor: '#000000',
              shadow: false,
            },
            valueBox: {
              text: '<strong>Stripe</strong><br>$1.5 billion',
              fontColor: '#141414',
              fontFamily: 'Tahoma',
              fontWeight: 'normal',
              placement: 'top',
            },
            marker: {
              alpha: 1,
              backgroundColor: '#6ab9e1',
              backgroundImage: 'PATTERN_LIGHT_VERTICAL',
            },
            selectedMarker: {
              alpha: 0.25,
              backgroundColor: '#222222',
            },
          },
          {
            values: [
              [1.75, 2, 25]
            ],
            tooltip: {
              text: '$2 billion',
              backgroundColor: '#000000',
              shadow: false,
            },
            valueBox: {
              text: '<strong>Swipely</strong><br>$2 billion',
              fontColor: '#141414',
              fontFamily: 'Tahoma',
              fontWeight: 'normal',
              placement: 'top',
            },
            marker: {
              alpha: 1,
              backgroundColor: '#0173C6',
              backgroundImage: 'PATTERN_LIGHT_DOWNWARD_DIAGONAL',
            },
            selectedMarker: {
              alpha: 0.25,
              backgroundColor: '#333333',
            },
          },
          {
            values: [
              [3.75, 2, 70]
            ],
            tooltip: {
              text: '$30 billion',
              backgroundColor: '#000000',
              shadow: false,
            },
            valueBox: {
              text: '<strong>Square</strong><br>$30 billion',
              fontColor: '#141414',
              fontFamily: 'Tahoma',
              fontWeight: 'normal',
              placement: 'top',
            },
            marker: {
              alpha: 1,
              backgroundColor: '#ffffff',
              backgroundImage: 'PATTERN_SMALL_GRID',
            },
            selectedMarker: {
              alpha: 0.25,
              backgroundColor: '#555555',
            },
          },
          {
            values: [
              [6.25, 2, 100]
            ],
            tooltip: {
              text: '$150 billion',
              backgroundColor: '#000000',
              shadow: false,
            },
            valueBox: {
              text: '<strong>Alipay</strong><br>$150 billion',
              fontColor: '#141414',
              fontFamily: 'Tahoma',
              fontWeight: 'normal',
              placement: 'top',
            },
            marker: {
              alpha: 0.75,
              backgroundColor: '#ff7e00',
              backgroundImage: 'PATTERN_ZIGZAG',
            },
            selectedMarker: {
              alpha: 0.25,
              backgroundColor: '#999999',
            },
          },
          {
            values: [
              [9, 2, 115]
            ],
            tooltip: {
              text: '$180 billion',
              backgroundColor: '#000000',
              shadow: false,
            },
            valueBox: {
              text: '<strong>PayPal</strong><br>$180 billion',
              fontColor: '#141414',
              fontFamily: 'Tahoma',
              fontWeight: 'normal',
              placement: 'top',
            },
            marker: {
              alpha: 0.75,
              backgroundColor: '#008ccb',
              backgroundImage: 'PATTERN_LARGE_CHECKER_BOARD',
            },
            selectedMarker: {
              alpha: 0.25,
              backgroundColor: '#EEEEEE',
            },
          },
        ],
        source: {
          text: 'Source: Fast Company & Inc (Published)',
          fontFamily: 'Tahoma',
          fontStyle: 'italic',
          fontWeight: 'normal',
          marginBottom: '2%',
          marginRight: '5%',
        },
      };

      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%',
      });
    });
  </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>

// load the patterns module and then render the chart
zingchart.loadModules('patterns', function () {
  let chartConfig = {
    type: 'bubble',
    theme: 'classic',
    backgroundColor: '#f4f4f4 #ffffff',
    title: {
      text: 'Payment Volumes',
      backgroundColor: 'none',
      fontColor: '#000000',
      fontFamily: 'sans-serif',
      fontSize: '18px',
      fontWeight: 'bold',
      y: '7%',
    },
    plot: {
      cursor: 'hand',
      scaling: 'radius',
      selectionMode: 'multiple',
      sizeFactor: 2.5,
    },
    scaleX: {
      values: '0:10:2',
      alpha: 0.25,
      guide: {
        visible: false,
      },
      item: {
        fontFamily: 'Tahoma',
        fontWeight: 'normal',
        rules: [
          {
            text: 'Lowest Volume',
            rule: '%v == 0',
          },
          {
            text: '',
            rule: '%v >= 2',
          },
          {
            text: 'Highest Volume',
            rule: '%v == 10',
          },
        ],
      },
      lineColor: '#141414',
      lineWidth: '1px',
      tick: {
        visible: false,
      },
    },
    scaleY: {
      values: '0:4:2',
      guide: {
        visible: false,
      },
      visible: false,
    },
    series: [
      {
        values: [[0, 2, 20]],
        tooltip: {
          text: '$1.5 billion',
          backgroundColor: '#000000',
          shadow: false,
        },
        valueBox: {
          text: '<strong>Stripe</strong><br>$1.5 billion',
          fontColor: '#141414',
          fontFamily: 'Tahoma',
          fontWeight: 'normal',
          placement: 'top',
        },
        marker: {
          alpha: 1,
          backgroundColor: '#6ab9e1',
          backgroundImage: 'PATTERN_LIGHT_VERTICAL',
        },
        selectedMarker: {
          alpha: 0.25,
          backgroundColor: '#222222',
        },
      },
      {
        values: [[1.75, 2, 25]],
        tooltip: {
          text: '$2 billion',
          backgroundColor: '#000000',
          shadow: false,
        },
        valueBox: {
          text: '<strong>Swipely</strong><br>$2 billion',
          fontColor: '#141414',
          fontFamily: 'Tahoma',
          fontWeight: 'normal',
          placement: 'top',
        },
        marker: {
          alpha: 1,
          backgroundColor: '#0173C6',
          backgroundImage: 'PATTERN_LIGHT_DOWNWARD_DIAGONAL',
        },
        selectedMarker: {
          alpha: 0.25,
          backgroundColor: '#333333',
        },
      },
      {
        values: [[3.75, 2, 70]],
        tooltip: {
          text: '$30 billion',
          backgroundColor: '#000000',
          shadow: false,
        },
        valueBox: {
          text: '<strong>Square</strong><br>$30 billion',
          fontColor: '#141414',
          fontFamily: 'Tahoma',
          fontWeight: 'normal',
          placement: 'top',
        },
        marker: {
          alpha: 1,
          backgroundColor: '#ffffff',
          backgroundImage: 'PATTERN_SMALL_GRID',
        },
        selectedMarker: {
          alpha: 0.25,
          backgroundColor: '#555555',
        },
      },
      {
        values: [[6.25, 2, 100]],
        tooltip: {
          text: '$150 billion',
          backgroundColor: '#000000',
          shadow: false,
        },
        valueBox: {
          text: '<strong>Alipay</strong><br>$150 billion',
          fontColor: '#141414',
          fontFamily: 'Tahoma',
          fontWeight: 'normal',
          placement: 'top',
        },
        marker: {
          alpha: 0.75,
          backgroundColor: '#ff7e00',
          backgroundImage: 'PATTERN_ZIGZAG',
        },
        selectedMarker: {
          alpha: 0.25,
          backgroundColor: '#999999',
        },
      },
      {
        values: [[9, 2, 115]],
        tooltip: {
          text: '$180 billion',
          backgroundColor: '#000000',
          shadow: false,
        },
        valueBox: {
          text: '<strong>PayPal</strong><br>$180 billion',
          fontColor: '#141414',
          fontFamily: 'Tahoma',
          fontWeight: 'normal',
          placement: 'top',
        },
        marker: {
          alpha: 0.75,
          backgroundColor: '#008ccb',
          backgroundImage: 'PATTERN_LARGE_CHECKER_BOARD',
        },
        selectedMarker: {
          alpha: 0.25,
          backgroundColor: '#EEEEEE',
        },
      },
    ],
    source: {
      text: 'Source: Fast Company & Inc (Published)',
      fontFamily: 'Tahoma',
      fontStyle: 'italic',
      fontWeight: 'normal',
      marginBottom: '2%',
      marginRight: '5%',
    },
  };

  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: '100%',
    width: '100%',
  });
});

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

.zc-ref {
  display: none;
}

Bubble Chart with Custom Markers 248/281 Vertical Box Plot with HTML Tooltips

Bubble Chart with Patterns

Related Documentation: