Update bubble fillColor

author(s): Torstein Hønsi

by kzoon

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 320px;  height: 600px;"></div>
<button id="opacity">Update opacity</button>

JavaScript

var chart = Highcharts.chart('container', {

  chart: {
    type: 'bubble',
    plotBorderWidth: 1
  },

  title: {
    text: 'Highcharts Bubbles'
  },


  plotOptions: {
    bubble: {
      minSize: 25,
      maxSize: 70,
      marker: {
        fillOpacity: 0.2
      }
    }
  },

  series: [{
      name: 'series A',
      data: [
        [10, 10, 1],
        [20, 20, 2]
      ],
      marker: {
        fillColor: 'red'
      }
    },
    {
      name: 'series B',
      data: [
        [30, 30, 1],
        [40, 40, 2]
      ]
    },
    {
      name: 'series C',
      data: [
        [15, 30, 1],
        [25, 40, 2]
      ]
    }
  ]

});

// Toggle names
$('#opacity').click(function() {
alert('click');
  chart.series[0].update({
    name: 'series A',
    data: [
      [10, 10, 1],
      [20, 20, 2]
    ],
      marker: {
        fillColor: null
      }
  });

  chart.series[1].update({
    name: 'series B',
    data: [
      [30, 30, 1],
      [40, 40, 2]
    ],
    marker: {
        fillColor: 'green'
    }
  });
  chart.redraw();

});