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>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

JavaScript

function skipped (ctx, value) {
		if (ctx.p0.skip || ctx.p1.skip) {
				//ctx.p0.options.backgroundColor = value;
				//ctx.p0.options.borderColor = value;
				return value;
		}
		 		
		else
		 		return undefined;
} 

function down (ctx, value) {
		if (ctx.p0.parsed.y > ctx.p1.parsed.y) {
		    //line segment is going to be red - so p1 color should be also red
				ctx.p1.options.backgroundColor = value;
				ctx.p1.options.borderColor = value;
				return value;
		}		 		
		else{
		    //line segment is going to be cyan (default dataset color) - so p0 and p1 color should be also cyan
				return undefined;
		}		 		
}


function pointColor(context) {
    return context.parsed.y > 60
        ? 'red'
        : 'blue';
}

const genericOptions = {
  fill: false,
  interaction: {
    intersect: false
  }
};


var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7"],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, NaN, 48, 56, 57, 40],
      backgroundColor: 'rgb(75, 192, 192)',
			borderColor: ctx => pointColor(ctx),
			pointBackgroundColor: ctx => pointColor(ctx),
			pointBorderColor: ctx => pointColor(ctx),
			
			segment: {
			  backgroundColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [10, 10]),
      }
    }]
  },
  options: genericOptions
});