Blog Help & Support Contact About Login

 Show Nav

JavaScript Stock Charts

Overview

Stock charts illustrate the price movements of stocks and other financial instruments over a given time period. Candlestick charts and open-high-low-close (OHLC) charts are two of the most popular stock chart types. They track daily open, high, low, and close prices, and are often accompanied by a volume chart that tracks the number of shares sold. Interactive JavaScript stock chart features such as crosshairs, zooming, scrollbars, and preview charts provide further customization. Browse our Stock Chart Gallery for examples of what can be achieved with ZingChart.

Stock Chart Types

ZingChart offers two stock chart types: candlestick charts and open-high-low-close (OHLC) charts. To specify your chart type, add a "type" attribute to your chart object and set the value to "stock". Next, create a "plot" object. Inside, add an "aspect" attribute. Set the value to "candlestick" (default) or "whisker". You can also create stock and volume charts using our mixed chart type and blended scales.

Candlestick Chart

Candlestick charts are our default stock chart type. Each candlestick represents a single trading day. The body represents the opening and closing price, while the upper and lower wicks represent the highest and lowest prices for that day. Daily gains are distinguished from losses by the colored and non-colored bodies.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Candlestick Chart"
  },
  "plot": {
    "aspect": "candlestick"
  },
  "scale-y": {
    "values": "30:34:2"
  },
  "series": [{
    "values": [
      [31.34, 31.46, 30.87, 31.06],
      [31.80, 32.25, 31.52, 32.05],
      [32.05, 32.57, 31.93, 32.30],
      [32.21, 32.39, 31.98, 32.08],
      [32.32, 32.38, 32.13, 32.37],
      [32.52, 32.53, 31.95, 32.03],
      [32.07, 32.14, 31.77, 31.98],
      [32.26, 32.33, 31.61, 31.86],
      [31.65, 31.85, 31.41, 31.78],
      [31.86, 31.97, 31.56, 31.58],
      [31.51, 31.65, 31.45, 31.59],
      [31.84, 31.87, 31.55, 31.85],
      [31.83, 32.08, 31.71, 32.04],
      [32.30, 32.36, 31.96, 32.28],
      [32.43, 32.88, 32.29, 32.48],
      [32.72, 32.74, 32.40, 32.60],
      [32.39, 32.46, 32.20, 32.38],
      [32.47, 32.49, 31.81, 31.84],
      [31.84, 32.20, 31.78, 32.08],
      [31.88, 32.11, 31.82, 31.89]
    ]
  }]
}

Open-High-Low-Close (OHLC) Chart

OHLC charts (also known as open-high-low-close charts) display the opening, highest, lowest, and closing prices of stocks and other financial instruments. Each whisker represents a single trading day. The vertical line represents the price range for that day (the high and low), while the left-hand whisker represents the opening price and the right-hand whisker represents the closing price.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Open-High-Low-Close Chart"
  },
  "plot": {
    "aspect": "whisker"
  },
  "scale-y": {
    "values": "30:34:2"
  },
  "series": [{
    "values": [
      [31.34, 31.46, 30.87, 31.06],
      [31.80, 32.25, 31.52, 32.05],
      [32.05, 32.57, 31.93, 32.30],
      [32.21, 32.39, 31.98, 32.08],
      [32.32, 32.38, 32.13, 32.37],
      [32.52, 32.53, 31.95, 32.03],
      [32.07, 32.14, 31.77, 31.98],
      [32.26, 32.33, 31.61, 31.86],
      [31.65, 31.85, 31.41, 31.78],
      [31.86, 31.97, 31.56, 31.58],
      [31.51, 31.65, 31.45, 31.59],
      [31.84, 31.87, 31.55, 31.85],
      [31.83, 32.08, 31.71, 32.04],
      [32.30, 32.36, 31.96, 32.28],
      [32.43, 32.88, 32.29, 32.48],
      [32.72, 32.74, 32.40, 32.60],
      [32.39, 32.46, 32.20, 32.38],
      [32.47, 32.49, 31.81, 31.84],
      [31.84, 32.20, 31.78, 32.08],
      [31.88, 32.11, 31.82, 31.89]
    ]
  }]
}

Stock & Volume Chart

ZingChart provides users the option to add a volume chart to accompany their stock data. Generally depicted as a bar or area chart, volume charts display the number of shares sold that trading day. To create a stock and volume chart, use our mixed chart type. The stock chart portion can be your choice of candlestick or OHLC aspect. The volume chart portion can be your choice of area, bar, or line chart.

Next, create two scale-y objects ("scale-y" and "scale-y-2"). Assign "scale-y" to the stock chart and "scale-y-2" to the volume chart using the "scales" attribute in your series objects. (The stock and volume charts will share the same "scale-x".) In the "scale-y-2" object, add a "placement" attribute and set the value to "default". Refer to the X/Y-Axis Scales Tutorial for more information on multiple scales.

Finally, you'll want to blend the two y-axis scales together. (By default, secondary scale objects are separated from the first object.) Add a "blended" attribute to the "scale-y-2" object, and set the value to true. This will "stick" the scale to "scale-y". Use the "offset-start" and "offset-end" attributes to modify the starting and ending offsets for your scales. Provide percentage values. See the stock and volume chart example below.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Stock & Volume Chart"
  },
  "scale-y": { //for Stock Chart
    "offset-start": "35%", //to adjust scale offsets.
    "values": "29:33:2",
    "format": "$%v",
    "label": {
      "text": "Prices"
    }
  },
  "scale-y-2": { //for Volume Chart
    "placement": "default", //to move scale to default (left) side.
    "blended": true, //to bind the scale to "scale-y".
    "offset-end": "75%", //to adjust scale offsets.
    "values": "0:3:3",
    "format": "%vM",
    "label": {
      "text": "Volume"
    }
  },
  "series": [{
    "type": "stock", //Stock Chart
    "scales": "scale-x,scale-y", //to set applicable scales.
    "values": [
      [31.34, 31.46, 30.87, 31.06],
      [31.80, 32.25, 31.52, 32.05],
      [32.05, 32.57, 31.93, 32.30],
      [32.21, 32.39, 31.98, 32.08],
      [32.32, 32.38, 32.13, 32.37],
      [32.52, 32.53, 31.95, 32.03],
      [32.07, 32.14, 31.77, 31.98],
      [32.26, 32.33, 31.61, 31.86],
      [31.65, 31.85, 31.41, 31.78],
      [31.86, 31.97, 31.56, 31.58],
      [31.51, 31.65, 31.45, 31.59],
      [31.84, 31.87, 31.55, 31.85],
      [31.83, 32.08, 31.71, 32.04],
      [32.30, 32.36, 31.96, 32.28],
      [32.43, 32.88, 32.29, 32.48],
      [32.72, 32.74, 32.40, 32.60],
      [32.39, 32.46, 32.20, 32.38],
      [32.47, 32.49, 31.81, 31.84],
      [31.84, 32.20, 31.78, 32.08],
      [31.88, 32.11, 31.82, 31.89]
    ]
  }, {
    "type": "bar", //Volume Chart
    "scales": "scale-x,scale-y-2", //to set applicable scales.
    "values": [
      1.3,
      1.5,
      2.1,
      2.2,
      1.9,
      1.7,
      1.8,
      1.9,
      1.9,
      2.0,
      1.4,
      2.1,
      2.3,
      2.6,
      2.5,
      2.3,
      1.5,
      2.4,
      1.6,
      1.4
    ]
  }]
}

Series Data

Provide your stock chart data in the "series" array. ZingChart supports arrays (OHLC data only) and array of arrays (time-series and OHLC data).

OHLC Data Only

For open, high, low, and close (OHLC) values only, provide your data in the following format. Enclosed inside a basic array, these values are represented on the y-axis. (The corresponding x-axis values are automatically provided, with the default value starting at zero and increasing sequentially by one.) This data format is best when working with category scales.

"series": [{
  "values": [
    [open0, high0, low0, close0],
    [open1, high1, low1, close1],
    [open2, high2, low2, close2],
    ...,
    [openN, highN, lowN, closeN]
  ]
}]

Time-Series and OHLC Data

With an array of arrays, you provide your OHLC values along with corresponding x-axis values. On stock charts, those x-axis values will most likely be provided as time-series data. The data must be provided as Unix timestamps, in milliseconds. You can convert dates into Unix time using online conversion tools such as Epoch Converter. With your time-series data, you'll want to create a time-series scale, which is discussed further below.

"series": [{
  "values": [
    [timestamp0, [open0, high0, low0, close0]],
    [timestamp1, [open1, high1, low1, close1]],
    [timestamp2, [open2, high2, low2, close2]],
    ...,
    [timestampN, [openN, highN, lowN, closeN]],
  ]
}]

Basic Elements

Once you've provided your stock chart type and data, you can configure your scales and style your data.

Scale Configuration

On stock charts, a quantitative scale is used on the y-axis to show stock prices. A category or time-series scale is used on the x-axis to represent the date range, which can span days, months, or years. Our Configuring Your Scales Tutorial provides more in-depth information on how to set up each scale type, and our JSON Attributes/Syntax pages for scale-x and scale-y provide a full list of attribute options.

Category Scale

When working with only OHLC data, you'll want to use a category scale on the x-axis so that you can provide your stock price dates. Create a "scale-x" object, and add a "labels" array. Provide your labels as string values separated by commas. You can also adjust the minimum, maximum, and step scale values on the y-axis. Create a "scale-y" object, and add a "values" attribute. Provide your min/max/step inside a string, separated by colons. To format your labels, add a "format" attribute. Provide a value such as "$%v", which displays scale values that are preceded by a dollar sign. For more on X/Y-axis scale configuration, refer to our Scales Tutorial.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Category Scale"
  },
  "plot": {
    "aspect": "candlestick",
    "tooltip": {
      "text": "On %kl:<br><br>Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close<br>"
    }
  },
  "scale-x": {
    "labels": [
      "01/02/15",
      "01/05/15", "01/06/15", "01/07/15", "01/08/15", "01/09/15",
      "01/12/15", "01/13/15", "01/14/15", "01/15/15", "01/16/15",
      "01/20/15", "01/21/15", "01/22/15", "01/23/15",
      "01/26/15", "01/27/15", "01/28/15", "01/29/15", "01/30/15",
      "02/02/15", "02/03/15", "02/04/15", "02/05/15", "02/06/15",
      "02/09/15", "02/10/15", "02/11/15", "02/12/15", "02/13/15",
      "02/17/15", "02/18/15", "02/19/15", "02/20/15",
      "02/23/15", "02/24/15", "02/25/15", "02/26/15", "02/27/15",
      "03/02/15", "03/03/15", "03/04/15", "03/05/15", "03/06/15",
      "03/09/15", "03/10/15", "03/11/15", "03/12/15", "03/13/15",
      "03/16/15", "03/17/15", "03/18/15", "03/19/15", "03/20/15",
      "03/23/15", "03/24/15", "03/25/15", "03/26/15", "03/27/15",
      "03/30/15", "03/31/15"
    ]
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v"
  },
  "series": [{
    "values": [
      [31.34, 31.46, 30.87, 31.06], //01/02/15

      [31.80, 32.25, 31.52, 32.05], //01/05/15
      [32.05, 32.57, 31.93, 32.30], //01/06/15
      [32.21, 32.39, 31.98, 32.08], //01/07/15
      [32.32, 32.38, 32.13, 32.37], //01/08/15
      [32.52, 32.53, 31.95, 32.03], //01/09/15

      [32.07, 32.14, 31.77, 31.98], //01/12/15
      [32.26, 32.33, 31.61, 31.86], //01/13/15
      [31.65, 31.85, 31.41, 31.78], //01/14/15
      [31.86, 31.97, 31.56, 31.58], //01/15/15
      [31.51, 31.65, 31.45, 31.59], //01/16/15

      [31.84, 31.87, 31.55, 31.85], //01/20/15
      [31.83, 32.08, 31.71, 32.04], //01/21/15
      [32.30, 32.36, 31.96, 32.28], //01/22/15
      [32.43, 32.88, 32.29, 32.48], //01/23/15

      [32.72, 32.74, 32.40, 32.60], //01/26/15
      [32.39, 32.46, 32.20, 32.38], //01/27/15
      [32.47, 32.49, 31.81, 31.84], //01/28/15
      [31.84, 32.20, 31.78, 32.08], //01/29/15
      [31.88, 32.11, 31.82, 31.89], //01/30/15

      [32.00, 32.22, 31.90, 32.21], //02/02/15
      [32.29, 32.52, 32.26, 32.47], //02/03/15
      [32.41, 32.43, 32.08, 32.16], //02/04/15
      [32.25, 32.50, 32.23, 32.50], //02/05/15
      [32.54, 32.75, 32.47, 32.52], //02/06/15

      [32.47, 32.75, 31.50, 31.64], //02/09/15
      [31.77, 32.05, 31.55, 31.96], //02/10/15
      [31.49, 31.82, 31.35, 31.77], //02/11/15
      [31.70, 31.99, 30.71, 30.89], //02/12/15
      [30.99, 31.57, 30.50, 31.55], //02/13/15

      [30.02, 30.30, 29.98, 30.27], //02/17/15
      [30.34, 30.90, 30.15, 30.80], //02/18/15
      [30.85, 30.91, 30.05, 30.15], //02/19/15
      [29.88, 30.21, 29.80, 30.21], //02/20/15

      [30.22, 30.30, 30.10, 30.17], //02/23/15
      [30.15, 30.45, 30.01, 30.39], //02/24/15
      [30.45, 31.06, 30.40, 30.91], //02/25/15
      [30.94, 31.01, 30.81, 30.89], //02/26/15
      [30.83, 31.27, 30.75, 30.99], //02/27/15

      [30.90, 31.12, 30.85, 31.11], //03/02/15
      [31.05, 31.08, 30.78, 30.86], //03/03/15
      [30.76, 30.77, 30.47, 30.66], //03/04/15
      [30.62, 30.82, 30.57, 30.82], //03/05/15
      [30.71, 30.78, 30.33, 30.42], //03/06/15

      [30.52, 30.70, 30.49, 30.64], //03/09/15
      [30.50, 30.64, 30.17, 30.17], //03/10/15
      [30.28, 30.49, 30.15, 30.19], //03/11/15
      [30.27, 30.41, 30.17, 30.40], //03/12/15
      [30.28, 30.36, 29.81, 30.04], //03/13/15

      [30.06, 30.48, 29.96, 30.45], //03/16/15
      [30.30, 30.39, 30.09, 30.31], //03/17/15
      [30.18, 30.85, 30.11, 30.64], //03/18/15
      [30.44, 30.61, 30.26, 30.33], //03/19/15
      [30.34, 30.53, 30.30, 30.40], //03/20/15

      [30.48, 30.74, 30.45, 30.47], //03/23/15
      [30.38, 30.48, 30.27, 30.28], //03/24/15
      [30.23, 30.33, 29.91, 29.91], //03/25/15
      [30.80, 30.92, 30.17, 30.30], //03/26/15
      [30.34, 30.90, 29.60, 29.64], //03/27/15

      [29.98, 30.20, 29.97, 30.12], //03/30/15
      [30.15, 30.90, 29.81, 30.81] //03/31/15
    ]
  }]
}

Time-Series Scale

When working with both time-series and OHLC data, you'll need a corresponding time-series scale on the x-axis. Create a "scale-x" object, and add a "min-value" attribute, "step" attribute, and "transform" object. For the "min-value" and "step", provide your scale values in Unix time in milliseconds. In the "transform" object, add a "type" attribute and set the value to "date". Next, add an "all" attribute and specify how you want your scale values formatted. You can use a combination of ZingChart tokens, alphanumeric, and special characters. Refer to our Scales Tutorial for more detailed information.

You can also adjust the minimum, maximum, and step scale values on the y-axis, as well as the formatted appearance. Create a "scale-y" object, and add a "values" attribute and "format" attribute. For the former, provide your min/max/step inside a string, separated by colons. For the latter, provide a value such as "$%v", which displays scale values that are preceded by a dollar sign.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Time-Series Scale"
  },
  "plot": {
    "aspect": "whisker",
    "tooltip": {
      "text": "On %kv:<br><br>Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close<br>"
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    }
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v"
  },
  "series": [{
    "values": [
      [1420232400000, [31.34, 31.46, 30.87, 31.06]], //01/02/15
        
      [1420491600000, [31.80, 32.25, 31.52, 32.05]], //01/05/15
      [1420578000000, [32.05, 32.57, 31.93, 32.30]], //01/06/15
      [1420664400000, [32.21, 32.39, 31.98, 32.08]], //01/07/15
      [1420750800000, [32.32, 32.38, 32.13, 32.37]], //01/08/15
      [1420837200000, [32.52, 32.53, 31.95, 32.03]], //01/09/15

      [1421096400000, [32.07, 32.14, 31.77, 31.98]], //01/12/15
      [1421182800000, [32.26, 32.33, 31.61, 31.86]], //01/13/15
      [1421269200000, [31.65, 31.85, 31.41, 31.78]], //01/14/15
      [1421355600000, [31.86, 31.97, 31.56, 31.58]], //01/15/15
      [1421442000000, [31.51, 31.65, 31.45, 31.59]], //01/16/15

      [1421787600000, [31.84, 31.87, 31.55, 31.85]], //01/20/15
      [1421874000000, [31.83, 32.08, 31.71, 32.04]], //01/21/15
      [1421960400000, [32.30, 32.36, 31.96, 32.28]], //01/22/15
      [1422046800000, [32.43, 32.88, 32.29, 32.48]], //01/23/15

      [1422306000000, [32.72, 32.74, 32.40, 32.60]], //01/26/15
      [1422392400000, [32.39, 32.46, 32.20, 32.38]], //01/27/15
      [1422478800000, [32.47, 32.49, 31.81, 31.84]], //01/28/15
      [1422565200000, [31.84, 32.20, 31.78, 32.08]], //01/29/15
      [1422651600000, [31.88, 32.11, 31.82, 31.89]], //01/30/15

      [1422910800000, [32.00, 32.22, 31.90, 32.21]], //02/02/15
      [1422997200000, [32.29, 32.52, 32.26, 32.47]], //02/03/15
      [1423083600000, [32.41, 32.43, 32.08, 32.16]], //02/04/15
      [1423170000000, [32.25, 32.50, 32.23, 32.50]], //02/05/15
      [1423256400000, [32.54, 32.75, 32.47, 32.52]], //02/06/15

      [1423515600000, [32.47, 32.75, 31.50, 31.64]], //02/09/15
      [1423602000000, [31.77, 32.05, 31.55, 31.96]], //02/10/15
      [1423688400000, [31.49, 31.82, 31.35, 31.77]], //02/11/15
      [1423774800000, [31.70, 31.99, 30.71, 30.89]], //02/12/15
      [1423861200000, [30.99, 31.57, 30.50, 31.55]], //02/13/15

      [1424206800000, [30.02, 30.30, 29.98, 30.27]], //02/17/15
      [1424293200000, [30.34, 30.90, 30.15, 30.80]], //02/18/15
      [1424379600000, [30.85, 30.91, 30.05, 30.15]], //02/19/15
      [1424466000000, [29.88, 30.21, 29.80, 30.21]], //02/20/15

      [1424725200000, [30.22, 30.30, 30.10, 30.17]], //02/23/15
      [1424811600000, [30.15, 30.45, 30.01, 30.39]], //02/24/15
      [1424898000000, [30.45, 31.06, 30.40, 30.91]], //02/25/15
      [1424984400000, [30.94, 31.01, 30.81, 30.89]], //02/26/15
      [1425070800000, [30.83, 31.27, 30.75, 30.99]], //02/27/15

      [1425330000000, [30.90, 31.12, 30.85, 31.11]], //03/02/15
      [1425416400000, [31.05, 31.08, 30.78, 30.86]], //03/03/15
      [1425502800000, [30.76, 30.77, 30.47, 30.66]], //03/04/15
      [1425589200000, [30.62, 30.82, 30.57, 30.82]], //03/05/15
      [1425675600000, [30.71, 30.78, 30.33, 30.42]], //03/06/15

      [1425934800000, [30.52, 30.70, 30.49, 30.64]], //03/09/15
      [1426021200000, [30.50, 30.64, 30.17, 30.17]], //03/10/15
      [1426107600000, [30.28, 30.49, 30.15, 30.19]], //03/11/15
      [1426194000000, [30.27, 30.41, 30.17, 30.40]], //03/12/15
      [1426280400000, [30.28, 30.36, 29.81, 30.04]], //03/13/15

      [1426539600000, [30.06, 30.48, 29.96, 30.45]], //03/16/15
      [1426626000000, [30.30, 30.39, 30.09, 30.31]], //03/17/15
      [1426712400000, [30.18, 30.85, 30.11, 30.64]], //03/18/15
      [1426798800000, [30.44, 30.61, 30.26, 30.33]], //03/19/15
      [1426885200000, [30.34, 30.53, 30.30, 30.40]], //03/20/15

      [1427144400000, [30.48, 30.74, 30.45, 30.47]], //03/23/15
      [1427230800000, [30.38, 30.48, 30.27, 30.28]], //03/24/15
      [1427317200000, [30.23, 30.33, 29.91, 29.91]], //03/25/15
      [1427403600000, [30.80, 30.92, 30.17, 30.30]], //03/26/15
      [1427490000000, [30.34, 30.90, 29.60, 29.64]], //03/27/15

      [1427749200000, [29.98, 30.20, 29.97, 30.12]], //03/30/15
      [1427835600000, [30.15, 30.90, 29.81, 30.81]] //03/31/15
    ]
  }]
}

Plot/Series Styling

Stock chart data can be styled according to whether the trading day saw a gain (open < close), loss (open > close), or no change (open = close). In the "plot" object, create the following:

  • "trend-up" object to style the days that saw stock gains
  • "trend-down" object for days that saw stock losses
  • "trend-equal" object for days that saw no gain or loss

When working with candlestick charts, use the following styling attributes: "background-color" (the body section), "border-color" (the body border), and "line-color" (the high and low lines). When working with open-high-low-close charts, use the "line-color" attribute. In the below chart, stock gains are red, losses are orange, and no change days are blue.

Note: On default candlestick charts, trading days that saw a loss (closing price is less than opening price) have uncolored bodies. To specify no color in your charts, simply set the "background-color" value to "none".

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Gain & Loss Styling"
  },
  "plot": {
    "aspect": "candlestick",
    "trend-up": { //Stock Gain
      "background-color": "red",
      "line-color": "red",
      "border-color": "red"
    },
    "trend-down": { //Stock Loss
      "background-color": "none",
      "line-color": "orange",
      "border-color": "orange"
    },
    "trend-equal": { //No gain or loss
      "background-color": "blue",
      "line-color": "blue",
      "border-color": "blue"
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    }
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v",
    "guide": {
      "line-style": "solid"
    }
  },
  "series": [{
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Tokens

ZingChart tokens are useful when customizing value boxes, tooltips, and crosshairs. You can see how they are used in the Crosshairs section below. Commonly used stock chart tokens include:

Token Description
%open opening price
%high highest price
%low lowest price
%close closing price
%kl for category scale labels
%kv for time-series scale labels

Refer to the ZingChart Tokens Tutorial for a full list of available tokens.

Interactive Charts

ZingChart supports interactive chart features such as crosshairs, zooming, scrollbars, and preview charts. They can be applied to stock charts as well as stock and volume charts.

Crosshairs

Crosshairs are similar to tooltips, in that they appear when you hover over data points on your chart. Crosshairs allow for more user interaction, however. They appear as long thin lines, with labels that appear for each plot value and its corresponding scale value.

To add them to a stock chart, create a "crosshair-x" object. Add a "plot-label" object, where you can place attributes that you want applied to the plot labels. Add a "scale-label" object, where you can place attributes that you want applied to the scale labels. To specify plot and/or scale label text, add a "text" attribute. You can provide a combination of tokens and text. For more attribute options, see the Crosshairs JSON Attributes/Syntax page.

Note: When working with crosshairs, it is best to disable tooltips, which always appear on stock charts by default. In your "plot" object, create a "tooltip" object. Add a "visible" attribute, and set the value to false.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Crosshairs"
  },
  "plot": {
    "aspect": "whisker",
    "tooltip": {
      "visible": false
    },
    "trend-up": {
      "line-color": "#FF04CD"
    },
    "trend-down": {
      "line-color": "#7D61D4"
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v",
    "guide": {
      "line-style": "solid"
    }
  },
  "crosshair-x": {
    "plot-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
      "decimals": 2
    },
    "scale-label": {
      "text": "%v",
      "decimals": 2
    }
  },
  "series": [{
    "values": [
      ...omitted for brevity...
    ]
  }]
}

With a stock and volume chart, you'll need multiple plot labels (one to track the stock chart and another to track the volume chart). In the crosshair's "plot-label" object, add a "multiple" attribute and set the value to true. Next, in each of your series objects, create a "guide-label" object. Use the "text" attribute to specify the desired text for each series.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Stock & Volume Chart with Crosshairs"
  },
  "plot": {
    "tooltip": {
      "visible": false
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6,
    "item": {
      "font-size": 10
    }
  },
  "scale-y": {
    "offset-start": "35%",
    "values": "29:33:2",
    "format": "$%v",
    "label": {
      "text": "Prices"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "scale-y-2": {
    "blended": true,
    "offset-end": "75%",
    "placement": "default",
    "values": "0:3:3",
    "format": "%vM",
    "label": {
      "text": "Volume"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "crosshair-x": {
    "plot-label": {
      "multiple": true
    }
  },
  "series": [{
    "type": "stock",
    "scales": "scale-x,scale-y",
    "aspect": "whisker",
    "guide-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
      "decimals": 2
    },
    "trend-up": {
      "line-color": "#FF04CD"
    },
    "trend-down": {
      "line-color": "#7D61D4"
    },
    "values": [
      ...omitted for brevity...
    ]
  }, {
    "type": "area",
    "scales": "scale-x,scale-y-2",
    "guide-label": {
      "text": "Shares Sold: %vM",
      "decimals": 2
    },
    "line-color": "#099EFF",
    "line-width": 0.5,
    "background-color": "#099EFF",
    "marker": {
      "type": "none"
    },
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Zooming

Incorporate zooming into your stock chart by adding a "zooming" attribute to the "scale-x" and/or "scale-y" object(s). Set the value to true. To zoom in on your stock chart, click and drag on the section you want enlarged. You can also zoom in by right-clicking to bring up the context menu. The menu items allow you to Zoom In, Zoom Out, or View All. See the Zooming, Scrollbar, and Preview Chart Tutorial for more information.

Note: The charts in the following zooming, scrollbar, and preview chart sections display their respective features on the x-axis only. However, incorporating them into the y-axis is also possible.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Zooming"
  },
  "plot": {
    "aspect": "candlestick",
    "tooltip": {
      "visible": false
    },
    "trend-up": {
      "background-color": "#ED008E",
      "line-color": "#ED008E",
      "border-color": "#ED008E"
    },
    "trend-down": {
      "background-color": "#F0592B",
      "line-color": "#F0592B",
      "border-color": "#F0592B"
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6,
    "zooming": true
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v",
    "guide": {
      "line-style": "solid"
    }
  },
  "crosshair-x": {
    "plot-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
      "decimals": 2
    },
    "scale-label": {
      "text": "%v"
    }
  },
  "series": [{
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Similarly, in a stock and volume chart, add a "zooming" attribute to the "scale-x" object. Set the value to true.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Stock & Volume Chart with Zooming"
  },
  "plot": {
    "tooltip": {
      "visible": false
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6,
    "item": {
      "font-size": 10
    },
    "zooming": true
  },
  "scale-y": {
    "offset-start": "35%",
    "values": "29:33:2",
    "format": "$%v",
    "label": {
      "text": "Prices"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "scale-y-2": {
    "blended": true,
    "offset-end": "75%",
    "placement": "default",
    "values": "0:3:3",
    "format": "%vM",
    "label": {
      "text": "Volume"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "crosshair-x": {
    "plot-label": {
      "multiple": true
    }
  },
  "series": [{
    "type": "stock",
    "scales": "scale-x,scale-y",
    "aspect": "candlestick",
    "guide-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close"
    },
    "trend-up": {
      "background-color": "#ED008E",
      "line-color": "#ED008E",
      "border-color": "#ED008E"
    },
    "trend-down": {
      "background-color": "#F0592B",
      "line-color": "#F0592B",
      "border-color": "#F0592B"
    },
    "values": [
      ...omitted for brevity...
    ]
  }, {
    "type": "bar",
    "scales": "scale-x,scale-y-2",
    "guide-label": {
      "text": "Shares Sold: %vM"
    },
    "bar-width": "50%",
    "background-color": "#91C740",
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Scrollbar

To add a scrollbar to your stock chart, make sure that the "zooming" attribute is set to true in the "scale-x" object. Next, in the same object, add a "zoom-to-values" array. Provide your starting and ending values, separated by a comma (e.g., "zoom-to-values": [1420232400000, 1422651600000]). Finally, create a "scroll-x" object. To style the scrollbar (the bars and handles), browse our Scrollbar JSON Attributes/Syntax page. Also see our Zooming, Scrollbar, and Preview Chart Tutorial.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Scrollbar"
  },
  "plot": {
    "aspect": "candlestick",
    "tooltip": {
      "visible": false
    },
    "trend-up": {
      "background-color": "#099EFF",
      "line-color": "#099EFF",
      "border-color": "#099EFF"
    },
    "trend-down": {
      "background-color": "none",
      "line-color": "#35203B",
      "border-color": "#35203B"
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 5,
    "zooming": true,
    "zoom-to-values": [1420232400000, 1422651600000]
  },
  "scroll-x": {
  
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v",
    "guide": {
      "line-style": "solid"
    }
  },
  "crosshair-x": {
    "plot-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
      "decimals": 2
    },
    "scale-label": {
      "text": "%v"
    }
  },
  "series": [{
    "values": [
      ...omitted for brevity...
    ]
  }]
}

The same steps apply when creating a scrollbar for a stock and volume chart. Make sure that the "zooming" attribute is set to true in the "scale-x" object. Add a "zooming-to-values" array in the same object. Finally, create a "scroll-x" object.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Stock & Volume Chart with Scrollbar"
  },
  "plot": {
    "tooltip": {
      "visible": false
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6,
    "item": {
      "font-size": 10
    },
    "zooming": true,
    "zoom-to-values": [1420232400000, 1422651600000]
  },
  "scroll-x": {

  },
  "scale-y": {
    "offset-start": "35%",
    "values": "29:33:2",
    "format": "$%v",
    "label": {
      "text": "Prices"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "scale-y-2": {
    "blended": true,
    "offset-end": "75%",
    "placement": "default",
    "values": "0:3:3",
    "format": "%vM",
    "label": {
      "text": "Volume"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "crosshair-x": {
    "plot-label": {
      "multiple": true
    }
  },
  "series": [{
    "type": "stock",
    "scales": "scale-x,scale-y",
    "aspect": "candlestick",
    "guide-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close"
    },
    "trend-up": {
      "background-color": "#099EFF",
      "line-color": "#099EFF",
      "border-color": "#099EFF"
    },
    "trend-down": {
      "background-color": "none",
      "line-color": "#35203B",
      "border-color": "#35203B"
    },
    "values": [
      ...omitted for brevity...
    ]
  }, {
    "type": "bar",
    "scales": "scale-x,scale-y-2",
    "guide-label": {
      "text": "Shares Sold: %vM"
    },
    "aspect": "histogram",
    "background-color": "#991249",
    "border-color": "white",
    "border-width": 1,
    "line-style": "dashdot",
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Preview Chart

In lieu of a scrollbar, you can display a preview chart, which is essentially a simplified version of your stock chart. To add a preview chart, first make sure that the "zooming" attribute is set to true in the "scale-x" object. You can add a "zoom-to-values" array, which will specify the starting and ending values for your preview chart handles (e.g., "zoom-to-values": [1421787600000, 1426280400000]). Note that on a preview chart, this array is optional. Finally, create a "preview" object. To style the preview chart (the handles and background colors), browse our Preview JSON Attributes/Syntax page. You can also refer to the Zooming, Scrollbar, and Preview Chart Tutorial.

Where stock charts differ from some of our other chart types is in how it appears in the preview chart. Instead of a candlestick or OHLC chart, it appears as an area or line chart. You can style the "chart" portion of the preview feature by creating another "preview" object, which is placed in the "plot" (or applicable series) object. In the object, you can specify the preview chart "type" ("area" (default) or "line") and adjust the "line-color", "line-width", "background-color", "alpha", "alpha-area", and more.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "stock",
  "title": {
    "text": "Stock Chart with Preview Chart"
  },
  "plotarea": {
    "margin-bottom": "30%" //to adjust margins.
  },
  "plot": {
    "aspect": "whisker",
    "tooltip": {
      "visible": false
    },
    "trend-up": {
      "line-color": "#00AAA0"
    },
    "trend-down": {
      "line-color": "#1E435D"
    },
    "preview": {  //to style the "chart" portion of your preview chart.
      "type": "area", //"area" (default) or "line"
      "line-color": "purple",
      "line-width": 1,
      "line-style": "dashdot",
      "background-color": "yellow",
      "alpha": 0.9,
      "alpha-area": 0.3
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 4,
    "zooming": true,
    "zoom-to-values": [1421787600000, 1426280400000]
  },
  "scale-y": {
    "values": "29:33:1",
    "format": "$%v",
    "guide": {
      "line-style": "solid"
    }
  },
  "preview": {

  },
  "crosshair-x": {
    "plot-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close",
      "decimals": 2
    },
    "scale-label": {
      "text": "%v"
    }
  },
  "series": [{
    "values": [
      ...omitted for brevity...
    ]
  }]
}

To create a preview chart for a stock and volume chart, follow the same steps as above. The only part that differs is the placement of the "preview" object (the one unique to stock charts). Instead of the "plot" object, place it in the "series" object of your stock chart. See the below chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "mixed",
  "title": {
    "text": "Stock & Volume Chart with Preview Chart"
  },
  "plot": {
    "tooltip": {
      "visible": false
    }
  },
  "scale-x": {
    "min-value": 1420232400000,
    "step": "day",
    "transform": {
      "type": "date",
      "all": "%D,<br>%m/%d"
    },
    "max-items": 6,
    "item": {
      "font-size": 10
    },
    "zooming": true,
    "zoom-to-values": [1421787600000, 1426280400000]
  },
  "preview": {

  },
  "scale-y": {
    "offset-start": "35%",
    "values": "29:33:2",
    "format": "$%v",
    "label": {
      "text": "Prices"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "scale-y-2": {
    "blended": true,
    "offset-end": "75%",
    "placement": "default",
    "values": "0:3:3",
    "format": "%vM",
    "label": {
      "text": "Volume"
    },
    "guide": {
      "line-style": "solid"
    },
    "item": {
      "font-size": 10
    }
  },
  "crosshair-x": {
    "plot-label": {
      "multiple": true
    }
  },
  "series": [{
    "type": "stock",
    "scales": "scale-x,scale-y",
    "aspect": "whisker",
    "guide-label": {
      "text": "Open: $%open<br>High: $%high<br>Low: $%low<br>Close: $%close"
    },
    "trend-up": {
      "line-color": "#00AAA0"
    },
    "trend-down": {
      "line-color": "#1E435D"
    },
    "preview": {  //to style the "chart" portion of your preview chart.
      "type": "area",
      "line-color": "#00AAA0",
      "background-color": "#1E435D"
    },
    "values": [
      ...omitted for brevity...
    ]
  }, {
    "type": "bar",
    "scales": "scale-x,scale-y-2",
    "guide-label": {
      "text": "Shares Sold: %vM"
    },
    "background-color": "#F66973",
    "bar-width": "70%",
    "border-radius": "9px",
    "values": [
      ...omitted for brevity...
    ]
  }]
}

Summary

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