Bubble Chart with Custom Legends for Datapoints - CanvasJS JavaScript Charts

Bubble Chart with Custom Legends for Datapoints - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  zoomEnabled: true,
  theme: "light2",
  title:{
    text: "Employment in Agriculture vs Agri-Land and Population"
  },
  legend: {
    horizontalAlign: "right",
    verticalAlign: "center"
  },
  axisX: {
    title:"Employment – Agriculture",
    suffix: "%",
    minimum: 0,
    maximum: 61,
    gridThickness: 1
  },
  axisY:{
    title: "Agricultural Land (million sq.km)",
    suffix: "mn"
  },
  data: [
    {
      type: "bubble",
      toolTipContent: "<b>{name}</b><br/>Employment: {x}% <br/> Agri-Land: {y}mn sq. km<br/> Population: {z}mn",
      showLegends: true,
      dataPoints: [
        { x: 39.6, y: 5.225, z:1347, name:"China"},
        { x: 3.3, y: 4.17, z:21.49, name:"Australia" },
        { x: 1.5, y: 4.043, z:304.09, name:"US" },
        { x: 17.4, y: 2.647, z:2.64, name:"Brazil" },
        { x: 8.6, y: 2.154, z:141.95, name:"Russia" },
        { x: 52.98, y: 1.797, z:1190.86, name:"India" },
        { x: 4.3, y: 1.735, z:26.16, name:"Saudi Arabia" },
        { x: 1.21, y: 1.41, z:39.71, name:"Argentina" },
        { x: 5.7, y: .993, z:48.79, name:"SA" },
        { x: 13.1, y: 1.02, z:110.42, name:"Mexico" },
        { x: 2.4, y: .676, z:33.31, name:"Canada" },
        { x: 2.8, y: .293, z:64.37, name:"France" },
        { x: 3.8, y: .46, z:127.70, name:"Japan" },
        { x: 40.3, y: .52, z:234.95, name:"Indonesia" },
        { x: 42.3, y: .197, z:68.26, name:"Thailand" },
        { x: 31.6, y: .35, z:78.12, name:"Egypt" },
        { x: 1.1, y: .176, z:61.39, name:"U.K",legendText : "U.K" },
        { x: 3.7, y: .144, z:59.83, name:"Italy",legendText : "Italy" },
        { x: 1.8, y: .169, z:82.11, name:"Germany",legendText : "Germany" }
      ]
    }]
});
chart.render();
addCustomLegends(chart);

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B =...