Chartjs-How to customize chart using chartJs?

by

2👍

✅

You are using the charts correctly, and you are using the appropriate type: line. All you have to do to show a chart exactly as the image’s is set the right values. I hope this gives you an idea

var presets = window.chartColors;
        var utils = Samples.utils;
        var inputs = {
            min: 0,
            max: 100,
            count: 8,
            decimals: 2,
            continuity: 1
        };

        function generateData(config) {
            return utils.numbers(Chart.helpers.merge(inputs, config || {}));
        }

        function generateLabels(config) {
            return utils.months(Chart.helpers.merge({
                count: inputs.count,
                section: 3
            }, config || {}));
        }

        var options = {
            maintainAspectRatio: false,
            spanGaps: false,
            elements: {
                line: {
                    tension: 0.000001
                }
            },
            plugins: {
                filler: {
                    propagate: false
                }
            },
            scales: {
                xAxes: [{
                    ticks: {
                        autoSkip: false,
                        maxRotation: 0
                    }
                }]
            }
        };

        [false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
              const canvas = document.getElementById('chart-' + index);
              if(canvas)
              {
               utils.srand(8);
               var ctx = canvas.getContext('2d');
              new Chart(ctx, {
                  type: 'line',
                  data: {
                      labels: generateLabels(),
                      datasets: [{
                          backgroundColor: utils.transparentize(presets.red),
                          borderColor: presets.red,
                          //data: generateData(),
                          data: [0, 0, 40, 0,0, 50, 0, 0, 0],
                          label: 'Dataset',
                          fill: boundary
                      }]
                  },
                  options: Chart.helpers.merge(options, {
                      title: {
                          text: 'fill: ' + boundary,
                          display: true,
                      }
                  })
              });
            }
        });
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>area > boundaries | Chart.js sample</title>
    <link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>

<body>
    <div class="content">
        <div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
    </div>

  
</body>

</html>

Leave a comment