Chart js static chart - how to-CodePudding

Hi here's a canvas i am using as abackground for a card

just want it static without hover,tooltip or label or any legends just the line chart with its background colour as a static chart.

if anyone can help with options{ apt to disable all of these.you'll be a legedn thank you

 <canvas class = "w-100" id="myChartfill" >
                <script>
                    chartData4 = 
                    {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                    datasets: [{
                   
                    data: [10, 59, 80, 81, 56, 55, 40],
                    fill: true,
                    backgroundColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                 
                    }]
                    }
                    ;
                    const myChartfill = document.getElementById('myChartfill');
                    
                    if(myChartfill!=null){
                    new Chart(myChartfill, {
                      type: 'line',
                    data: chartData4,
                    options: {
                        
    

                  }
                    }
                    )}
                  
                  
                  </script>


            </canvas>

CodePudding user response：

Use the script outside the canvas

chartData4 = 
    {    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
         datasets: [{
             data: [10, 59, 80, 81, 56, 55, 40],
             fill: true,
             backgroundColor: 'rgb(75, 192, 192)',
             tension: 0.1,
         }]
    };
    const myChartfill = document.getElementById('myChartfill');
     
    if(myChartfill!=null){
        new Chart(myChartfill, {
            type: 'line',
            data: chartData4,
            options: {
                tooltips: {
                    enabled: false,
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{display: false}],
                    yAxes: [{display: false}],
                }
        }
    )}

    .container {
      display: flex;
        width: 100%;
       height: 50vh;
    }

<div >
    <canvas class = "w-100" id="myChartfill"></canvas>
</div>

CodePudding user response：

options: {
    tooltips: {
      enabled: false,
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{display: false}],
      yAxes: [{display: false}],
    }
  }