score:3
Accepted answer
this can be achieved through some css. first thing though you css class 1-legend
is not valid, css class names can not start with a number (good explanation on what is allowed here)
but once that is fixed you can just style the spans how you want to dispaly here is an example
.legend {
list-style: none;
}
.legend li span {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 10px;
border-radius: 10px;
}
<ul class="legend">
<li><span style="background-color:#006666"></span>secretaria municipal de desenvolvimento urbano </li>
<li><span style="background-color:#339966"></span>secretaria municipal de saude</li>
<li><span style="background-color:#3366ff"></span>setor de rh</li>
<li><span style="background-color:#66ccff"></span>secretaria municipal de cultura, turismo, esporte e lazer </li>
<li><span style="background-color:#ffcc66"></span>setor de cadastro de imoveis</li>
<li><span style="background-color:#ff6666"></span>secretaria municipal de desenvolvimento econômico, trabalho e meio ambiente</li>
<li><span style="background-color:#994d00"></span>setor agiliza</li>
</ul>
score:1
.legend {
margin-top: 30px;
ul {
list-style: none;
padding: 0;
li {
padding-left: 28px;
position: relative;
font-size: 28px;
font-weight: 600;
span {
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 3px;
border-radius: 50%;
}
}
}
}
additionally, you can paste ul into your own structure by:
document.getelementbyid('name-of-your-element').innerhtml = mybarchart.generatelegend();
Source: stackoverflow.com
Related Query
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- VueJS + Chartjs - Chart only renders after code change
- How do I destroy/update Chart Data in this chart.js code example?
- getting additional value fields from data source for dx.chartjs doughnut chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Getting the HTML code of a chart created by chart.js
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- Set height of chart in Chart.js
- Dynamically update values of a chartjs chart
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- In Chart.js set chart title, name of x axis and y axis?
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- Chartjs Bar Chart showing old data when hovering
- Chart.js Show labels on Pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chart area background color chartjs
- Chart.js - Increase spacing between legend and chart
- Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Remove the vertical line in the chart js line chart
- Chart.js: Bar Chart Click Events
- Chartjs v2.0: stacked bar chart
- Set minimum step size in chart js
More Query from same tag
- ChartJS doesn't draw the chart
- Show all values in Chart js y axis
- Access a chart in a different function
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to change Y axis labels
- Changing x axis labels in Chart.js line chart
- Chart.js chart appears and disappears on form submit
- zoom and pan on charts in angular
- I get to do scroll
- ChartJS on small screen
- Chart.js dynamic updates with data from database
- I can not properly re scale <canvas> with width and height attributes
- Chart.js: How to change the x-Axes background color?
- Chartjs - How to get last 7 days on x-axis labels?
- ChartJS – is there any way to remove blank space around pie charts?
- Add data dynamically to chart
- Dynamically updating time data in chart.js freezes the chart
- Chart.js extremely slow on 8 series of 500+ points
- Chart.js changes selected legend filters when using update function
- Styling the middle text of Chart.js's doughnut chart
- Single point on multiple line linear graph with Chart.js
- Make pie chart smaller Chart JS
- angular-chart chart-line not working
- Execute SQL prepared statement in AJAX
- ChartJs + ie11 doesn't work
- How can I implement Polar area charts with Chart.js and Canvas
- The 3rd dataset not showing in canvas
- I have 10 points inn x-axis, ranging [-25,-20,,-15,-10,0,10,20,30,40,50]. But I want my line chart to start from -15 of x-axis. How we can achieve?
- Charts.js Pie Chart
- ChartJS: unwanted top/bottom padding when legend is aligned right