Charts with too many X date to show

Need help
1

Hello,

I use the bubble plugin charts to display video audience data.
In some cases, there is too much information to write on the x-axis of the chart, which makes the legend unreadable.

I’ve tested the “Air Chart Lite - Best Free Charts” chart plugin, which has a “Hide overlapping label” function, but it still overlaps a bit.

I could reduce the amount of data to be displayed, but the chart would be less accurate, which is a real shame.

Do you have a tip for this kind of situation?

Here’s an example:

image
image1087×370 24 KB

Thank you,
Clem

2

If you’ve got some basic JavaScript knowledge (or you have the time and patience to learn), I’d consider working directly with the charts.js library (or other chart library), rather than relying on any plugin, when it comes to working with charts.

That way you have full control over every aspect of what your charts display, and how they display it… rather than trying to fit your objective into existing plugin functionality/limitations.

(of course, you could always build your own plugin, specifically to suit your use-case).

3

Thank you @adamhholmes for you quick answer !

I don’t have any skills with Java Script but I can check. Do you know the commande I need to use to play with the overlapping label ? I can start by that.

Thanks again

4

I don’t know the air chart lite plugin but if they give you the ability to differentiate between the chart x values and the chart x labels, then set the chart x labels to have blanks ever 2nd or 3rd value (or whatever number of blanks gets you the look you want). If it doesn’t give you that capability, then find a chart plugin that does or take @adamhholmes advice and learn some JS. Or hire someone that does know some JS

5

Hello,

Finally, here is the code I use, and it’s working fine (only problem is I have to use the “display as iframe” mode to display it, so it’s hard to make it responsive, if you have a tip :

<!DOCTYPE html>
<html>
<head>
    <title>Graphique d'audience vidéo</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="position: relative; width: 100%; padding-bottom: 50%;">
    <canvas id="audienceChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
</div>

<script>
    // Exemple de données pour l'axe X (temps)
    const temps = [BarChart A's nano's data:format as text]; // Vos données de temps

    // Génération des données pour l'axe Y (nombre de spectateurs) en multiples de 20
    const nombreSpectateurs = [BarChart A's nano's data:format as text];
    for (let i = 0; i <= 200; i += 20) {
        nombreSpectateurs.push(i.toString());
    }

    const ctx = document.getElementById('audienceChart').getContext('2d');

    const audienceChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: temps,
            datasets: [{
                label: 'Audience vidéo en fonction du temps',
                data: nombreSpectateurs,
                fill: false,
                borderColor: 'blue',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Temps (s)'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: 'Nombre de spectateurs'
                    },
                    ticks: {
                        stepSize: 20
                    }
                }
            }
        }
    });
</script>
</body>
</html>
6

This topic was automatically closed after 70 days. New replies are no longer allowed.