i want donut chart, problem can't find js/jquery library out there can give me result want.
i tried chartjs apparently, not allow html tags nor @ least line breaks in label. , if managed add, seems label responsible chart.js chart legend, if append string in label legend "broken". want show more information in label.
not parsing html tags: 
var config1 = { type: 'doughnut', data : { labels: [ "pass<br/>" + "move test: 1<br/>" + "increment test: 2<br/>" + "rewrite test: 19", "fail", ], datasets: [ { data: data: [22, 4], backgroundcolor: [ "#1aff00", "#ff0a0a", ], hoverbackgroundcolor: [ "#20ff08", "#ff0000", ] }] }, options : { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'all entries passed vs fail different tests' }, animation: { animatescale: true, animaterotate: true } } }; do guys know other library can use that? or if there's trick can on chart.js?
thank you!
you can separate labels legends providing label callback (in options), , can make tooltip label multi-line passing array of strings (as per documentation).
var ctx = document.getelementbyid("canvas"); var data = { type: 'doughnut', data: { labels: [ "pass", "fail", ], datasets: [ { data: [22, 4], backgroundcolor: [ "#1aff00", "#ff0a0a", ], hoverbackgroundcolor: [ "#20ff08", "#ff0000", ] }] }, options : { responsive: true, legend: { position: 'top', }, title: { display: true, text: 'all entries passed vs fail different tests' }, animation: { animatescale: true, animaterotate: true }, tooltips: { callbacks: { label: function(tooltipitems, data) { if(data.labels[tooltipitems.index] == 'pass') { return ['pass','move test: 1','increment test: 2','rewrite test: 19']; } return data.labels[tooltipitems.index]; } } } } }; var thechart = new chart(ctx, data);<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.2.1/chart.min.js"></script> <canvas id="canvas" height="150"></canvas>
Comments
Post a Comment