CODEWITHSUNDEEP
csschartslinestyling
k1c0
k1c0

Reputation: 43

Styling Google Line Charts

I want to use google line charts in my new web project. I want to style them like is shown on this picture and show dates between months. Could you tell me how to do that if is possible?

Upvotes: 2

Views: 4687

Answers (1)

Raul Reyes
Raul Reyes

Reputation: 453

If you are trying to draw Google line charts using Google Chart tools > Chart Gallery, I highly recommend to play with the "Visualization Playground" aka "code Playground".

Go to Google Chart, select overview > Chart Gallery > Area Charts (In your case) and usually below the Chart picture example look for the link "Visualization Playground".

Play with the code until you understand what it does and pay attention to the following code within the Function drawVisualization:

var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by ....',
    isStacked: true,
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"}
  });

Go back to the Configuration Options and use these options to style your charts, for example if you would like to put everything in black color add another line with the option colors: ['black'] or change the colors to black, orange and red like this:

var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
      ac.draw(data, {
        title : 'Monthly Coffee Production by ....',
        isStacked: true,
        width: 600,
        height: 400,
        vAxis: {title: "Cups"},
        hAxis: {title: "Month"},
        colors: ['#000000', '#FF6600', 'red']
      });

Hope this helps

Upvotes: 1

Related Questions