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.

https://app.zingsoft.com/demos/embed/Z4KY0TKN
https://app.zingsoft.com/demos/embed/Z4KY0TKN
{
  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.

https://app.zingsoft.com/demos/embed/GAD1MTKJ
https://app.zingsoft.com/demos/embed/GAD1MTKJ
{
  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.

https://app.zingsoft.com/demos/embed/TRCPBBFY
https://app.zingsoft.com/demos/embed/TRCPBBFY
{
  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.

https://app.zingsoft.com/demos/embed/ZB55N09M
https://app.zingsoft.com/demos/embed/ZB55N09M
{
  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.

https://app.zingsoft.com/demos/embed/LK5XBANN
https://app.zingsoft.com/demos/embed/LK5XBANN
{
  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.

https://app.zingsoft.com/demos/embed/H21PGV2V
https://app.zingsoft.com/demos/embed/H21PGV2V
{
  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.

https://app.zingsoft.com/demos/embed/NOLNSP68
https://app.zingsoft.com/demos/embed/NOLNSP68
{
  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.

https://app.zingsoft.com/demos/embed/06JE79RG
https://app.zingsoft.com/demos/embed/06JE79RG
{
  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.

https://app.zingsoft.com/demos/embed/8IRA26T9
https://app.zingsoft.com/demos/embed/8IRA26T9
{
  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.

https://app.zingsoft.com/demos/embed/5SSGNS46
https://app.zingsoft.com/demos/embed/5SSGNS46
{
  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.

https://app.zingsoft.com/demos/embed/XTK3UE9B
https://app.zingsoft.com/demos/embed/XTK3UE9B
{
  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.)

https://app.zingsoft.com/demos/embed/DCXW8EIK
https://app.zingsoft.com/demos/embed/DCXW8EIK
{
  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-yobject. Inside, add a min-value attribute, and set the value to 0. Add a max-value attribute, and set the value to 100.

https://app.zingsoft.com/demos/embed/EYN5I21F
https://app.zingsoft.com/demos/embed/EYN5I21F
{
  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.

https://app.zingsoft.com/demos/embed/UX0YAPBO
https://app.zingsoft.com/demos/embed/UX0YAPBO
{
  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-xobject, 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.

https://app.zingsoft.com/demos/embed/VCUTH5AX
https://app.zingsoft.com/demos/embed/VCUTH5AX
{
  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.

https://app.zingsoft.com/demos/embed/0FE71B68
https://app.zingsoft.com/demos/embed/0FE71B68
{
  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.

https://app.zingsoft.com/demos/embed/IKU33APP
https://app.zingsoft.com/demos/embed/IKU33APP
{
  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-colorattribute. 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.

https://app.zingsoft.com/demos/embed/V6POFQWH
https://app.zingsoft.com/demos/embed/V6POFQWH
{
  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.