How to fix a stacked logarithmic bar chart values to fit the grid

Question

I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?

The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:

{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}

I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.

I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.

let myChart = new Chart(ctx2, {
    type: 'horizontalBar',
    data: {
        labels: [],
        datasets: [],
    },
    options: {
    labels:'50px',
    borderWidth:1,
        maintainAspectRatio: false, 
        scales: {
        xAxes: [{
        stacked:true,
        barPercentage: 1,
            ticks:{
                autoSkip: false,
                pointLabelFontSize: '20px'
            },
        }],
        yAxes: [{ 
      stacked: true,
      barPercentage: 0.4,
            ticks:{
            fontColor: 'rgb(0, 0, 0)'},
            fontSize:500,
        }],
        }
    }
});

The expected result would be the values fit the values in the grid and the bars stays on canvas.

I've tried to recreate the problem in a codepen, but it works as expected(codepen.io/PandaStyle/pen/bOKKOw), but in my project somehow does'nt work with the same datas.The difference there is that I got the data from a several ajax call , and I run a several function to make up the data for chart.js, than push the labels after that push the datasets and finally update the chart but everytime I do that I get the result seen on the picture included in the question. — Balint

Balint Balint · Accepted Answer · 2019-01-08T14:48:48

Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.

How to fix a stacked logarithmic bar chart values to fit the grid

1 Answers