Skip to main content

# Chart.js v2.7.2

Simple yet flexible JavaScript charting for designers & developers. Made by our friends from Charts.js. Please check the full documentation</a>.

    <!-- markup -->
    <canvas id="lineChartExample"></canvas>

    <!-- javascript init -->
    // General configuration for the charts with Line gradientStroke
    gradientChartOptionsConfiguration =  {
      maintainAspectRatio: false,
      legend: {
            display: false
       },

       tooltips: {
         backgroundColor: '#fff',
         titleFontColor: '#333',
         bodyFontColor: '#666',
         bodySpacing: 4,
         xPadding: 12,
         mode: "nearest",
         intersect: 0,
         position: "nearest"
       },
       responsive: true,
       scales:{
         yAxes: [{
           barPercentage: 1.6,
               gridLines: {
                 drawBorder: false,
                   color: 'rgba(29,140,248,0.0)',
                   zeroLineColor: "transparent",
               },
               ticks: {
                 suggestedMin:50,
                 suggestedMax: 110,
                   padding: 20,
                   fontColor: "#9a9a9a"
               }
             }],

         xAxes: [{
           barPercentage: 1.6,
               gridLines: {
                 drawBorder: false,
                   color: 'rgba(220,53,69,0.1)',
                   zeroLineColor: "transparent",
               },
               ticks: {
                   padding: 20,
                   fontColor: "#9a9a9a"
               }
             }]
         }
    };

    var ctx = document.getElementById("lineChartExample").getContext("2d");

    var gradientStroke = ctx.createLinearGradient(0,230,0,50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
    gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

    var data = {
      labels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
      datasets: [{
        label: "Data",
        fill: true,
        backgroundColor: gradientStroke,
        borderColor: '#d048b6',
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: '#d048b6',
        pointBorderColor:'rgba(255,255,255,0)',
        pointHoverBackgroundColor: '#d048b6',
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: [ 60,110,70,100, 75, 90, 80, 100, 70, 80, 120, 80],
      }]
    };

    var myChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: gradientChartOptionsConfiguration
    });