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

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -