[Chartjs]-TemplateSyntaxError: tag name expected

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>