[UI] Some language names are not showing in the chart about github-langs

[wildan3105]

Found an issue about it chartjs

After change the xAxes into this :

xAxes: [{
          stacked: false,
          beginAtZero: true,
          ticks: {
            fontColor: color,
            autoSkip: false
          }
        }]

Then it printed out all the x-axis title like this :

Is it messy, right? How should we fix this?

[juancuiule]

@wildan3105 when I added the chart I realized that this was happening and made some css rules in order to make the graph responsive, but when we load an user with such an amount of languages it breaks anyway. We could try by showing the language tag when the bar is :hover. I can take a look at this later today, but if @IOAyman wants to take it that's 👍

[wildan3105]

I'm aware of this. I thought this bug was from chart.js? Let's discuss it here

[IOAyman]

@juancuiule, Please do, I don't mind at all 😉

Thank you :)

[juancuiule]

Google screenshot:

Regular Human screenshot:

I found that we could rotate the xAxis labels 90° an they will fit if we make the graph almost 100% width which does not look good with a few languages... we can add something to change this in execution time analyzing the number of languages that the user has.

@IOAyman @wildan3105 any feedback?

[wildan3105]

I think we should limit the display of chart when a user has more than n repo language to fit the screen. My thought is the screen should remain constant, and the width must not exceed too far from the width of search bar.

[juancuiule]

how many languages are you thinking?

[wildan3105]

As long as it not exceed the screen bar's width too much, that would be okay. I could see that chart.js has a relative size for single vertical bar based on the data length, right? Maybe we could do trial-error (with different user's repo amount) to count how many languages are best to display.

[juancuiule]

I think that 20 is a good number, and I think that we could add a few features (a dropdown or something like that) in order to allow the user to see more than 20, or just to sum every other language in a bar that says "Others"

[wildan3105]

Closed by #41