Show Nav

JavaScript Line Charts

Overview

A line chart or line graph displays data points that are connected by lines. Highly versatile, they come in three different line chart types: the simple line chart, 3-D line chart, and vertical line chart. They can be modified to display segmented, spline, stepped, and/or jumped lines. You can also create stacked line charts, where two or more data sets are positioned on top of each other.

Once you have your basic line chart, you can configure your scales. We explain how to create a category scale, time-series scale, and logarithmic scale. We also go over how to style your lines and markers. For ideas on how to further customize your charts, see our Line Chart Gallery.

Line Chart Types

Specify your chart type with the "type" attribute. You can create a simple two-dimensional line chart ("line"), three-dimensional line chart ("line3d"), or vertical line chart ("vline").

Note: All of our line charts can be modified to display segmented, spline, stepped, and/or jumped lines. They can also be displayed as standard stacked or 100% stacked line charts. We explain this in our Chart-Specific Properties section below.

Line Chart

Our standard line chart is specified by the "line" value. It connects your data points with the default segmented lines (which you can modify with the "aspect" attribute, discussed further below). They can contain single or multiple data sets.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
 { 
  "type": "line", 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]} 
  ] 
}

3-D Line Chart

Our three-dimensional line chart is specified by the "area3d" attribute. With 3-D charts, you can display them in a true 3-D (default) or isometric view. You can also add a "3d-aspect" object to adjust the chart’s angle, depth, and zoom. Refer to our 3-D Charts for further information.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line3d", 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Vertical Line Chart

A vertical line chart is specified by the "vline" value. For this chart type, the axes are switched so that the x-axis scale runs on the vertical axis and the y-axis scale runs on the horizontal axis.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "vline", 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Trellis Line Chart

When you have multiple but similar data sets, separating the data into a trellis chart (which contains a series of smaller charts) can be a useful way to view and compare the information. To create a trellis chart, you’ll need to insert a graphset array. Inside the array, you can add a chart object for each of your individual charts. Refer to our Adding Additional Charts page for further information on how to create a graphset array, as well as how to insert additional charts throughout your webpage.

In our trellis line chart example below, the three data sets (taken from the vertical line chart example above) were separated to display as three smaller charts.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "graphset":[ 
    { 
      "type": "vline", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"0%", 
      "y":"0%", 
      "series":[
        {"values":[20,40,25,50,15,45,33,34]}
      ] 
    }, 
    { 
      "type": "vline", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"33.33%", 
      "y":"0%", 
      "series":[
        {"values":[5,30,21,18,59,50,28,33]}
      ] 
    }, 
    { 
      "type": "vline", 
      "height":"100%", 
      "width":"33.33%", 
      "x":"66.66%", 
      "y":"0%", 
      "series":[
        {"values":[30,5,18,21,33,41,29,15]}
      ] 
    } 
  ]
}

Series Data

Line charts support series arrays that contain single or multiple data sets. They can display arrays with null values (to depict unavailable data), as well as array of arrays (which allows you to depict missing or non-linear data).

Array

A basic array allows you to present consistent, linear data. Values are represented on the y-axis, while the corresponding x-axis values are automatically provided. (The default value starts at zero and increases sequentially by one.)

"series":[
  {"values":[y0, y1, y2, y3, ..., yN]},   /* Add a single data set */
  {"values":[y0, y1, y2, y3, ..., yN]},   /* or multiple data sets */
  {"values":[y0, y1, y2, y3, ..., yN]},
]

Sometimes data elements or parts of data sets are unavailable. In that case, you can use an array with null values (to show breaks) or an array of arrays (to continue over breaks). You can also use an array of arrays to depict non-linear data.

Array with Null Values

When you have missing data that you want to visually convey in your chart, you can use an array with null values. Null values will show the breaks in your plot. See the example below, where null values have replaced plot indices 2 and 5.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series":[
    {"values":[20,40,null,50,15,null,33,34]} /* Plot indices 2 and 5 are unavailable */
  ]
}

Array of Arrays

An array of arrays is useful for when you have unavailable data, but still want to display a continuous line. Because you specify your corresponding x-axis values, you can bridge over missing sections by providing the x- and y-axis coordinates of nearby values.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series":[
    {"values":[[0,20],[1,40],[3,50],[4,15],[6,33],[7,34]]} /* Plot indices 2 and 5 are unavailable */
  ]
}

You can also use an array of arrays to display non-linear data. Simply provide your x- and y-axis coordinate values in the order you want your line drawn.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series":[
    {"values":[[0,20],[6,40],[3,50],[2,15],[5,33],[7,34]]} 
  ]
}

Chart-Specific Properties

Further modify your line charts with our "aspect" and "stacked" attributes. You can create spline, stepped, jumped, and stacked line charts.

Aspect

Use the "aspect" attribute to style your lines so that they appear "segmented" (default), "spline", "stepped", and/or "jumped". Aspects can be applied globally to affect all plots or locally to affect specific plots.

To apply aspects globally, create a "plot" object. Insert your "aspect" attribute.

Note: The example below lists this chart’s default properties, which are segmented lines and unstacked data sets. How to create stacked area charts is discussed further below.

  "plot":{ /* Plot object */
    "aspect":"segmented", /* "spline" | "stepped" */ 
    "stacked":false /* or true */
  }

To apply aspects locally, add them to the chart data object you want the change to apply to.

Note: If you specify an aspect value in the plot object and an aspect value in a chart data object, the latter will overwrite the former.

"series":[
  { /* Chart data object */
    "aspect":"segmented,"
    "values":[y0, y1, y2, y3, ..., yN]
  },
  { /* Chart data object */
    "aspect":"spline", 
    "values":[y0, y1, y2, y3, ..., yN]
  },
  { /* Chart data object */
    "aspect":"stepped", 
    "values":[y0, y1, y2, y3, ..., yN]
  },
  { /* Chart data object */
    "aspect":"jumped",
    "values":[y0, y1, y2, y3, ..., yN]
  }
]

Segmented Line Chart

Segmented line charts display data points that are connected by straight lines. As the default aspect, specifying their type in the plot object (as shown below) is optional.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "aspect":"segmented" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]} 
  ] 
}

Spline Line Chart

Spline charts display data points that are connected by gently curving lines. They are specified by the "spline" value, and are another way to represent linear or nonlinear data.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "aspect":"spline" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Stepped Line Chart

Stepped line charts display data points that are connected by a series of horizontal and vertical lines. They are used to highlight differences, show sudden changes in data, or allow for data comparisons. They are specified by the "stepped" value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "aspect":"stepped" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Jumped Line Chart

A variation of the stepped chart, a jumped line chart displays only the horizontal portion of a stepped line. Also known as a jump curve, this chart type can sometimes be a more accurate way to represent data. It is specified by the "jumped" value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "aspect":"jumped" 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Stacked

You can create stacked line charts with the "stacked" attribute. With stacking, data sets are layered on top of each other so that the top line represents the sum total of all the plotted data. There is also a stacked chart variation called the 100% stacked line chart, where each data layer is represented as a percentage of the whole and the top line rests at 100%.

Note: We recommend using stacked line charts with caution, as they can be visually confusing compared to other stacked chart types. Consider using a stacked area chart or stacked bar chart instead.

Standard Stacked Line Chart

Add a "stacked" attribute to your "plot" object. Set the value to true. (By default, the value is set to false.)

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "stacked":true
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}, 
  ] 
}

100% Stacked Line Chart

To create a 100% stacked line chart, add a "stacked" attribute to your "plot" object, and set the value to true. Next, add a "stack-type" attribute, and set the value to "100%". (By default, the value is set to "normal".)

Note: With this chart type, you’ll want to specify your minimum and maximum values for the y-axis. Create a "scale-y" object. Inside, add a "min-value" attribute, and set the value to 0. Add a "max-value" attribute, and set the value to 100.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{ 
  "type": "line", 
  "plot":{ 
    "stacked":true, 
    "stack-type":"100%" 
  }, 
  "scale-y":{ 
    "min-value":0, 
    "max-value":100 
  }, 
  "series": [ 
    {"values":[20,40,25,50,15,45,33,34]}, 
    {"values":[5,30,21,18,59,50,28,33]}, 
    {"values":[30,5,18,21,33,41,29,15]}
  ] 
}

Further Customization and Styling

Once you’ve set up your basic line chart, the next step is to customize and style it. This section explains how to configure your scales. We also discuss how to style your chart’s lines and markers.

Scales

ZingChart’s default scales for both the x- and y-axis is a linear one. However, users generally want to modify their scales so that they display a category or time-series scale on their horizontal ("scale-x") axis and a quantitative scale (linear or logarithmic) on their vertical ("scale-y") axis. We explain how to configure your scales accordingly.

Note: The following sections discuss category and time-series scales placed on the x-axis and logarithmic scales placed on the y-axis since that is how users typically set up their scales. However, the same changes can generally be made to the opposite (and/or additional) scale object(s).

Category Scale

Category scales (also known as qualitative scales) can be used to describe names, places, time periods, events, and more. They can consist of any word and/or number combination. Configure your category scale by adding a "scale-x" object to your chart. Inside, add a "labels" array. The array can include scale labels such as:

"labels":["Jan", "Feb", "March", "April", "May", "June"]
"labels":[2000, 2002, 2004, 2006, 2008, 2010]
"labels":["Q1","Q2","Q3","Q4"]

Note: Do not confuse a "labels" array with a "label" (no "s") object. The latter allows you to specify your scale title.

Note: You can set your margins to automatically adjust, helping to accommodate your scale labels. Create a "plotarea" object, and add an "adjust-layout" attribute. Set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "plotarea": {
    "adjust-layout":true /* For automatic margin adjustment. */
  },
  "scale-x": {
    "label":{ /* Add a scale title with a label object. */
      "text":"Above is an example of a category scale",
    },
    /* Add your scale labels with a labels array. */
    "labels":["Jan","Feb","March","April","May","June","July","Aug"]
  },
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]}
  ]
}

Time-Series Scale

Time-series scales are used to represent time increments that range from milliseconds to years. To create one, add a "scale-x" object, and place a "min-value" attribute, "step" attribute, and "transform" object inside it.

For the "min-value" and "step", you’ll need to provide your minimum and step scale values in Unix time. Also known as Epoch time, this is measured by the number of milliseconds that have elapsed since January 1, 1970, UTC time. You can calculate your timestamps by using Epoch Converter, an online conversion tool.

Note: Make sure to provide your Unix time in milliseconds. You can convert seconds to milliseconds by multiplying by 1000.

The "transform" object will convert your Unix timestamps into a more readable format. In the object, add a "type" attribute, and set the value to "date". Next, add an "all" attribute. You can specify how you want your scale formatted by using our ZingChart tokens, contained in a string.

Note: To ensure your time-series scale reads in UTC time (ZingChart currently defaults to local time), add a "utc" attribute, and set the value to true.

Note: You can set your margins to automatically adjust, helping to ensure all your scale labels fit comfortably within your chart. Create a "plotarea" object. Add an "adjust-layout" attribute, and set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "utc":true, /* Force UTC time. */
  "plotarea": {
    "adjust-layout":true /* For automatic margin adjustment. */
  },
  "scale-x":{
    "label":{ /* Add a scale title with a label object. */
      "text":"Above is an example of a time-series scale",
    },
    "min-value":1420070400000, /* Unix timestamp for Jan 1, 2015. */
    "step":"day",
    "transform":{ /* Converts your Unix timestamp to a human readable format. */
      "type":"date", /* Set your transform type to "date". */
      "all":"%m.%d.%y" /* Specify your date/time format, using tokens. */
    }
  },
  "series": [
    {"values":[20,40,25,50,15,45,33,34]},
    {"values":[5,30,21,18,59,50,28,33]},
  ]
}

Logarithmic Scale

Logarithmic scales are another kind of quantitative scale. With this scale type, the logarithm (the power to which your base value is raised) increases sequentially by one, and they are thus useful for displaying large data ranges. To configure your scale, create a "scale-y" object, and insert a "progression" attribute. Set the value to "log". (The default value is "lin", for linear scale.) Next, add a "log-base" attribute. You can specify your base value to be Math.E (this is the default, and corresponds to the base of natural logarithms, i.e., e or Euler’s number) or 10.

Note: Make sure your scale labels fit comfortably inside your chart by setting the margins to automatically adjust. Create a "plotarea" object, and add an "adjust-layout" attribute. Set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "plotarea": {
    "adjust-layout":true
  },
  "scale-y": {
    "progression": "log", /* Logarithmic Scale */
    "log-base":  Math.E, /* or 10 */
    "decimals": 3
  },
  "series": [
      {"values":[20,40,25,50,15,45,33,34]},
      {"values":[5,30,21,18,59,50,28,33]},
    ]
}

Styling

In this section, we explain how to style your chart's lines and markers. Browse our extensive JSON Attributes/Syntax page for further styling options.

Line Color, Style, and Width

You can specify the color, style, and width of your chart lines. Start in the chart data object of the plot you want to change. For your line color, add a "line-color" attribute. Provide your color as a hexadecimal or RGB value. For your line style, add a "line-style" attribute. Specify your choice of "solid" (default), "dashed", or "dotted" line. For your line width, add a "line-width" attribute. Provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "line-color":"#6666FF", /* hexadecimal or RGB value */
      "line-style":"dashed", /* "solid" | "dotted" */
      "line-width":5 /* in pixels */
    }
  ]
}

Marker Color, Size, and Width

To modify your markers, create a "marker" object. Place it in the chart data object of the plot you want to style. With markers, you’ll want to specify both the fill (color and size) and border (color and width). For fill color, add a "background-color" attribute. Provide your color as a hexadecimal or RGB value. For fill size, add a "size" attribute. Provide a pixel value. For border color, add a "border-color" attribute. Specify your color value. For border width, add a "border-width" attribute. Specify your pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "line",
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34],
      "marker":{ /* Marker object */
        "background-color":"#FF0066", /* hexadecimal or RGB value */
        "size":8, /* in pixels */
        "border-color":"#6666FF", /* hexadecimal or RBG value */
        "border-width":5 /* in pixels */
      }
    }
  ]
}

Summary

Got a question about how line charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.