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 aspectattribute. 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.

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

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

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

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

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

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.

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

TokenDescription
%openopening price
%highhighest price
%lowlowest price
%closeclosing price
%klfor category scale labels
%kvfor 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.

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

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

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

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

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

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

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

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