CODEWITHSUNDEEP
javascriptgoogle-visualization
Ruffo
Ruffo

Reputation: 420

Google Charts: Pie Chart title position

I was assigned to implement some Charts, and the bosses requested me to separate the title of the chart from the Chart, I tried to move the chart's area a little from the top, but the title moved with the chart too, like this:

before chartArea after chartArea

I tried using: chartArea:{top:80} and the result was that, on the screenshot. I'm sure the property to move only the title it's another but I can't find it yet. btw, This is my whole Object:

var columnChartProps = {
    fontName: 'HelveticaNeueBC',
    legend: {position: 'none'},
    titleTextStyle: {fontSize: 18},
    hAxis:  {color: '#121b2d'},
    vAxis: {
        gridlines: {color: '#666666'}
    },
    width: 400,
    height: 300,
    backgroundColor: '#CBCBCB',
    chartArea:{top:80, width:"80%"}
}
// VENCIMIENTOS:
var vencData = google.visualization.arrayToDataTable([
    ['equis', 'Vencimientos'],
    ['ENE', 7],
    ['FEB', 10],
    ['MAR', 5],
    ['ABR', 6],
    ['MAY', 10],
    ['JUN', 15]
]);

var vencOptions = {
    colors:['#24375e','#2c4370','#324a7c','#38538a','#3e5b96','#4363a3'],
    title: 'Vencimientos prox. 6 meses',
    hAxis: {title: 'Meses'}
};

var vencimientos = new google.visualization.ColumnChart(document.getElementById('vencimientos'));
vencimientos.draw(vencData, jQuery.extend({},vencOptions,columnChartProps));

Thanks in advance :)

Upvotes: 5

Views: 19579

Answers (3)

tkhuynh
tkhuynh

Reputation: 1019

It's annoyed when Google did provide title position but with jQuery, you can do it

$("#YOUR_GRAPH_WRAPPER svg text").first()
 .attr("x", (($("#time-series-graph svg").width() - $("#YOUR_GRAPH_WRAPPER svg text").first().width()) / 2).toFixed(0));

Basically, you want to access the first text tag which is your chart title and change value of x attribute. To center it, take svg width (your graph width) subtract by title widtch, then divide by 2 :) Happy hacking :)

Upvotes: 0

Danny Harding
Danny Harding

Reputation: 1745

as PerryW said, I don't think you can do this with the given API. The easiest way to do this would be to make an html table with the chart on the second row.

<table>
    <thead>
        <th>Vencimientos prox. 6 meses</th>
    </thead>
    <tbody>
        <td>
            ***YOUR CHART HERE***
        </td>
    </tbody>
</table>

Now you can play around with the style and location as much as you want!

Upvotes: 3

PerryW
PerryW

Reputation: 1436

I don't think you can do this through options in the vis api.

However....

The title is held in a text element that uses x/y positioning

If you are using JQuery, this becomes a piece of cake

$("text:contains(" + vencOptions.title + ")").attr({'x':'60', 'y':'20'})

Adding that immediately after the .draw call and tweaking the x and y coords gives you pixel-perfect control.

You can do it without JQuery, but time is pressing and I'll leave that to someone else :)

Upvotes: 19

Related Questions