score:0
you need to use legendTemplate, make sure you replace the $scope.data in your app :P
var options = {
legendTemplate: "<ul><% for (var i=0; i<data.length; i++){%><li><span style=\"background-color:<%=data[i].color%>\"></span><%=data[i].label%> - <%=data[i].value%></li><%}%></ul>"
}
see this jsfiddle
score:1
I'm using angular-chart 1.0.2. In my version I'm using it like this;
$scope.options = {
legend: {display: true},
legendTemplate:
"<ul class=\"<%=name.toLowerCase()%>-legend\">" +
"<% for (var i=0; i<segments.length; i++){%>" +
"<li>" +
"<span style=\"background-color:<%=segments[i].fillColor%>\"></span>" +
"<%=segments[i].label%> (<%=segments[i].value%>)" +
"</li>" +
"<%}%>" +
"</ul>",
};
Source: stackoverflow.com
Related Query
- Angular chart how to show the legend data value by default along with legend name
- How to show tooltip value of all data falling on the same axis in chart js?
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- chart js tooltip how to control the data that show
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Angular 2: How to pass my API data to graph and Display the Graph with data
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to show the chartjs bar chart data values labels as text?
- ChartJS Pie Chart How default just show 2 legend datas
- How to remove the Legend of chart from angular Chart.js
- how to write labels along with data on top and bottom of each stack in bar chart
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Chart.js how to make chart only show the most recent data
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- how to show data value on bar chart body rather than using tooltip?
- chart js how to fill legend box with colour
- Chart JS show multiple data points for the same label
- How to display data labels outside in pie chart with lines in ionic
- Remove the label and show only value in tooltips of a bar chart
- Chart Js Show the old data on mouse hover
- Chart js: how can I align the legend and the title
- PrimeNg bar chart how to show a label for the y-axis
- How to show only the data points that have a change in Chartjs?
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to update data Chart in async way in Angular Chart.js?
More Query from same tag
- Chart JS display Data Value on the top of the Bar
- chartjs : how to set custom scale in bar chart
- I would like to show a line bar in chart.js with data automatically fetched from mockapi
- Error with Chart.js : TypeError: t is undefined
- Chart.js pie chart not showing in Google Chrome canvas
- I want to add label on only specific vue chart
- multiple chartjs charts with the same configuration but different data
- Django show Graphs with ChartJS
- Chart.js addData is undefined when using SignalR
- ChartJS: Custom legend not showing Labels for Multi-Pie chart
- Cannot find module 'chart.js'
- How can I show texts only if they fit in the arc in Chart.Js 2.8.0?
- Collect json disordered, order it and show it in chart.js
- How to insert arrays into objects that are inside an array? For ng2-charts / Charts.js
- How to change orientation of the main y-axis label in charts.js?
- How to add horizontal scroll to a bar graph in chartjs?
- Chart.js: only show labels on x-axis for data points
- Chart.js & BPopUp - Make a Chart in a PopUP
- Converting ChartJSCore to Highcharts.net - issue with dynamic series data in a loop
- How to hide zero data value from chartjs?
- Chart.js Charts not loading until hard refresh [Laravel] [Laravel Charts]
- How to slice list items in Django Template using javascript (or similar)
- how to change display and styles of the labels in react-chartjs-2
- Leaflet polygon display charts after click
- Snapshot testing ChartJS components with Jest
- Bug : Overlay loading automatically (bootstrap) (laravel 5.2)
- Chart.js bezier curve discontinuity
- Create multiple chart by Chart.js
- Move x-axis to pass through given y-axis value in chart.js
- Chart.js: evenly distribute ticks when using maxTicksLimit