Lines around bubbles in scatter chart

I am working with a scatter plot. I have a lot of overlapping bubbles because some of the bubbles are so big. The green color makes it easy to see when bubbles are overlapping. But when I have lots of data points, the blue makes it difficult to make out where the different data points lie. Is there any way to control the transparency of the bubbles? I tried editing the color pallet, but it did not help.

 

Thank you,

Robert

 

 

5replies Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Hi Robert ,

    Give this CSS a try?

    <style>
      .highcharts-column-series .highcharts-point { fill-opacity: 0.5; }
    </style>
    

    We don't have a way to modify transparency via color palettes yet but we are considering it!

    Reply Like 1
  • If my code for the chart is below where would I put it? I tried a couple places and didn't see a change in the chart.

     

      <div class="row">
        <div class="col-md-9">
          <mode-chart id="chart_03f16bfdd416" dataset="dataset" options="chart_options">
          </mode-chart>
        </div>
        <div class="col-md-3"></div>
      </div>

    Reply Like
  • You should just add that <style> block at the top of your report's HTML.  

    Reply Like 1
  • Got it to work and it looks great!! 

    Reply Like
  • This dint work for me 

     

    See below my HTML Code

    <style>
      .highcharts-column-series .highcharts-point {
        fill-opacity: 0.5;
      }
    </style>
    <div class="mode-header embed-hidden">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
    </div>
    <div class="mode-grid container">
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_1b734a373b7f" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_a6988a9c6c78" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_6b15e29585f2" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_4475e807dfff" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_d302416f05b4" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row" data-row-height="medium">
        <div class="col-md-12">
          <mode-table id="table_f2c3cb406b95" dataset="dataset" options="table_options"></mode-table>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <mode-chart id="chart_d13e32ea74e8" dataset="dataset" options="chart_options"></mode-chart>
        </div>
        <div class="col-md-6">
          <mode-chart id="chart_42902b690faa" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_b743d7ee2eca" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_af5df68e85c0" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row" data-row-height="medium">
        <div class="col-md-6">
          <mode-chart id="chart_d6b694382c3f" dataset="dataset" options="chart_options"></mode-chart>
        </div>
        <div class="col-md-6">
          <mode-chart id="chart_c9d8a6ee3d9d" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row" data-row-height="medium">
        <div class="col-md-12">
          <mode-chart id="chart_d1e656bc256e" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mode-chart id="chart_43c66fc4d255" dataset="dataset" options="chart_options"></mode-chart>
        </div>
      </div>
      <div class="row" data-row-height="medium">
        <div class="col-md-12">
          <mode-table id="table_f8d178c9848d" dataset="dataset" options="table_options"></mode-table>
        </div>
      </div>
    </div>

    Reply Like
Like1 Follow
  • Status Answered
  • 1 Likes
  • 2 mths agoLast active
  • 5Replies
  • 653Views
  • 3 Following

Create A New Discussion

Share your thoughts