Setting different opacity by setting color in rgba - CanvasJS JavaScript Charts

Setting different opacity by setting color in rgba - 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; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Setting different opacity by setting color in rgba"
  },
  data: [
    {
      type: "bubble",
      dataPoints: [      
        { x: 10, y: 25, z: 3, color: "rgba(54, 158, 173, 0.9)" },
        { x: 20, y: 27, z: 2, color: "rgba(194, 70, 66, 0.6)" },
        { x: 30, y: 19, z: 1, color: "rgba(127, 96, 132, 0.8)" },
        { x: 40, y: 24, z: 2, color: "rgba(134, 180, 2, 0.4)" },
        { x: 50, y: 51, z: 2, color: "rgba(162, 209, 207, 0.8)" }        
      ]
    }
  ]
});

chart.render();