Not sure what I'm doing incorrectly - works on one chart, not the other

[WolfShade-2k17]

Hello, everyone,

I'm using ChartJS for the first time. I've never used a chart generating library, before. Total n00b.

I'm trying to create a function that runs on DOMContentLoaded. Just plugging in some random numbers, for testing.

I'm trying to do some things like narrow the width of the colors for the legend, etc. It works on one chart, but not the other.

This function creates two charts. The first one is doing what I want, the second is not. I'm sure I'm missing something simple, but my eyes are just not seeing it. Please help.

function initial_page_load(){ new Chart( document.getElementById('shipmentsChart'), { type: 'bar', data: { labels: ['dHHG','iHHG','iUB'], datasets: [ { label: 'HMVA', data: [1010,4890,860], backgroundColor: '#17375e' }, { label: 'Program', data: [16121,89513,53708], backgroundColor: '#949494' } ] }, options:{ title:{display:false}, scales:{ xAxes:[{ display:true, barPercentage: 0.46 }], yAxes:[{ display:true, min:0, ticks:{ beginAtZero: true, stepSize: 25000 } }] }, legend:{ display:true, position:'bottom', labels:{ boxWidth: 10 } } } } ); new Chart( document.getElementById('onTime'), { type: 'line', data:{ labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], datasets:[ { label: 'Overall AVG', data: [30,20,18,16,22,25,28,31,35,39,36,33], backgroundColor: '#4f81bd', borderColor: '#4f81bd', fill: false }, { label: 'Overall YTD', data: [35,25,22,26,32], backgroundColor: '#c0504d', borderColor: '#c0504d', fill: false }, { label: 'TSP YTD', data: [10,20,23,27,32], backgroundColor: '#9bbb59', borderColor: '#9bbb59', fill: false } ] }, legend:{ display: 'true', position: 'bottom', labels:{ boxWidth: 10 } }, options:{ scales:{ yAxes:{ ticks:{ min: 0, max: 100, stepSize: 10, callback: function(value){return value + "%";} } } } } } ) } window.addEventListener("DOMContentLoaded",initial_page_load);

Thank you,

WolfShade
^ _ ^

[LeeLenaleee]

Your legend config block was not in the options object: https://jsfiddle.net/Leelenaleee/pgzr0b7n/1/

[WolfShade-2k17]

@LeeLenaleee you can't see it, now, but I'm facepalming myself. Thank you!

V/r,

^ _ ^

[LeeLenaleee]

@WolfShade-2k17 noticed you are using V2 of the lib, V3 released a few months ago with breaking changes over V2 so unless you really want to use a plugin that is only for V2 yet I would advice you to try migrating asap to V3 because now its less work still :)

[WolfShade-2k17]

@LeeLenaleee yes, I'm okay with using v2.9.4.

Although I am surprised. I thought I was using the latest version. I d/l'd 2.9.4 only about a month ago.

(shrug)

V/r,

^ _ ^