Line Chart

A line chart or line graph displays the evolution of one or several numeric variables. Data points are connected by straight line segments. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. A line chart is often used to visualize a trend in data over intervals of time – a time series – thus the line is often drawn chronologically. When several values are available for each time stamp, data can be aggregated and a confidence zone is generally added around the trend.


Example Color Themes

Example Fonts

Aa Aa Aa Aa Aa Aa Aa Aa Aa Aa


Show Code

Tools

<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>


<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
  <canvas id="canvasId" width="600" height="600"</canvas>
</div>


<!-- Create a script to initialize the chart -->
<script>

  <!-- Create the data for the graph -->
  var data = {
     "x" : {
        "Time" : ["Time1","Time1","Time1","Time1","Time1","Time2","Time2","Time2","Time2","Time2","Time3","Time3","Time3","Time3","Time3","Time4","Time4","Time4","Time4","Time4","Time5","Time5","Time5","Time5","Time5","Time6","Time6","Time6","Time6","Time6","Time7","Time7","Time7","Time7","Time7","Time8","Time8","Time8","Time8","Time8","Time9","Time9","Time9","Time9","Time9","Time10","Time10","Time10","Time10","Time10","Time11","Time11","Time11","Time11","Time11","Time12","Time12","Time12","Time12","Time12","Time13","Time13","Time13","Time13","Time13","Time14","Time14","Time14","Time14","Time14","Time15","Time15","Time15","Time15","Time15","Time16","Time16","Time16","Time16","Time16","Time17","Time17","Time17","Time17","Time17","Time18","Time18","Time18","Time18","Time18","Time19","Time19","Time19","Time19","Time19","Time20","Time20","Time20","Time20","Time20","Time21","Time21","Time21","Time21","Time21","Time22","Time22","Time22","Time22","Time22","Time23","Time23","Time23","Time23","Time23","Time24","Time24","Time24","Time24","Time24","Time25","Time25","Time25","Time25","Time25","Time26","Time26","Time26","Time26","Time26","Time27","Time27","Time27","Time27","Time27","Time28","Time28","Time28","Time28","Time28","Time29","Time29","Time29","Time29","Time29","Time30","Time30","Time30","Time30","Time30"]
     },
     "y" : {
        "data" : [
          [9,11,11,7,12,16,8,15,4,9,8,12,13,10,11,15,14,14,17,21,21,21,16,11,16,20,17,15,25,21,21,24,27,24,20,28,23,28,20,27,20,20,22,18,28,13,14,20,21,18,24,23,19,18,26,24,22,18,20,17,15,15,14,14,11,15,14,11,15,13,17,10,22,14,14,9,11,11,7,12,16,8,15,4,9,8,12,13,10,11,15,14,14,17,21,21,21,16,11,16,20,17,15,25,21,21,24,27,24,20,28,23,28,20,27,20,20,22,18,28,13,14,20,21,18,24,23,19,18,26,24,22,18,20,17,15,15,14,14,11,15,14,11,15,13,17,10,22,14,14],
          [24,25,21,24,23,22,24,26,26,26,21,20,19,19,20,11,15,12,14,11,10,14,10,15,9,9,9,9,15,14,17,17,20,20,18,18,13,18,17,13,12,19,14,14,24,27,29,24,21,24,21,23,26,19,21,13,23,18,17,16,15,9,12,12,15,17,16,16,15,16,14,9,8,10,11,24,25,21,24,23,22,24,26,26,26,21,20,19,19,20,11,15,12,14,11,10,14,10,15,9,9,9,9,15,14,17,17,20,20,18,18,13,18,17,13,12,19,14,14,24,27,29,24,21,24,21,23,26,19,21,13,23,18,17,16,15,9,12,12,15,17,16,16,15,16,14,9,8,10,11]
        ],
        "smps" : ["s1","s2","s3","s4","s5","s6","s7","s8","s9","s10","s11","s12","s13","s14","s15","s16","s17","s18","s19","s20","s21","s22","s23","s24","s25","s26","s27","s28","s29","s30","s31","s32","s33","s34","s35","s36","s37","s38","s39","s40","s41","s42","s43","s44","s45","s46","s47","s48","s49","s50","s51","s52","s53","s54","s55","s56","s57","s58","s59","s60","s61","s62","s63","s64","s65","s66","s67","s68","s69","s70","s71","s72","s73","s74","s75","s76","s77","s78","s79","s80","s81","s82","s83","s84","s85","s86","s87","s88","s89","s90","s91","s92","s93","s94","s95","s96","s97","s98","s99","s100","s101","s102","s103","s104","s105","s106","s107","s108","s109","s110","s111","s112","s113","s114","s115","s116","s117","s118","s119","s120","s121","s122","s123","s124","s125","s126","s127","s128","s129","s130","s131","s132","s133","s134","s135","s136","s137","s138","s139","s140","s141","s142","s143","s144","s145","s146","s147","s148","s149","s150"],
        "vars" : ["Var1","Var2"]
     }
  }
  
  
  <-- Create the configuration for the graph -->
  var config = {
     "graphOrientation":"vertical",
     "graphType":"Line",
     "lineErrorType":"area",
     "lineType":"spline",
     "showTransition":"false",
     "theme":"CanvasXpress"
  }
  

  <!-- Call the CanvasXpress function to create the graph -->
  var cX = new CanvasXpress("canvasId", data, config);


  
  <-- Functions after rendering graph -->
  cX.groupSamples(["Time"]);
  
</script>

library(canvasXpress)
y=read.table("https://www.canvasxpress.org/data/cX-line-dat.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
x=read.table("https://www.canvasxpress.org/data/cX-line-smp.txt", header=TRUE, sep="\t", quote="", row.names=1, fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
  data=y,
  smpAnnot=x,
  graphOrientation="vertical",
  graphType="Line",
  lineErrorType="area",
  lineType="spline",
  showTransition=FALSE,
  theme="CanvasXpress",
  afterRender=list(list("groupSamples", list("Time")))
)
⇧