LineChart colored segmetns

by bairog

HTML

<div id="chartDiv"><canvas id="chart"></canvas></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

JavaScript

const genericOptions = {
  fill: false,
  interaction: {
    intersect: false
  },
	scales: {
            yAxis: {
                axis: 'y',
                min: -1,
                grace: '5%'
            }
        }
};


var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
    datasets: [{
      label: 'My First Dataset',
      data: [2, 4, 1, 2, 12, 6, 1, 9, 2],
      backgroundColor: 'black',
			borderColor: 'black'			
    }]
  },
  options: genericOptions
});