javascript - Bubble chart and colors not rendering with dataSets -
i'm using chart.js , angular-chart.js create label-less bubble chart 2 data points. working when wasn't using datasets property, tacking on data array 2 points, seems way change background color use datasets causes points not render. empty chart.
i'm missing obvious seems prototypical example of what's in docs. seems angular-chart.js chart-data directive needs map directly data array, correct in this? i'm new using these libraries (and javascript development in general) i'm having hard time debugging this.
this markup
<div class="chart-container col-xs-12"> <canvas id="chart" class="chart chart-bubble" chart-data="mycontroller.chartconfig.datasets" chart-series="mycontroller.chartconfig.series" chart-options="mycontroller.chartconfig.options" print-chart></canvas> </div> this chart configuration.
vm.chartconfig = { datasets: [{ label: 'label 1', backgroundcolor: 'rgba(0,200,0,0.5)', bordercolor: 'rgba(0,200,0,0.5)', borderwidth: 1, data: [{ x: 80, y: -10, r: 10 }] }, { label: 'label 2', backgroundcolor: 'rgba(0,200,200,0.5)', bordercolor: 'rgba(0,200,200,0.5)', borderwidth: 1, data: [{ x: -50, y: 40, r: 10 }] }], series: ['series 1', 'series 2'], options: { scales: { xaxes: [{ gridlines: { drawborder: false, offsetgridlines: true }, margins: { left: 0, right: 0, top: 0, bottom: 0 }, ticks: { display: false, min: -100, max: 100, stepsize: 25 } }], yaxes: [{ gridlines: { drawborder: false, offsetgridlines: true }, margins: { left: 0, right: 0, top: 0, bottom: 0 }, ticks: { display: false, min: -100, max: 100, stepsize: 25 } }] } } }; thanks.
Comments
Post a Comment