Chartjs-Chartjs custom dynamic legend overflowing

by

1👍

✅

Change height to auto on .chart-container and add min-height of 100%.

.chart-container {
  display: flex;
  flex-direction: column;
  border: solid 2px red;
  height: auto;
  min-height: 100%;
  position: relative;
  width: 500px;
}

http://jsfiddle.net/o0Lok3y0/

You can add javascript to change height of the chart after the legend is added.

var legend = document.getElementById('js-legend'),
    canvas = document.getElementById('myChart');

legend.innerHTML = "This dynamically generated line of text should be within chart-container but it is incorrect"

var legendStyle = window.getComputedStyle(legend),
    canvasStyle = window.getComputedStyle(canvas),
    legendHeight = legendStyle.height.replace("px", ""),
    canvasHeight = canvasStyle.height.replace("px", "");

canvas.style.height = (canvasHeight - legendHeight) + 'px';

http://jsfiddle.net/7m7hbrhn/

Leave a comment