JSFiddle - React, Tailwind, and code Playground

by sergiu079

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<div id="ChartTestCont">
<canvas id="ChartTest" width="355" height="146"></canvas>
</div>

CSS

#ChartTestCont {
		width: 355px;
		height: 146px;
		padding: 10px 0 10px 5px;
		background: #97A0DC;
		background: -moz-linear-gradient(top,  #97A0DC 0%, #7A83C3 100%);
		background: -webkit-linear-gradient(top,  #97A0DC 0%,#7A83C3 100%);
		background: linear-gradient(to bottom,  #97A0DC 0%,#7A83C3 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97A0DC', endColorstr='#7A83C3',GradientType=0 );
		border-radius: 3px;
	}

#ChartTest {
  width: 355px;
  height: 146px;
}

JavaScript

var ctx = document.getElementById("ChartTest").getContext("2d");
var data = {
  labels: ["16. nov","24. nov","25. nov","26. nov","27. nov","28. nov","29. nov","30. nov"," 3. dec"," 5. dec"," 7. dec"," 9. dec","14. dec","15. dec","24. dec"," 4. jan"," 8. jan"],
  datasets: [
  {
  label: "Skatījumi",
  tension: 0,
  fill: true,
  backgroundColor: "rgba(255,255,255,0.12)",
  borderColor: "rgba(255,255,255,1)",
  radius: 4,
  pointHoverRadius: 5,
  hitRadius: 5,
  pointBorderColor: "rgba(255,255,255,1)",
  pointBackgroundColor: "rgba(255,255,255,1)",
  pointHoverBorderColor: "rgba(255,255,255,1)",
  pointHoverBackgroundColor: "rgba(255,255,255,1)",
  data: [1,1,1,4,2,2,3,2,1,1,2,1,1,3,1,2,1]
}
]
};
new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true
        },
        position: 'bottom',
        ticks: {
          fontSize: 11,
          fontColor: '#ffffff',
          fontFamily: 'Arial, sans-serif',
          maxRotation: 0
        }
      }],
      yAxes: [{
        gridLines: {
          color: "rgba(255, 255, 255, 0.5)",
          zeroLineColor: "rgba(255, 255, 255, 0.5)"
        },
        position: 'right',
        ticks: {
          fontSize: 11,
          fontColor: '#ffffff',
          fontFamily: 'Arial, sans-serif'
        }
      }]
    }
  }
});