Template:Graph:Lines/testcases

From The Adachi Wiki
Jump to navigation Jump to search

Testing sandbox version

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 400,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": ["#0000aa","#ff8000","blue","red"], 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (sandbox)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States_"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Log scaled

With |replaceZerosWith=1

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 200,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
   "format": {"type": "json"
     , "property": "data"
     , "parse": {"date": "date"}
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.date"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["totalDeaths", "totalRecoveries", "activeCases", "totalConfirmedCases"]} , {"type": "formula", "field": "_yfield", "expr": "max(datum.value, 1)" } , {"type": "filter", "test": "datum._yfield != 0"}

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "log",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     
     "domainMin": 1,
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Legend", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Date",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Count",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



 ]

} </graph>

See or edit raw graph data.


Without |replaceZerosWith=

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 200,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
   "format": {"type": "json"
     , "property": "data"
     , "parse": {"date": "date"}
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.date"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["totalDeaths", "totalRecoveries", "activeCases", "totalConfirmedCases"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } , {"type": "filter", "test": "datum._yfield != 0"}

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///COVID-19 cases in Tamil Nadu.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "log",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     
     "domainMin": 1,
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Legend", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Date",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Count",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



 ]

} </graph>

See or edit raw graph data.


Testing main template

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 400,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (live)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Testing for inverted y-axis

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 400,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///Men's World Rugby rankings.tab",
   "format": {"type": "json"
     , "property": "data"
     , "parse": {"date": "date"}
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.date"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["New_Zealand", "Australia"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///Men's World Rugby rankings.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 8,
     "domainMax": -1,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     "ticks": 4,
     
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Men's World Rugby rankings"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 400,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///Men's World Rugby rankings.tab",
   "format": {"type": "json"
     , "property": "data"
     , "parse": {"date": "date"}
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.date"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["New_Zealand", "Australia"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///Men's World Rugby rankings.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     
     
     
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     "ticks": 4,
     
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Men's World Rugby rankings"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test dataset optional filtering (e.g. for limiting x-axis displayed range)

without filtering (default width)

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


filter = 1995 <= datum.year && datum.year <= 2002

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [

// Optionally filter data with an template expression parameter

     // e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
     { "type": "filter", "test": "1995 <= datum.year && datum.year <= 2002" },
     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


filter = datum.year <= 2002

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [

// Optionally filter data with an template expression parameter

     // e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
     { "type": "filter", "test": "datum.year <= 2002" },
     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test optional arbitrary ("raw") data transforms

dataTransforms = { "type": "filter", ... }, { "type": "filter", ... }

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [

// chart data custom transforms

     { "type": "filter", "test": "1995 <= datum.year" },
     { "type": "filter", "test": "datum.year <= 2002" },
     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test chart sizing (enabling/disabling chart width grows)

without explicit `chartSizing` (default chart sizing model)

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


chartSizing=fit | chartSizing=padding-box

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


chartSizing=pad | chartSizing=content-box

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test chart title positioning

default chart title positioning | default chart sizing mode

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

default chart title positioning | chartSizing=pad | xMin=1982 | xMax=2002 | xAxisClamp=false

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 378691200000,

     "domainMax": 1009843200000,
     "clamp": false,
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


titleXAlign=left

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"value": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "left"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"value": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "left"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


titleXAlign=right

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x2": {"signal": "width", "mult": 1.0, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "right"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x2": {"signal": "width", "mult": 1.0, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "right"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


titleXAlign=center

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"xc": {"signal": "width", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"xc": {"signal": "width", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


titleXAlign=center | titleXOffset=80

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group (with long long legend)", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"xc": {"signal": "width", "mult": 0.5, "offset": 80 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test axis domain min/max values values + clamping

It is possible to extend axis scales. And it is possible to shrink axis scale by manually providing scale domain min/max values, however without having "clamp":true it will not crop data plotting itself, but only affect axis positioning on graph, while adding "clamp":true actually applies data plotting cropping.

type=year

xAxisMin=1994 | xAxisMax=2020 | yAxisMax=120 | yAxisMin=20 | yZero=false

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 0,

     "domainMax": 1420070400000,
     
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 20,
     "domainMax": 120,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 0,

     "domainMax": 1420070400000,
     
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 20,
     "domainMax": 120,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| (without clamping)

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 378691200000,

     "domainMax": 1009843200000,
     
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 60,
     "domainMax": 90,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"], 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 378691200000,

     "domainMax": 1009843200000,
     
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 60,
     "domainMax": 90

,

   },
   {
     "name": "color",
     "type": "ordinal",
     "range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"], 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| xAxisClamp=true | yAxisClamp=true

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 378691200000,

     "domainMax": 1009843200000,
     "clamp": true,
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 60,
     "domainMax": 90,
     "clamp": true,
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"], 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=fit)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     

"domainMin": 378691200000,

     "domainMax": 1009843200000,
     "clamp": true,
   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     "domainMin": 60,
     "domainMax": 90,
     "clamp": true,
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": ["rgba(31 119 180 / 30%)","rgba(255 127 14 / 30%)","rgba(44 160 44 / 30%)","rgba(214 39 40 / 30%)"], 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States (chartSizing=pad)"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test axis marks font size, angle + test legend labels transform

xAxisAngle = -25 | xAxisFontSize = 20 | yAxisAngle = 25 | yAxisFontSize = 20 | labelsTransforms = { ... }

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 500,
 "height": 300,

"padding": "auto",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [

// Optionally filter data with an template expression parameter

     // e.g. `filter = datum.some_dataset_field > 1900 && datum.some_dataset_field < 2000` where `some_dataset_field` means some valid field of displayed dataset
     { "type": "filter", "test": "datum.name != 'year'" },
     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [

// labels custom transforms

     {"type": "formula", "field": "title", "expr": "datum.title + ' (' + datum.name + ')'"},
   ]
 },


 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         "align": {"value": "right"}, "angle": {"value": -25 },
         "fontSize": {"value": 20 },
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         "align": {"value": "right"}, "angle": {"value": 25 },
         "fontSize": {"value": 20 },
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },



// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Test annotations

type=year

hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 640,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },

// Each vertical annotation is expected to be x-scale typed `x`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "vAnnotations",
     "values": [{"text": "v 93", "x": 1983}],
     "transform": [
       

// in case of `type=year` convert year number to UNIX timestamp

       {"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
       // expected item format `{"text": "...", "color": "#000", x: _ }`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },

// Each horizontal annotation is expected to be numeric `y`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "hAnnotations",
     "values": [{"text": "v 92.5", "y": 92.5}],
     "transform": [
       
       // expected item format `{"text": "...", "color": "#000", y: 0}`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },

// vertical annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "y2": {"field": {"group": "height"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "vAnnotations"}
   },
   // vertical annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "align": {"value": "right"},
         "dx": {"value": -3},
         "dy": {"value": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": -90},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "vAnnotations"}
   },

// horizontal annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y"},
         "x": {"value": 0 },
         "x2": {"field": {"group": "width"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "hAnnotations"}
   },
   // horizontal annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y", "offset": 3},
         "x": {"value": 0, "offset": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": 0},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "hAnnotations"}
   },

// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 640,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datetime(datum.year, 0, 1)"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },

// Each vertical annotation is expected to be x-scale typed `x`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "vAnnotations",
     "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
       "format": {"type": "json", "property": "data"},
     "transform": [
       { "type": "filter", "test": "datum.year == 1982 || datum.year == 1987" },
  { "type": "formula", "field": "x", "expr": "datum.year" },
  { "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },

// in case of `type=year` convert year number to UNIX timestamp

       {"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"},
       // expected item format `{"text": "...", "color": "#000", x: _ }`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },

// Each horizontal annotation is expected to be numeric `y`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "hAnnotations",
     "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
       "format": {"type": "json", "property": "data"},
     "transform": [
       { "type": "filter", "test": "datum.year == 1983 || datum.year == 1992" },
  { "type": "formula", "field": "y", "expr": "datum.age_16_24" },
  { "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
       // expected item format `{"text": "...", "color": "#000", y: 0}`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },
 ],
 "scales": [
   {
     "name": "x",
     "type": "time",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 110,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },

// vertical annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "y2": {"field": {"group": "height"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "vAnnotations"}
   },
   // vertical annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "align": {"value": "right"},
         "dx": {"value": -3},
         "dy": {"value": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": -90},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "vAnnotations"}
   },

// horizontal annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y"},
         "x": {"value": 0 },
         "x2": {"field": {"group": "width"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "hAnnotations"}
   },
   // horizontal annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y", "offset": 3},
         "x": {"value": 0, "offset": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": 0},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "hAnnotations"}
   },

// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


type=linear

hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 640,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.year"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },

// Each vertical annotation is expected to be x-scale typed `x`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "vAnnotations",
     "values": [{"text": "v 93", "x": 1983}],
     "transform": [
       


       // expected item format `{"text": "...", "color": "#000", x: _ }`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },

// Each horizontal annotation is expected to be numeric `y`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "hAnnotations",
     "values": [{"text": "v 92.5", "y": 92.5}],
     "transform": [
       
       // expected item format `{"text": "...", "color": "#000", y: 0}`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },
 ],
 "scales": [
   {
     "name": "x",
     "type": "linear",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     "zero": false,


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 100,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },

// vertical annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "y2": {"field": {"group": "height"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "vAnnotations"}
   },
   // vertical annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "align": {"value": "right"},
         "dx": {"value": -3},
         "dy": {"value": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": -90},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "vAnnotations"}
   },

// horizontal annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y"},
         "x": {"value": 0 },
         "x2": {"field": {"group": "width"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "hAnnotations"}
   },
   // horizontal annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y", "offset": 3},
         "x": {"value": 0, "offset": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": 0},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "hAnnotations"}
   },

// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...

<graph> {

 //
 // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
 //            Please do not modify it anywhere else, as it may get copied and override your changes.
 //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
 //
 // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
 //
 "version": 2,
 "width": 640,
 "height": 300,

"padding": "strict",

 "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"640"}],
 "data": [{
   "name": "chart",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json"
     , "property": "data"
     
   },
   "transform": [


     // Convert xField parameter into a field "_xfield"
     {"type": "formula", "field": "_xfield", "expr":

"datum.year"

     }
     , {"type": "sort", "by": ["_xfield"]}

, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" }

   ]
 },

// source of labels for `tabletype=tab`

 {
   "name": "labels",
   "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
   "format": {"type": "json", "property": "fields"},
   "transform": [


   ]
 },

// Each vertical annotation is expected to be x-scale typed `x`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "vAnnotations",
     "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
       "format": {"type": "json", "property": "data"},
     "transform": [
       { "type": "filter", "test": "datum.year == 1982 || datum.year == 1987" },
  { "type": "formula", "field": "x", "expr": "datum.year" },
  { "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },


       // expected item format `{"text": "...", "color": "#000", x: _ }`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },

// Each horizontal annotation is expected to be numeric `y`, string `text`,

   // and optional string `color` (e.g. "#4d2800")
   {
     "name": "hAnnotations",
     "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
       "format": {"type": "json", "property": "data"},
     "transform": [
       { "type": "filter", "test": "datum.year == 1983 || datum.year == 1992" },
  { "type": "formula", "field": "y", "expr": "datum.age_16_24" },
  { "type": "formula", "field": "text", "expr": "'v ' + datum.age_16_24+ ' ' + datum.year" },
       // expected item format `{"text": "...", "color": "#000", y: 0}`
       { "type": "formula", "field": "text", "expr": "datum.text || " },
       { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" }
     ]
   },
 ],
 "scales": [
   {
     "name": "x",
     "type": "linear",
     "domain": {"data": "chart", "field": "_xfield"},
     "range": "width",
     "zero": false,


   },
   {
     "name": "y",
     "type": "linear",
     "range": "height",
     "domain": {"data": "chart", "field": "_yfield"},
     "zero": false,
     
     "domainMax": 110,
     
   },
   {
     "name": "color",
     "type": "ordinal",
     "range": "category10", 
     "domain": {"data": "chart", "field": "key"}
   },

{

     "name": "labels",
     "type": "ordinal",

"domain": {"data": "labels", "field": "name"},

     "range": {"data": "labels", "field": "title"},
   }
 ],

"legends": [{

   "fill": "color",
   "stroke": "color",

"title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }

 }],
 "axes": [
   {
     "scale": "x", "type": "x", "tickSizeEnd": 0,
     "ticks": 7,
     "title": "Year",
     
     
     "properties": { 
       "labels": { 
         
         
       } 
      }
   },
   {
     "scale": "y", "type": "y", "tickSizeEnd": 0,
     
     "title": "Percentage",
     
     "grid": true,
     "properties": { 
       "labels": { 
         
         
       } 
      }
   }
 ],
 "marks": [
   // Group data by the group parameter or "key", and draw lines, one line per group
   {
     "type": "group",
     "from": {
       "data": "chart",
       "transform": [{"type": "facet", "groupby": ["key"]}]
     },
     "marks": [
       {
         "type": "line",
         "properties": {
           "hover": {
             "stroke": {"value": "red"}
           },
           "update": {
             "stroke": {"scale": "color", "field": "key"}
           },
           "enter": {
             "y": {"scale": "y", "field": "_yfield"},
             "x": {"scale": "x", "field": "_xfield"},
             "stroke": {"scale": "color", "field": "key"},
             "interpolate": {"value": "linear"},
             "strokeWidth": {"value": 2.5}
           }
         }
       }
       
     ],
   },

// vertical annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "y2": {"field": {"group": "height"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "vAnnotations"}
   },
   // vertical annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "x": {"scale": "x", "field": "x"},
         "y": {"value": 0},
         "align": {"value": "right"},
         "dx": {"value": -3},
         "dy": {"value": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": -90},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "vAnnotations"}
   },

// horizontal annotations dashed line

   {
     "type": "rule",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y"},
         "x": {"value": 0 },
         "x2": {"field": {"group": "width"} },
         "stroke": {"field": "color"},
         "opacity": {"value": 0.75},
         "strokeWidth": {"value": 1},
         "strokeDash": {"value": [6,1]}
       }
     },
     "from": {"data": "hAnnotations"}
   },
   // horizontal annotations text
   {
     "type": "text",
     "properties": {
       "update": {
         "y": {"scale": "y", "field": "y", "offset": 3},
         "x": {"value": 0, "offset": 3},
         "baseline": {"value": "top"},
         "text": {"field": "text"},
         "angle": {"value": 0},
         "opacity": {"value": 0.75},
         "fill": {"field": "color"}
       }
     },
     "from": {"data": "hAnnotations"}
   },

// Draw title at the top of the graph

   {
     "type": "text",
     "properties": {
       "enter": {
         "y": {"value": -15},

"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },

         "text": {"value": "Gender pay gap in the United States"},
         "fontWeight": {"value": "bold"},
         "align": {"value": "center"},
         "baseline": {"value": "bottom"},
         "fill": {"value": "#000"}
       }
     }
   }
 ]

} </graph>

See or edit raw graph data.


Checking the JSON output

{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines
  //            Please do not modify it anywhere else, as it may get copied and override your changes.
  //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines
  //
  // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
  //

  "version": 2,
  "width": 400,
  "height": 300,
"padding": "strict",
  "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}],
  "data": [{
    "name": "chart",
    "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
    "format": {"type": "json"
      , "property": "data"
      
    },
    "transform": [


      // Convert xField parameter into a field "_xfield"
      {"type": "formula", "field": "_xfield", "expr":
"datetime(datum.year, 0, 1)"
      }
      , {"type": "sort", "by": ["_xfield"]}
, {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]}
, {"type": "formula", "field": "_yfield", "expr": "datum.value" }

    ]
  },
// source of labels for `tabletype=tab`
  {
    "name": "labels",
    "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab",
    "format": {"type": "json", "property": "fields"},
    "transform": [


    ]
  },



  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "domain": {"data": "chart", "field": "_xfield"},
      "range": "width",
      

      
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "chart", "field": "_yfield"},
      "zero": false,
      
      "domainMax": 100,
      
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": ["#0000aa","#ff8000"], 
      "domain": {"data": "chart", "field": "key"}
    },
{
      "name": "labels",
      "type": "ordinal",
"domain": {"data": "labels", "field": "name"},
      "range": {"data": "labels", "field": "title"},
    }
  ],
"legends": [{
    "fill": "color",
    "stroke": "color",
"title": "Age group (sandbox)",
"properties": { "labels": { "text": {"scale": "labels", "field": "data"} } }
  }],
  "axes": [
    {
      "scale": "x", "type": "x", "tickSizeEnd": 0,
      "ticks": 7,
      "title": "Year",
      
      
      "properties": { 
        "labels": { 
          
          
        } 
       }
    },
    {
      "scale": "y", "type": "y", "tickSizeEnd": 0,
      
      "title": "Percentage",
      
      "grid": true,
      "properties": { 
        "labels": { 
          
          
        } 
       }
    }
  ],

  "marks": [
    // Group data by the group parameter or "key", and draw lines, one line per group
    {
      "type": "group",
      "from": {
        "data": "chart",
        "transform": [{"type": "facet", "groupby": ["key"]}]
      },
      "marks": [
        {
          "type": "line",
          "properties": {
            "hover": {
              "stroke": {"value": "red"}
            },
            "update": {
              "stroke": {"scale": "color", "field": "key"}
            },
            "enter": {
              "y": {"scale": "y", "field": "_yfield"},
              "x": {"scale": "x", "field": "_xfield"},
              "stroke": {"scale": "color", "field": "key"},
              "interpolate": {"value": "linear"},
              "strokeWidth": {"value": 2.5}
            }
          }
        }
        
      ],
    },




// Draw title at the top of the graph
    {
      "type": "text",
      "properties": {
        "enter": {
          "y": {"value": -15},
"x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 },
          "text": {"value": "Gender pay gap in the United States_"},
          "fontWeight": {"value": "bold"},
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#000"}
        }
      }
    }
  ]
}
See or edit raw graph data.

<templatedata>