Posted in charts
263
11:58 pm, April 3, 2023
 

Simple Line chart with Chart.js

a nice simple line chart example with fill using chart.js

HTML

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

Scripts

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

Javascript

const xValues = [50,60,70,80,90,100,110,120,130,140,150];  
const yValues = [7,8,8,9,9,9,10,11,14,14,15];  
  
new Chart("myChart", {  
  type: "line",  
  data: {  
    labels: xValues,  
    datasets: [{  
      backgroundColor:"rgba(0,0,255,1.0)",  
      borderColor: "rgba(0,0,255,0.1)",  
      data: yValues  
    }]  
  },  
  options:{}  
});

View Statistics
This Week
65
This Month
264
This Year
2025

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Random CSS Property

offset-position

Experimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
offset-position css reference