CODEWITHSUNDEEP
javascriptchart.js
Balint
Balint

Reputation: 11

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

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.sstatic.net/nm2Pj.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.

Upvotes: 0

Views: 200

Answers (1)

Balint
Balint

Reputation: 11

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.

Upvotes: 1

Related Questions