Posted in charts
264
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
66
This Month
265
This Year
2026

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
Nothing, to my way of thinking, is a better proof of a well ordered mind than a man's ability to stop just where he is and pass some time in his own company.
Seneca
Random CSS Property

list-style-type

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
list-style-type css reference