Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[URGENT] Trying to replicate results on 3.4.1 #9689

Closed
thisisiris opened this issue Sep 28, 2021 · 6 comments
Closed

[URGENT] Trying to replicate results on 3.4.1 #9689

thisisiris opened this issue Sep 28, 2021 · 6 comments

Comments

@thisisiris
Copy link

thisisiris commented Sep 28, 2021

i am creating a bar/line chart on the same xaxis. however i seem to be having multiple labels of the xaxis stacking up on each other.
Screenshot 2021-09-28 at 18 30 23

i am getting the results in @nagix second example but want the result from the first in terms of the xaxis.
#5224 (comment)

** the line and one of the bars are sharing the same xAxisId while the other is on its own.
my data arrays are generated using javascript calculations after user input in html.

sorry my code is quite messy still a newbie at this **
here are my chart options:

var options = {
          scales: {
            x: [{
              stacked: true,
              id: "bar-x-axis1",
              barThickness: 70,
              display: false,
            }, {
              stacked: true,
              id: "bar-x-axis2",
              barThickness: 70,
              // these are needed because the bar controller defaults set only the first x axis properties
              type: 'category',
              categoryPercentage: 0.8,
              barPercentage: 0.9,
              gridLines: {
                offsetGridLines: true
              },
              display: false,
              offset: true,
            }],
            y: [{
              stacked: false,
              ticks: {
                beginAtZero: true
              },
            }]
        
          }
        };
@thisisiris thisisiris changed the title Trying to get the same results on 3.4.1 [URGENT] Trying to get the same results on 3.4.1 Sep 28, 2021
@thisisiris thisisiris changed the title [URGENT] Trying to get the same results on 3.4.1 [URGENT] Trying to replicate results on 3.4.1 Sep 28, 2021
@LeeLenaleee
Copy link
Collaborator

in V3 the scales have changed from an array to objects where the key of the object is the ID of the scale.

Then you can set display: false so you will get something like this:

scales: {
  "bar-x-axis1": {
    stacked: true,
    barThickness: 70,
    display: false
  },
  "bar-x-axis2": {
    stacked: true,
    barThickness: 70,
    // these are needed because the bar controller defaults set only the first x axis properties
    type: 'category',
    categoryPercentage: 0.8,
    barPercentage: 0.9,
    gridLines: {
      offsetGridLines: true
    },
    display: false,
    offset: true,
  },
  y: {
    stacked: false,
    beginAtZero: true
  }
}

@thisisiris
Copy link
Author

thisisiris commented Sep 28, 2021

Screenshot 2021-09-28 at 22 34 37

this is what i get after putting in the adjusted code^^

@LeeLenaleee it doesn't display any x-axis labels and displays an extra y-axis label instead... is the chart.js version u used 3.4.1? would it be better if i switched over to 3.5.1 instead?

i figure that asking for help with providing the way my data is structured will help more:

var data = {
          labels: Hage_data,
          datasets: [{
            label: 'How much you have at Retirement',
            type:'bar',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderWidth: 1,
            data: b1_data,
            xAxisID: "bar-x-axis1",
          }, {
            label: "where you need to be",
            type:'bar',
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            borderWidth: 1,
            data: b2_data,
            xAxisID: "bar-x-axis2",
          }, {
            label: "line",
            type:'line',
            backgroundColor: 'rgba(78, 206, 100, 0.2)',
            borderWidth: 1,
            data: l_data,
            xAxisID: "bar-x-axis2",
            fill: false,
          }]
        };

for reference:
Hage_data = the category data points that should be showing on the x-axis.
b1_data = the first bar chart
b2_data = the second bar chart
l_data = the line chart

basicaly what im looking for is something like this (in a hypothetical situation):
b1_data = [0,0,0,0,3];
b2_data = [0,0,0,0,2];
l_data = [1,1.5,2,2.5,3];
Hage_data = [21,22,23,24,25];
Screenshot 2021-09-28 at 23 19 10

@etimberg
Copy link
Member

A better solution might be to use the floating bar feature because otherwise the bars draw on top of each other and the colours do not blend well. https://jsfiddle.net/3wfsodct/

@thisisiris
Copy link
Author

I actually want them to be drawn on top of each other since i will eventually change the two colours to different shades of grey and considering that my data will be generated through calculations it will be harder to have the code automatically form it an array within an array...

@etimberg
Copy link
Member

etimberg commented Oct 1, 2021

Ah, ok. In that case I think you can just removing the floating bar from the fiddle above. The axes are already close to your ideal image

@thisisiris
Copy link
Author

Thank you soo much for your help @etimberg the fiddle really helped!! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants