CODEWITHSUNDEEP
google-visualization
Debajit Mukhopadhyay
Debajit Mukhopadhyay

Reputation: 4172

Google line chart line opacity

Is there any way to change the opacity of the line in Google Line chart ?

I am using the below code :

function drawLineChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006', 660, 1120],
          ['2007', 1030, 540]
        ]);


        var options1 = {
            legend: { position: 'bottom', maxLines: 3 },
            trendlines: {
                1: {
                    type: 'linear',
                    color: 'green',
                    lineWidth: 10,
                    opacity: 0.3,
                    showR2: true,
                    visibleInLegend: true
                }
            },
            title: 'Company Performance'
        };


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

        chart.draw(data, options1);
    }

Upvotes: 0

Views: 3229

Answers (2)

Daemedeor
Daemedeor

Reputation: 1013

The way to do this is to add a style role object and specify the string of properties that you want like below, this allows for better ways without having to deal with the color in the stylesheet: 

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', { "type": "string", "role": "style" }],
      ['2004', 1000, 400, "opacity: .3;"],
      ['2005', 1170, 460, "opacity: .3;"],
      ['2006', 660, 1120, "opacity: .3;"],
      ['2007', 1030, 540, "opacity: .3;"]
    ]);


    var options1 = {
        legend: { position: 'bottom', maxLines: 3 },
        trendlines: {
            1: {
                type: 'linear',
                color: 'green',
                lineWidth: 10,
                showR2: true,
                visibleInLegend: true
            }
        },
        title: 'Company Performance'
    };


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

    chart.draw(data, options1);
}

Upvotes: 5

frno
frno

Reputation: 1084

Just run into same problem when trying google samples in JSFiddle. Using Developer tools I was able to identify simple CSS to adjust the color ( + opacity ):

div#chart_div path:nth-child(1) {
   stroke:rgba(255, 0, 0, 0.3) !important;
}

div#chart_div is containing element for chart. For multiple lines in a chart create additional CSS rules and change child number, like:

div#chart_div path:nth-child(2) { ... },

div#chart_div path:nth-child(3) { ... }

Upvotes: 1

Related Questions