? ????? ?? Chart.js ??? ???? ? ? ?? ?? ??? ?????. ?? ?? ? ??? ??? ??????? ??? ?? ??? ???????.

?? ?? : ??? ??? ?? ??? ??????

?? ??? ?? ??? ???? ??? ? ??? ??? ????? ????? ?????. ?? ??, ??? ??? ?? ??? ??? ???? ? ??????.

Chart.js? ?? ?? ??? ??????. ????? ??? rgba(0, 0, 0, 0.1) ? ?????. ???? ???? backgroundColor ??? ???? fill ??? true ?? ??????. tension ?? ???? ?? ?? ??? ???? ??? ??? ?? ?? ??? ??? ????. "middle" ?? stepped ?? ??? ?? ??? ?????.

??? ??? ?? ?? ????? ???? ???? ? ? ????. ? ??? ? ?? ??? ??? ?????.

 const checkspeed = (ctx, color_a, color_b) => ctx.p0.parsed.y> ctx.p1.parsed.y? Color_A : Color_B;

DataFirst = {
  ??? : "??? A- ?? (mph)",
  ??? : [0, 59, 75, 20, 20, 55, 40],
  BorderColor : "Black",
  ?? ?? : "??",
  Borderdash : [3, 3],
  ??? : "??"
};

DataSecond = {
  ??? : "??? B- ?? (mph)",
  ??? : [20, 15, 15, 60, 60, 65, 30, 70],
  Bordercolor : "Blue",
  ?? ?? : "??",
  ???? : {
        BorderColor : CTX => CheckSpeed ??(CTX, 'Orangered', 'Yellowgreen'),
  },
};

speeddata = {
  ??? : [ "0S", "10S", "20S", "30S", "40S", "50S", "60S"],
  ??? ?? : [DataFirst, DataSecond]
};

LineChart = ??? ?? (SpeedCanvas, {
  ?? : "??",
  ??? : SpeedData
});

? ??? ?? ??? ???? ?????. ??? ???? orangered ?????. ??? ???, yellowgreen .

?? ?? : ?????? ?? y ?

???? ?? ?? ??? ??? ?? ?? y ?? ???? ???? ?????. ? ??? ??? yAxisID ?? ???? ?? y ?? ?? ? ? ????.

 gravitybars = '#f06292';
DensityBars = '#4DB6AC';

DensityData??? = {
  ??? : "??? ?? (kg/m3)",
  ??? : [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  ?? ?? : ?? ?,
  yaxisid : "y ? ??"
};

gravitydata??? = {
  ??? : "??? ?? (m/s2)",
  ??? : [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  ?? ??? : ?? ?,
  yaxisid : "y ? ??"
};

PlanetData = {
  ?? : [ "???", "??", "??", "??", "??", "??", "???", "Neptune"],
  ??? ?? : [DensityData, GravityData]
};

chartoptions = {
  ?? ?? : 1,
  CategoryPercentage : 0.8,
  ??? : {
    "y ? ??": {
      ??? : {
        ?? : ?? ?,
        TickColor : DensityBars,
        BorderColor : ?? ?
      },
      ??? : {
        ?? : ?? ?
      },
      ?? : "??"
    },
    "y ? ??": {
      ??? : {
        ?? : ?? ?,
        Tickcolor : ?? ?,
        BorderColor : ?? ?
      },
      ??? : {
        ?? : ?? ?
      },
      ?? : "???"
    }
  }
};

Barchart = ??? ?? (DensityCanvas, {
  ?? : "?",
  ??? : PlanetData,
  ?? : ChartOptions
});

? ??? ?? ? yAxisID ?? ???? chartOptions ?? ? ?? ?? ???, ??? ? ??? ??? ??? ?????. barPercentage ? categoryPercentage ??? ? ??.

??

? ????? Chart.js? ?? ?? ? ?? ?? ?? ? ??? ??? ???? ????? ????? ??? ??? ?? ? ????. ?? ????? ??? ? ?? ?? ??? ?????.

? ??? Chart.js : ?? ? ?? ??? ???? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!