how to pass variables to Chart() ?

[chk1xn]

I'd like to use different aspect ratios for my charts, depending on the user's display width by quering Math.max(document.documentElement.clientWidth, window.innerWidth || 0) first.

How can I send this value/variable down to the options section of the chart's data definitions, ie stick it
options: { [...] aspectRatio: ### <- here?

Thanks.

[LeeLenaleee]

You can just pass a variable with your calculated aspectRatio like so:

const max = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
console.log(max)
const aspectRatio = max / max // Calculate correct aspectRatio here

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    aspectRatio: aspectRatio
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/Leelenaleee/cfg98xdh/3/

[chk1xn]

works like a charm! thanks very much.

[jaxx0rr]

its sad to see people forced to use old versions of chart.js because the documentation is complete dogshit and all the examples on stackoverflow are from old versions and the bars do not stack any more ...

[kurkle]

thanks for this valuable comment

[LeeLenaleee]

Best Jaxx,

Chart.js is fully made, supported and maintained by volunteers. We do not get paid to make and update this library.

Do while we do our best to make sure the documentation is as clear as it can be there will always be room for improvements.

If you find the documentation hard to understand you are welcome to put in a pull request with enhancements so the documentation becomes more clear for everyone.

About your second point that there is no stacked bar support anymore and no V3 samples on stackoverflow, both are not true. If you open this link the first few stack answers all are for V3 and contain stacked bars: https://www.google.com/search?q=chartjs+3+stacked+bar+site%3Astackoverflow.com&client=ms-unknown&biw=360&bih=560&tbs=qdr%3Ay&sxsrf=AOaemvJhDUN92cgJJiHRjFk_fktRclS-IA%3A1643023788200&ei=rI3uYfDIC6LikgW__7SICw&oq=chartjs+3+stacked+bar+site%3Astackoverflow.com&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAM6BwgAEEcQsANKBAhBGABQ4A5YrUtgt05oAXABeACAAX-IAeIGkgEDOC4zmAEAoAEByAEIwAEB&sclient=mobile-gws-wiz-serp

I hope I have informed you a bit with this information and could be of help to you.

Kind regards

[jaxx0rr]

i never said there is no suport.. just that the examples are really bad.. stop using constants and include the whole thing in one example instead of 3 confusing tabs..

regarding stackoverflow, they all contain either:
-old versions
-versions that do not work standalone and require node.js or some other bs
-have lines instead of bars..

https://stackoverflow.com/questions/43689252/how-to-show-stacked-and-unstacked-bar-graphs-together-in-chart-js
https://stackoverflow.com/questions/67780198/chartjs-3-get-height-of-stacked-vertical-bar
https://stackoverflow.com/questions/67789090/show-data-values-in-chart-js-bars-version-3

if someone else gets here this worked for me.. and it can be placed in a php function to have multiple charts on same page (no constants used)

<div style="height: 500px">
<canvas id="chart_1" ></canvas>
</div>
<script>

chart = new Chart(document.getElementById('chart_1').getContext('2d'), {
    type: 'bar',
    data: {
        labels: ["One", "Two", "Three"],
        datasets: [{
                label: 'Blue',
                data: [100, 110, 120],
                backgroundColor: 'blue',
            },
            {
                label: 'Red',
                data: [30, 20, 10],
                backgroundColor: 'red',
            },
        ]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Example',
                font: {
                    size: 14
                }
            },
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true
            }
        }
    }
});
</script>