Canvas With 30k

by kevalpanchal

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <div class="container">
   <div class="w-100 h-100 row">
     <div class="col-12">
       <div class="chart" style="width: 100%;height: 500px;" id="tempChart"></div>
     </div>
   </div>
 </div>

CSS

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

JavaScript

window.onload = function() {

  const chartData = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData1 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData2 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData3 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData4 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData5 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };

  const chartData6 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };


  const chartData7 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };


  const chartData8 = {
    type: 'spline',
    showInLegend: true,
    color: getRandomColor(),
    // name: formName,

    indexLabelPlacement: 'inside',
    highlightEnabled: true,
    dataPoints: []
  };


  const chartData9 = {
    type: 'spline',
    showInLegend: true,
    color:...