Can I add a CSS3 gradient to a Bubble Chart background?

[Laura Johnson]

Hi all,

I was wondering if it were possible to add a CSS3 gradient to the backgroundColor property for a bubble chart.

I know I can add a hex color....but was hoping to incorporate a gradient instead.

Thanks for reading.

Laura

[Sergey Grabkovsky]

Hi Laura,

We don't currently support setting the background color to a gradient, but there's no reason you couldn't set the background color of the Bubble Chart to be transparent and set the background of your chart div to be a gradient using CSS.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Laura Johnson]

Sergey,

Thanks for the idea! I made a mistake initially and used backgroundColor instead of ChartArea.

Is there a way to add the gradient to just the chartArea?

Laura

[Sergey Grabkovsky]

Sorry, like backgroundColor, the chartArea also doesn't support gradients, but
unfortunately I don't have any clever ideas for that.

--

[Laura Johnson]

Sergey,

I developed a workaround. I created a gradient background on the <div> and set the size and position and no repeat. I've tested it in IE and Firefox with no issues.

Here's the CSS for the gradient background:

      #series_chart_div
          {
          background: #ff120a; /* Old browsers */
background: -moz-linear-gradient(31deg,  #ff120a 0%, #f8fc02 47%, #4bd31d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#ff120a), color-stop(47%,#f8fc02), color-stop(100%,#4bd31d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(31deg,  #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(31deg,  #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(31deg,  #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /* IE10+ */
background: linear-gradient(31deg,  #ff120a 0%,#f8fc02 47%,#4bd31d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff120a', endColorstr='#4bd31d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
          background-size: 493px 310px;
         background-repeat: no-repeat;
          background-position: 154px 96px;
          min-height: 500px;
          width: 800px;
          }

I have attached a screengrab of the chart itself.

Laura

On Friday, February 20, 2015 at 11:15:13 AM UTC-5, Laura Johnson wrote:

[Sergey Grabkovsky]

Ah, I figured that you wouldn't want to hardcode the position and size of the gradient, but I suppose that if you don't care about that, then this is a valid workaround.

--

[Laura Johnson]

Sergey,

Normally, I wouldn't want to hardcode the position and size...but my client wants the gradient background more than he wants a responsive design.

Thank you for your guidance. I appreciate it!

Laura

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.