cschartjs.js

window.onload = function () {
  var chart1 = new CanvasJS.Chart("cschart", {
    title: {
      text: "Candle Stick Chart",
      fontFamily: "helvetica",
    },
    zoomEnabled: true,
    exportEnabled: true,
    axisY: {
      includeZero: false,
      title: "Prices",
      prefix: "$ ",
    },
    axisX: {
      interval: 2,
      intervalType: "month",
      valueFormatString: "MMM-YY",
      labelAngle: -45,
    },
    data: [
      {
        type: "candlestick",
        risingColor: "teal",
        color: "black",
        dataPoints: [
          { x: new Date(2012, 01, 01), y: [5198, 5629, 5159, 5385] },
          { x: new Date(2012, 02, 01), y: [5366, 5499, 5135, 5295] },
          { x: new Date(2012, 03, 01), y: [5296, 5378, 5154, 5248] },
          { x: new Date(2012, 04, 01), y: [5254, 5279, 4788, 4924] },
          { x: new Date(2012, 05, 01), y: [4910, 5286, 4770, 5278] },
          { x: new Date(2012, 06, 01), y: [5283, 5348, 5032, 5229] },
          { x: new Date(2012, 07, 01), y: [5220, 5448, 5164, 5258] },
          { x: new Date(2012, 08, 01), y: [5276, 5735, 5215, 5703] },
          { x: new Date(2012, 09, 01), y: [5704, 5815, 4888, 5619] },
          { x: new Date(2012, 10, 01), y: [5609, 5885, 5548, 5879] },
          { x: new Date(2012, 11, 01), y: [5878, 5965, 5823, 5905] },
          { x: new Date(2013, 00, 01), y: [5937, 6111, 5935, 6034] },
          { x: new Date(2013, 01, 01), y: [6040, 6052, 5671, 5693] },
          { x: new Date(2013, 02, 01), y: [5702, 5971, 5604, 5682] },
          { x: new Date(2013, 03, 01), y: [5697, 5962, 5477, 5930] },
          { x: new Date(2013, 04, 01), y: [5911, 6229, 5910, 5985] },
          { x: new Date(2013, 05, 01), y: [5997, 6011, 5566, 5842] },
          { x: new Date(2013, 06, 01), y: [5834, 6093, 5675, 5742] },
          { x: new Date(2013, 07, 01), y: [5776, 5808, 5118, 5471] },
          { x: new Date(2013, 08, 01), y: [5480, 6142, 5318, 5735] },
          { x: new Date(2013, 09, 01), y: [5756, 6309, 5700, 6299] },
          { x: new Date(2013, 10, 01), y: [6289, 6342, 5972, 6176] },
          { x: new Date(2013, 11, 01), y: [6171, 6415, 6129, 6304] },
        ],
      },
    ],
  });
  chart1.render();

  var chart2 = new CanvasJS.Chart("piechart", {
    title: {
      text: "Portfolio Doughnut",
    },
    legend: {
      maxWidth: 350,
      itemWidth: 120,
    },
    data: [
      {
        type: "doughnut",
        showInLegend: true,
        legendText: "{indexLabel}",
        dataPoints: [
          { y: 4181563, indexLabel: "ETHEREUM" },
          { y: 2175498, indexLabel: "BITCOIN" },
          { y: 3125844, indexLabel: "SOLONA" },
          { y: 1176121, indexLabel: "CARDANO" },
          { y: 1727161, indexLabel: "MAATIC" },
        ],
      },
    ],
  });
  chart2.render();
};