score:-1
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>
score:3
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);
Source: stackoverflow.com
Related Query
- TemplateSyntaxError: tag name expected
- How to run Chart.js samples using source code
- In Chart.js set chart title, name of x axis and y axis?
- Creating dropdown options with Chart.js using select tag and multiple canvas
- How to add ChartJS code in Html2Pdf to view image
- Angular chart how to show the legend data value by default along with legend name
- Invalid module name in augmentation. Module 'chart.js' resolves to an untyped module at '/src/chart.js', which cannot be augmented
- How to show dynamic dates with month name of current month and previous month in momentjs?
- Is it possible to get the assigned ref name in a component? Vue.js
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to show different product name for every bar in chart js
- how to show labels in laravel charts when the name of the label is on another table?
- code works fine on jsfiddle but one function is not working on website
- Chartjs not working with d3 from csv source
- VueJS TypeScript using ChartJS - Parsing error: '}' expected
- Passing an Array from a Flask view to the javascript code of another view
- Conditional in ChartJS axes tick callback function isn't returning the expected labels
- How can I change the label name when you hover your data in Chart.js?
- Error in compilation for chart.js Expected method shorthand in object literal ('{label() {...}}'
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- Code doesn't work after updating chart.js versioning
- The expected type comes from property 'XAxes' and 'yAxes' which is declared here on type '_DeepPartialObject<{ [key: string]:
- Getting data into script tag from route?
- On click event to show name of pie chart slice in chartsJS
- Get last 6 month name in Array for Chartjs
- Using Chart.js onClick function, can you execute code from an undefined or null result?
- Parsing error: Unexpected token, expected ";" line 54 in .map function
- How to write better code in es6 for formatting an object with array values
- Chart.js : Is there a way to name each bubble in chart?
- Angular2 + Chart.js and ng2-charts. Data binding not working as expected
More Query from same tag
- Why doesn't my donut chart, created with Chart.js, appear?
- How to get value of defaultdic in JS (Django framework)?
- Showing 'undefined%' in the graph if data does not exist
- Chartjs sample can't be reproduced
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- How to Draw Gantt chart using chart js or other libraries
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- Pass variable from function js to other function js
- Update chartjs chart within random data once per second
- Multiple charts on same page not working - ng2-charts
- Chart.js - Creating multiple charts on one page
- How to update chart.js on websocket event?
- display multiple charts angular.js chart.js
- Changing data when click button in chart.js
- Javascript instead of mapping to an array, returning one value at a time instead of a list of data?
- Can I offset the bars in chart.js stacked bar chart?
- Chart.js - Black bar colors in mobile devices
- Convert this canvasjs chart to chart.js chart
- Chartjs - keeping 2 graphs aligned side by side
- chartjs - bar graphs size not increasing
- How to connect Firebase in Chart.js?
- How to change grid line width for one specific line
- Stacked Group Bar from Chart.js : Can I give each stack group a unique color?
- Set animation dynamically in Chart.JS
- Angular 2 ng2-charts donut add horizontal line
- Pass function elements to render in js
- Chart.js: compare two periods like Google Analytics with a line chart
- I am Creating pie chart using Chartjs 2.6.0. I want to show label on Slices
- How to pass a array from node to .js file (pugJs)
- How I connect chart.js to database in ASP.NET web form?