Scribd
Upload
9 views3 pages

Line Chart

The document is an HTML page that implements a line chart using Chart.js, featuring a gradient background for two datasets labeled 'Highest' and 'Lowest'. It includes JavaScript functions to create gradient backgrounds and configures chart options such as responsiveness, legend display, and axis settings. The chart visualizes data for the months from January to June.

Uploaded by

sansan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

Line Chart

The document is an HTML page that implements a line chart using Chart.js, featuring a gradient background for two datasets labeled 'Highest' and 'Lowest'. It includes JavaScript functions to create gradient backgrounds and configures chart options such as responsiveness, legend display, and axis settings. The chart visualizes data for the months from January to June.

Uploaded by

sansan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js Line Chart with Gradient Background</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 80%; margin: auto; padding: 20px;">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

<script>
// Get the canvas context
const ctx = document.getElementById('myChart').getContext('2d');

// Function to create gradient for background fill


function createBackgroundGradient1(ctx, chartArea, color1, color2) {
const gradient = ctx.createLinearGradient(0, chartArea.top, 0,
chartArea.bottom);
gradient.addColorStop(0, color1);
gradient.addColorStop(0.3, color2);
gradient.addColorStop(1, color2);
return gradient;
}
function createBackgroundGradient2(ctx, chartArea, color1, color2) {
const gradient = ctx.createLinearGradient(0, chartArea.top, 0,
chartArea.bottom);
gradient.addColorStop(0, color1);
gradient.addColorStop(0.8, color2);
gradient.addColorStop(1, color2);
return gradient;
}

// Chart configuration
const config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: 'Highest',
data: [65, 59, 80, 89, 56, 55],
borderWidth: 2,
tension: 0,
borderColor: 'rgba(255,99,132,1)',
pointBackgroundColor: 'rgba(255,99,132,1)',
backgroundColor: (context) => {
const chart = context.chart;
const { chartArea } = chart;
if (!chartArea) return; // Prevent errors during
resizing
return createBackgroundGradient1(ctx, chartArea,
'rgba(255,99,132,0.5)', 'rgba(255,99,132,0)');
},
fill: true,
},
{
label: 'Lowest',
data: [28, 48, 40, 19, 51, 27],
borderWidth: 2,
tension: 0,
borderColor: 'rgba(54,162,235,1)',
pointBackgroundColor: 'rgba(54,162,235,1)',
backgroundColor: (context) => {
const chart = context.chart;
const { chartArea } = chart;
if (!chartArea) return;
return createBackgroundGradient2(ctx, chartArea,
'rgba(54,162,235,0.5)', 'rgba(54,162,235,0)');
},
fill: true,
},
],
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
usePointStyle: true,
},
},
},
elements: {
line: {
borderWidth: 3,
},
},
scales: {
x: {
grid: {
display: false,
},
ticks: {
display: false,
},
},
y: {
grid: {
display: true,
color: 'rgba(0, 0, 0, 0.2)',
drawTicks: false,
},
ticks: {
display: false,
},
border: {
display: false,
dash: [4, 4], // Dashed border
},
}
}
},
};
// Initialize the chart
const myChart = new Chart(ctx, config);
</script>
</body>
</html>

You might also like