Question: I am using chart.js for drawing a line graph and I am getting following error `"TemplateSyntaxError: tag name expected"` while trying to create *options* to print legends.
I have defined the options as 

```
var cOpts = { legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
}
var myLineChart = new Chart(buyers).Line(data,cOpts);

```

Does this happen because jinja2 does not like "{" or "}" in template file?
I tried to create a static text using plain "" and that does not help either.

Answer: 
The problem ist the jinja2 specific convention `{%` and `%}` in their control structure. To avoid parsing problem you have to add `\` before each `%` and `{}` to prevent these issues.

So in your specific case:

```
var cOpts = { legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++)\{\%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label)\{\%><%=datasets[i].label%><\%\}%></li><\%\}%></ul>"}

var myLineChart = new Chart(buyers).Line(data,cOpts);

```
I could not find a right solution to my actual problem of using options, but resolved it by creating legends using ul/li and defining style for each of li.

```
<style>
                #line-Legend
                {
                    list-style: none;
                    padding: 5px;
                    margin-left: 5px;
                    margin-top: 5px;
                    background-color: #ffffff;
                    text-align: left
                }
                #line-Legend li
                {
                    height: 1.2em;
                    padding-left: 15px;
                    margin-bottom: 4px;
                    list-style: none;
                    spanrow=2;
                }
                .legCat
                {
                    display: block;
                    padding-left: 1px;
                    background-color: #ffffff;
                }
                .leg4
                {
                    background-color: #ffee00;
                }
                .leg3
                {
                    background-color: #ff0000;
                }
                .leg2
                {
                    background-color: #0000ff;
                }
                .leg1
                {
                    background-color: #00ff00;
                }
                </style>
                <div> 
                    <ul id="line-Legend">
                        <li class="leg1"><span class="legCat">Legend 1</span></li>
                        <li class="leg2"><span class="legCat">Legend 2</span></li>
                        <li class="leg3"><span class="legCat">Legend 3</span></li>
                        <li class="leg4"><span class="legCat">Legend 4</span></li>
                    </ul>
                </div>

```