Canvas js renders in the HTML element with id specified in the constructor. This becomes a real problem, since I am rendering it in a template using marionette.view, therefore, for the different charts the id’s the same, but the selector differs, or, better said the DOM tree path to that element is different. It seems that default, the chart is rendered into the very first element that matches id in the dom tree.
Example: CanvasJS.Chart($(“.firstChartClass #chart”).attr(‘id’), someChart) and CanvasJS.Chart($(“.secondChartClass #chart”).attr(‘id’) , anotherChart)
will render both charts in the same element, the first one parsed in the DOM tree. Actually, first chart is rendered, and the second is rendered over the first one, but visually you only see the second. Is there really no other way to specify the container, than the ID as a string?
Of course I could create distinct IDs, but that would result in duplicating all the html templates and this is not what I want.
I solved the problem by customizing the template and generating distinct IDs. I also found out that having multiple elements with the same ID is a bad practice and should be avoided. Still, it would have been nice to have alternative ways of specifying the container.