how to change background in chartjs and remove background lines?

Question

How to change background color, and remove this lines, and how to cahnge some tex,

for example: text of point, when you hover on some point you get title and value of this.

my js

function creating_chart(get_wrapper,type_of_chart, labels_of_chart, data_of_charts, title_of_chart){
                var ctx = document.getElementById(get_wrapper).getContext('2d');
                var myChart = new Chart(ctx, {
                    type: type_of_chart,
                    data: {
                        labels: labels_of_chart,
                        datasets: [{
                            label: title_of_chart,
                            data: [2220, 19998, 55547, 55784, 999985], //data_of_charts
                            backgroundColor: [
                                'rgba(47, 152, 208, 0.2)',
                            ],
                            borderColor: [
                                'rgba(19, 247, 228,1)',
                            ],
                            borderWidth: 2,
                            pointBackgroundColor: 'rgba(19, 247, 228,1)',
                            pointBorderColor: 'rgba(19, 247, 228,1)',
                            pointBorderWidth: 5,
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });
            };

Answer 1

change background color

use css to set background color for canvas (chart) element :

canvas {
   background-color: rgba(47, 152, 208, 0.1);
}

remove grid-lines

set display property of gridLines to false for both x and y axis :

scales: {
   xAxes: [{
      gridLines: {
         display: false
      }
   }],
   yAxes: [{
      gridLines: {
         display: false
      }
   }]
}

change text of tooltip­'s label (add $ symbol)

use a callback function for tooltips label, as such :

tooltips: {
   callbacks: {
      label: function(t, d) {
         var xLabel = d.datasets[t.datasetIndex].label;
         var yLabel = d.datasets[t.datasetIndex].data[t.index];
         return xLabel + ': $' + yLabel;
      }
   }
}

see a working example.