I recently incorporated angular-charts into my project to make the display of charts easier. Initially, setting up and rendering a pie chart was a breeze following the guidelines I found here.
Here's a snippet of the code I used:
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
Everything was working smoothly until I decided to include legends for the chart. Now, I'm facing an issue with the legend labels overlapping. I'm unsure how to resolve this. Any insights or workarounds would be greatly appreciated! :)
UPDATE:
.col-xs-12.col-sm-12.col-md-6
.panel.panel-primary(ng-controller='pieChartController')
.panel-heading
h2.panel-title Title
.panel-body
canvas#pie.chart.chart-pie(chart-data='data', chart-labels='labels', chart-legend='true', chart-options='options')
UPDATE:
Upon examining the CSS rules affecting my pie chart's legends, I identified the following styles:
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
-webkit-padding-start: 0;
-moz-padding-start: 0;
padding-left: 0;
}
These styles are found in the angular-chart.css file.
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
Additionally, bootstrap.css contains the following styles:
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default;
}
These are from the angular-chart.js file.