Can't set the width and height in a pygal line graph

Question

I'm using flask and pygal to make a website.

In order to draw a graph I've put this in my webpage:

<div class="graph-area">
    <div align="center">
      <embed type="image/svg+xml" src={{graph_data|safe}} />
    </div>
</div>

.graph-area{
margin-left:255px;
height:500px;
margin-bottom: 5px;
border-radius: 10px;
}

@app.route("/test")
def test():
    custom_style = Style(
      background='transparent',
      plot_background='transparent',
      foreground='#53E89B',
      foreground_strong='#53A0E8',
      foreground_subtle='#630C0D',
      opacity='.6',
      opacity_hover='.9',
      transition='400ms ease-in')
    graph = pygal.Line(width=500, height=400, style=custom_style)
    graph.title = 'Food intake'
    graph.x_labels = ['lundi','mardi','mercredi','jeudi','vendredi','samedi']
    graph.add('Proteins',  [15, 16, 17, 15, 10, 15])
    graph.add('Lipids',    [40, 45, 40, 42,  45,  42])
    graph.add('Carbs',     [21,  22, 22, 20, 18, 16])
    graph.add('Net carbs',  [12, 11, 11, 11, 10, 13])
    graph_data = graph.render_data_uri()
    return render_template("test.html", graph_data = graph_data)

The width and height parameters do not act on the graph (the graph is huge, more than 1500x1500). Did I do something wrong in my HTML?

I know I could apply a CSS style on the graph but I'd like to use the native pygal solution.

score 5 · Answer 1 · answered Mar 24 '18 at 14:14

It works if I add explicit_size=True inside the graph constructor

So you get :

graph = pygal.Line(width=500, height=400, explicit_size=True, style=custom_style)

Note that the graph size will override any css scaling attemps, and the other part of the webpage do not scale according to the graph.

I don't understand why it has to be added (explicit_size), the documentation does not talk about it in the sizing example, but the sizing examples does not work without it.

Can't set the width and height in a pygal line graph

1 Answers1