html5 canvas - How to show labels of dataset using chart.js -
function drawBarChart () {
var data = {label: [ "January" "Feb", "March", "April", "May", "June", "July"], datasets: [{label: "My first dataset", fillColor: "RGBA (220,220,220,0.5)", strokeColor: "RGBA (220,220,220,0.8)", highlightFill: "RGBA (220,220,220,0.75)", highlightStroke: "RGBA (220,220,220,1)", data [65, 59, 80, 81, 56, 55, 40]}, {label: "My second dataset", fillColor: "RGBA (151,187,205,0.5)", strokeColor: "RGBA (151,187,205,0.8)", highlightFill: "RGBA (151,187,205,0.75)", highlightStroke: "RGBA (151,187,205,1 ) ", Data: [28, 48, 40, 19, 86, 27, 90]}]}}; Var ctx = document.getElementById ("barchart"). GetContext ("2D"); Var myBarChart = New chart (CTX) .bar (data); }
This time my job to draw the graph I my problem is that I've tried those methods where I graph datasets labeled "My bottom The first dataset "I want to show. I am using chart.js Please let me know if anyone has managed to achieve the same.
I think you want to be displayed at the bottom of the graph with a chart legend labels. You can try adding it to your code
. & Lt; Style type = "text / css" & gt; . Chart-Legend Lee {List-style-type: none; Padding-top: 10px; }. Chart-Legend Lee Span {Display: Inline-Block; Width: 12px; Height: 12px; Margin-right: 5px; } & Lt; / Style & gt; & Lt; Div id = "sample" class = "chart-legend" & gt; & Lt; / Div & gt; & Lt; Script & gt; Var data = {label: [ "January", "Feb", "March", "April", "May", "June", "July"], datasets: [{label: "My first dataset", FillColor: "RGBA (220,220,220,0.5)", strokeColor: "RGBA (220,220,220,0.8)", highlightFill: "RGBA (220,220,220,0.75)", highlightStroke: "RGBA (220,220,220,1)", data [65, 59, 80 , 81, 56, 55, 40]}, {label: "My second dataset", fillColor: "RGBA (151,187,205,0.5)", strokeColor: "RGBA (151,187,205,0.8)", highlightFill: "RGBA (151,187,205,0.75 ) ", highlightStroke:" RGBA (151,187,205,1) ", data [28, 48, 40, 19, 86, 27, 90]}]}; Var ctx = document.getElementById ( "barchart") getContext ( "2-D") .; Var myBarChart = New chart (CTX) .bar (data); Document.getElementById ('Sample'). InnerHTML = myBarChart.generateLegend (); } & Lt; / Script & gt;
Comments
Post a Comment