1

I want to use Google linechart .

This is my project's image its a chart for Clappr

My questions:

1) How can I set the background-color:transparent ??

2) If user click on full page size ( button right ) , the chart will not be 100% width again , how to set it 100% ?

This picture is for second question

responsive

Arman
  • 33
  • 6
  • Possible duplicate of [Google Charts (JS) - is there a way of using a transparent background on a chart?](https://stackoverflow.com/questions/7413508/google-charts-js-is-there-a-way-of-using-a-transparent-background-on-a-chart) – Abhishek Kumar Aug 08 '18 at 12:20
  • Second part of question is important , which is not answered in other page – Arman Aug 08 '18 at 12:59

3 Answers3

0

You can target via CSS the rect attribute of the chart as follows:

rect { 
   fill: rgb(0,0,0,0);
}

https://jsfiddle.net/kL2vaed4/2/ here is an example where I used a black background so you can see that it works.

Torjescu Sergiu
  • 1,483
  • 10
  • 24
  • Thank you and what is your idea for my second question ? – Arman Aug 08 '18 at 12:55
  • need some more details, does it have a specific width? it should be styled with width 100% on all media screens. It is hard to guess what is wrong without the actual code, or a jsfiddle/codepen. – Torjescu Sergiu Aug 08 '18 at 12:59
  • This is source , from Google : https://developers.google.com/chart/interactive/docs/gallery/linechart I changed this line : style="width: 900px; height: 500px" To : style="width: 100%; height: 50px" But it does not working fine. – Arman Aug 08 '18 at 13:10
  • yes i tried that too, I wonder if you can make jsfiddle with your actual code, you having a video may influence the end resul. The g path that is generated from the svg has a fixed with, and there is a clip path that needs to be modyfied – Torjescu Sergiu Aug 08 '18 at 13:23
  • maybe this can help https://stackoverflow.com/questions/34064917/how-to-resize-svg-clip-path – Torjescu Sergiu Aug 08 '18 at 13:46
  • this won't work on other chart types such as Column or Bar. The chart elements will also become transparent. Use standard configuration options instead... – WhiteHat Aug 08 '18 at 15:51
0

to make the chart's background transparent,
use the following configuration option... 

backgroundColor: 'transparent',
chartArea: {
  backgroundColor: 'transparent',
}

to make the chart responsive,
re-draw the chart when the container's size changes,
such as on the window's resize event... 

window.addEventListener('resize', function () {
  chart.draw(data, options);
});

see following working snippet,
run the snippet, then click "Full page" to see it change...

note: the container <div> has a cyan background 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
  ]);

  var options = {
    backgroundColor: 'transparent',
    chartArea: {
      backgroundColor: 'transparent',
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});
#chart_div {
  background-color: cyan;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • The chart is inside of a video player , are you sure 'window.addEventListener' is the solution ? – Arman Aug 10 '18 at 07:16
  • the only way to resize the chart is to re-draw – WhiteHat Aug 10 '18 at 11:16
  • I am using [clappr](https://github.com/clappr/clappr) and (as i shown in up picture) chart is inside of player...The chart redraw when player is going to full page But when player will return to normal size , Chart does not redraw – Arman Aug 11 '18 at 06:43
0

There is only way to reaction about device width (or windows width) and that is redraw chart. It is true, but do not forget to destroy old chart before redraw new version.

 .destroy()

This code can remove old chart , after that you can add new chart

  // Example from the docs
        var myLineChart = new Chart(ctx, config);
   // Destroys a specific chart instance
        myLineChart.destroy();

I tested, It is working fine

Arman
  • 33
  • 6