0

I am creating a program with a chart that has two x-axis, and one y-axis, but I want to make the chart smaller.

When I tried "width: 50px", and "height: 50px", it did not resize. I also added responsive: true to the settings of the chart, but that didn't work. Is there any solution to this?

Current Code:

JS:

const data = {
    //labels: ['Younger Than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
    
    datasets: [{
        label: 'Races/Ethnicities',
        data: [
          20, 30, 30, 40, 50
        ],
        backgroundColor: 'rgba(255, 26, 104, 0.2)',
        borderColor: 'rgba(255, 26, 104, 1)',
        tension: 0.4,
        yAxisID: 'y'     
    }, 
    {
        label: 'Ages',
        data: [
          10, 20, 30, 40, 50
        ],
        backgroundColor: 'rgba(0, 26, 104, 0.2)',
        borderColor: 'rgba(0, 26, 104, 1)',
        tension: 0.4,
    }]
};

    // config 
    const config = {
      maintainAspectRatio: false,
      responsive: true,
      type: 'line',
      data,
      options: {
        scales: {
          y: {
            beginAtZero: true,
            type: 'linear',
            position: 'left'
          },
          x1: {
            labels: ['White (Non-Hispanic)', 'Black (Non-Hispanic)', 'Hispanic (Black Or White)', 'Asian', 'Unknown'],
          },
          x2: {
            position: 'top',
            labels: ['Younger than 18', '18-30', '31-45', 'Older than 45', 'Unknown'],
          },
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('chart'),
      config
    );

    // Instantly assign Chart.js version
    const chartVersion = document.getElementById('chartVersion');
    chartVersion.innerText = Chart.version;

HTML:

<canvas id="chart"></canvas>

CSS:

#chart {
    background: black;
    padding: 20px;
    border-radius: 30px;
    margin-bottom: 50px;
    width: 20px;
    height: 20px;
}

1 Answers1

0

In your css style, need to change width and height to max-width and max-height.

I tried this code myself and it was OK.

#chart {
        background: black;
        padding: 20px;
        border-radius: 30px;
        margin-bottom: 50px;
        max-width:  1000px;//change here to resize
        max-height: 500px;
    }

And I use following js code

<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js'></script>

democode

fallfall1995
  • 11
  • 3