(10/24/16) - Version 09-2016-19 is now available! Get your copy by sending an email to

(12/01/16) - GitHub seed sample projects are now available for iOS, Angular and React!

Each project has a readme which should provide all the information necessary for a developer to get started. The mobile project links to a demo library running on the chartIQ servers so it works out of the box. The Angular and React projects each require to explicitly include your chartIQ library to work.

Version 09-2016-19

  • Please Note If using splines, it is now required to include the following: <script src="js/splines.js"></script> and corresponding js/splines.js file.
  • Please Note In chartiq.html comparisons are now reset and not carried over between symbols.
  • Please Note Templates no longer included in the license package: stx-phone.html and stx-basic.html
  • Please Note STXChart#addSeries is no longer needed to be specified. If no is provided the quotefeed will be automatically used, and no longer tries to use an existent masterData field.

Core Functionality

  • New template chartiq-basic.html (web components)
  • Library now provides support for CommonJS and NodeJS or RequireJS
  • New advanced studies:
    • VWAP
    • Performance Index
    • Beta
    • Balance of Power
    • Trend Intensity Index
    • Vortex Indicator
    • ZigZag
    • Psychological Line
    • Moving Average Deviation
  • New advanced drawing:
    • Crossline
    • Speed Resistance Arc
    • Speed Resistance Line
    • Gann Fan
    • Time Cycle
    • Regression Line
    • Tirone Levels
    • Quadrant Lines
  • Added studyOverBoughtValue and studyOverSoldValue selectors to study dialog.
  • Modified STXChart.stxx.markerDelay to immediately cause markers to move. Prior setting had a 25ms delay.
  • Chart aggregations (Heikin-Ashi, etc.) now preserves server side data on dataSet.
  • Studies can now use attributes to set allowable ranges for numeric inputs. Example:
    "Hist Vol": { 
      "name": "Historical Volatility", 
      "calculateFN": STX.Studies.calculateHistoricalVolatility, 
      "inputs": {"Field":"field", "Period":10, "Days Per Year":[252,365], "Standard Deviations":1}, 
      "attributes": { 
          "Standard Deviations":{min:0.1,step:0.1} // this limits the range of Standard Deviations to a minimum of 0.1 and only allows changes in 0.1 steps.
  • Added "Points Or Percent" input field to "Price Oscillator" study
  • Added "Moving Average Type" input field to "RAVI' study
  • Added "Period" input filed to Elder Force Index study
  • New STX.Renderer.Shading is now available to shade between series lines.
  • New STX.Tooltip module is now available to display datapoint details on the current crosshair location.
  • STXChart#addSeries can now also take an epoch number.
  • STXChart#addSeries now allows a series to be added on an empty chart.
  • new function STXChart#moveMarkers moves the markers from one panel to another. Useful when renaming panels

WebComponents UI

  • Added STX.UI.ViewsMenu for Views support (cq-view-dialog)
  • Added Key up/down support for search windows
  • Study legend renderer now displays the 'display' name insted of the ID
  • Added Trading Central support (cq-tradingcentral and cq-tc-number)
  • Added basic details component (cq-details)
  • Heads up tooltip (stx-hu-tooltip)


Version 07-2016-16

  • Please Note The ctrl key no longer clones a drawing by default. To maintain this functionality see STXChart#cloneDrawing

Core Functionality

  • Added a Smoothing Period parameter to the ADX study.
  • New parameter STXChart#minimumZoomTicks to set the minimum number of ticks that must remain on the chart when zooming in. (07-2016-16.6)
  • New parameter STXChart#cloneDrawing is now needed to clone a drawing. A developer can toggle it based on the control key to maintain the previous functionality. (07-2016-16.7)
  • FloatDate now stays pinned to the left size if there isn't enough room to display (prevents it from being clipped).(07-2016-16.7)
  • Safety check for negative study periods added -- if a negative number is selected it is reset to 1. (07-2016-16.7)

WebComponents UI

  • Custom themes added
  • Study legend component added ( cq-study-legend )
  • Close price added to comparison legend ( cq-comparison )
  • Added study zones parameters to UI. (07-2016-16.7)
  • Corrected line not centered on drawing line style drop down. (07-2016-16.7)


  • Comparison no longer causing error if chart is panned all the way to the left showing just the first tick.
  • Fixed identical studies causing infinite loop -- corrected study name-relationship logic. (07-2016-16.7)
  • Corrected moving Average not allays working on volume study. (07-2016-16.7)
  • Undo/Redo drawing button now resets when a symbol is changed. (07-2016-16.7)
  • STX.colorToHex - fixed bug with missing leading 0's. (07-2016-16.7)
  • Fix for zoom bug on iOS. (07-2016-16.7)
  • Callbacks.longhold no longer triggered when pinching (catching two finger situation). (07-2016-16.7)
  • Corrected setRange issue causing shifted renderings with white space on left. (07-2016-16.7)
  • Fixed calculateRandomWalk divide by 0 issue. (07-2016-16.7)

Version 06-2016-21 ( minor release )

Version 05-2016-10

Core Functionality

  • STXChart.Chart#lockScroll can now be set to true to stop the chart from auto-scrolling when new data arrives

  • stxx.preferences.currentPriceLine can now be set to true to display a horizontal line at the current price.

  • stxx.preferences.horizontalCrosshairField can now be set to lock the crosshair Y value to the value of the specified field name.

  • stxx.xAxisAsFooter can now be set to display the xaxis at the bottom of the screen instead of the bottom of the chart panel.

  • STXChart#setSpan will now save the desired span in stxx.layout. Users will get the same span when they change symbols, and the span will now be saved and restored with the layout between sessions

  • "Equal Citizen" series. Series may now be added without dependency to the start or end date of the primary series and without setting a masterData. This is done by using parameters.forceData which will create a masterData entry if none exists for that DT. See STXChart#addSeries for details.

  • Users can now pan chart all the way to the left (previously 1/3 or the screen would always be taken by the chart). Use STXChart#minimumLeftBars to set the minimum amount of chart to always display on the left side of the screen.

  • Equation charts now work for comparison symbols, relative price symbols and any other condition where a study requires a symbol other than the master.

  • New Marker placement options: yPositioner="on_candle", "under_candle", "top", "bottom", "value" to position the market on top of, or underneath the candle, at the top or bottom of the panel, or at the specified value. See STX.Marker

  • Autocalculated values now available in chart.dataSet automatically: "hl/2" - Median Price "hlc/3" - Typical Price "hlcc/4" - Weighted Close "ohlc/4" - OHLC divided by 4

  • Library now compatible with "use strict".

  • STXChart#importLayout and STXChart#exportLayout can now optionally also restore/save the stock symbol using the "withSymbols" parameter

  • Market.getOpen(dt), getClose(), getNextOpen(), getNextClose(), getPreviousOpen(), getPreviousClose() convenience functions

  • New baseline_delta_mountain and colored_mountain chart types are available.

WebComponents UI

There is now a new file chartiq.html which is an updated, responsive UI that is based off of webcomponents. The webcomponents-lite.min.js polyfill (included) are required to run this on browsers other than Chrome. object-observe.js polyfill is currently required (this requirement will be removed in an upcoming release).

Recent changes:

  • cq-toggle now a true webcomponent
  • cq-side-panel webcomponent now used to house side panel plugins (trade from chart)
  • Any cq webcomponent can now be loaded as a marker with the cq-marker attribute.
  • All cq webcomponents now automatically have this.node as a jquery accessor.
  • All cq click bindings now pass an "activator" object (instead of a node) to their action methods. This object contains the node, event and optional parameters.
  • cq-focus on an input tag inside of a menu will cause the input to receive focus immediately when the menu is activated.
  • cq-color-picker now repositions itself it is off screen.
  • cq-comparison-description if exists will display the description of a comparison symbol in the legend.
  • cq-tooltip tag replaces css :after elements, allowing them to be translated


  • Held draggable elements will no longer trigger an inadvertent mouse click if they are dragged underneath a button (TFC).

Version 03-2016-11

  • Please Note A new Market class replaces LegacyMarket class. If calling any functions from LegacyMarket, please replace them with equivalent Market functions. The Market class now allows a market's hours and holidays to be defined with a market definition file. Market iterators allow you to move forward and backward in time, with the Market automatically skipping over time when the market is closed. See STX.Market for all instructions and details.

  • Please Note chart.xAxis.useDataDate is not longer available. Instead use {@linkSTXChart.XAxis#adjustTimeZone} with inverted logic.

  • Please Note The Twiggs study now requires attribution. Please see the attribution information in stx-advanced.html.

  • Please Note iscroll4 was removed from stxThirdParty.js. (iscroll5 remains)

  • Improved mobile gestures for smoother and more accurate pinch and swipe.

  • You can now swipe a chart with the mouse.

  • Equations are now supported (when using a QuoteFeed). Start equations with "=". Example =IBM+AAPL. STXChart#allowEquations

  • Home button animates the chart to home instead of skipping immediately.

  • Color picker colors can now be customized by redefining the values in STX.colorPickerColors

  • STX.Studies.replaceStudy method now available to replace an existing study.

  • Support for fractional y-axis values (treasuries and treasury futures) STXChart.YAxis#fractional

  • New improved semi-log y-axis STXChart.YAxis#prettySemiLog

  • Multiple identical studies can now be added. Each one will have a name that ends in -1, -2, -3 (to support adding studies without a dialog)

  • Advanced template: Menus now automatically resize and allow scrolling if there is not enough vertical space.

  • Advanced template: up and down arrow keys now zoom the chart

  • Performance improvements when many (especially old) drawings on the screen

  • Resolved issue with focus (solo) button overlapping studies y -axis when activated.

  • Charts on mobile devices will pass scroll up and down to the parent app by setting STXChart#captureTouchEvents to false

  • New callbacks STXChart#callbacks.layout and STXChart#callbacks.drawing will be called when the layout is changed or a drawing is changed, added or deleted.

  • STXChart#addEventListener to allow multiple listens on a callback.

  • New STX.QuoteFeed.Subscriptions object can manage subscriptions in order to combine query (for historical) with streaming updates. This QuoteFeed type will callback when new symbols are required or old symbols are removed by the user from the chart.

  • Multiple Markers on the same chart bar will now stack.

  • STXChart#newChart parameter stretchToFillScreen can be set to increase the candleWidth to fill the left-side gap created by a small dataSet.

  • Trade From Chart:

    • Forex hedging now optionally supported
    • Positions markers are now displayed on the chart.

Version 12-2015-08 ( minor release )

Fixed crosshair positioning bug on touch devices.

Added flag to control side-swipe touch pad scrolling. set stxx.allowSideswipe=false to disable.

Version 11-2015-01

  • Please Note: stxx.cleanupGaps now defaults to false. We've found that most customers who have gaps in their date prefer this behavior. If you wish to fill gaps with "dashes" then set this value to true.

  • Please Note: Translations have now been moved into an optional translations.js file which you only need to include if you are supporting multiple languages.

  • Please Note: New file stxShare.js contains the code for chart sharing. If you were previously supporting chart sharing you will need to include this file.

  • Please Note: stx-demo.html and stx-demo.css have been renamed stx-standard.html and stx-standard.css. Please be sure to update your include references.

  • Please Note: stx-drag-chart class is now added to the chart container when dragging, no longer the document.body

  • Please Note: the stxx.callbacks.studyOverlayEdit function definition in stx-advanced.html was slightly updated. You will need to replace the function on your project with the latest one to ensure overlay studies properly delete.

  • Please Note: STXChart.YAxis#drawPriceLabels now controls the rendering of all y axis labels (using STXChart#createYAxisLabel). Setting this to false will turn off y-axis labels regardless of any other settings. For study series, stxx.preferences.labels now controls the rendering. Example: stxx.preferences.labels=false;. This flag can be set to false before calling STX.Studies.displayIndividualSeriesAsLine or STX.Studies.displaySeriesAsLine and then set back to true to disable labels just for that one study.

  • Please Note: The up/down arrow buttons on the main chart control panel as well as the focus (solo) button on all panels have been removed on the stx-advanced.html sample template. To re-enable them, comment out the display:none; line on the following style controls found in stx-advanced.css

      /* comment out if you want the main chart controls on. */
      .stx-panel-control.stx-chart-panel .stx-btn-panel{
      /* comment out if you want the focus button on. */
      .stx-panel-control div:nth-of-type(3) { /* solo button */
  • Please Note: that the stxx.callbacks.studyOverlayEdit function in your project (originally in) stx-advanced.html must be replaced with the latest code to allow for a custom removal process needed on special studies.

Specifically this portion of the function:

    STX.safeClickTouch(remove, function(){
        var removeFN=sd.libraryEntry.removeFN?sd.libraryEntry.removeFN:STX.Studies.removeStudy;    // <---- changed
        removeFN(stx,sd);                                                                          // <---- changed
        var closeIcon=$$$("#menuWrapperStudies #" + sd.type.replace(" ","-"));
        if(closeIcon) {
  • A new "pretty" algorithm is the default for calculating y-axis grid levels. Set STXChart.YAxis.prototype.pretty=false for the old algorithm.

  • The number of decimal places to use in the current price label is now calculated by the callback calculateTradingDecimalPlaces. The default implementation now looks at the most recent 50 trades rather than the entire masterData. This reduces the risk of displaying too many decimal places due to unscrubbed data. This methodology can be overridden if desired (for instance if a source exists for the actual number of decimal places). See STXChart#callbacks

  • Charts with second and millisecond periodicities are now supported. Pass an optional third parameter timeUnit into setPeriodicityV2 to qualify the periodicity number. For instance to create a 5 second chart from 5 second data: setPeriodicityV2(1, 5, "second").

  • Added STX.yyyymmddhhmmssmmm method to support second and millisecond charts. Drawings will now save in this format but will remain backward compatible with drawings saved prior to this upgrade.

  • Added volume_candle chart type.

  • New studies:
    • Darvas Box study
    • STARC Bands study
    • Supertrend study
  • New views in TFC positions panel. Easily add protection to current positions. Display P&L. Display "trades" view for Forex systems. New Enhanced positions configs:
    • config.closeAll drives the close all button
    • config.tradeActions controls the protection view
    • The presence of account.trades drives the lots view and the ability to protect/close a trade.
  • Practice Trading Simulator is now available as a plugin.

  • Autochartist is now available as a plugin.

  • To improve layout efficiency , the default study menu in stx-advanced.html now contains a lookup capability. Only the most popular studies will be displayed in the initial drop down. This initial list can be modified by altering the HTML in stx-advanced.html. Clicking "all" will pull up a scrollable list of studies.

  • Drawing undo button now available in stx-advanced.html

  • Added new "HeatMap" renderer. See STX.Renderer.Heatmap

  • Horizontal trackpad/mouse wheel support

  • Fixed clipping issues with IE8 excanvas.

  • Candles are now "centered" in their allocated space. Previously candles were left aligned. This would not have been noticed in most cases but was counter-intuitive for developers who were writing code to draw directly on the canvas.

  • STX.Studies.addStudy can now be called directly. STX.Studies.quickAddStudy is deprecated but still supported.

  • QuoteFeed now receives both a symbol and a symbolObject. A symbolObject can contain additional information used to identify a security, for instance exchange code. See {@STX.QuoteFeed#fetch} and STXChart#newChart for details on how to use a symbol object in your chart.

  • STXChart#addSeries now supports a symbol and a symbolObject.

  • STX.Comparison.add was enhanced - compareSymbol now supports a symbol and a symbolObject.

  • STXChart#newChart is now capable of setting periodicity and span via params settings.

  • STXChart#appendMasterData - Function signature updated:
    • params bypassGovernor and allowReplaceOHL were added
    • params force was deprecated. Every call will update the tick to maintain the proper volume and createDataSet is now controlled by sp.maxTicks, sp.timout or params.bypassGovernor
  • STX.LegacyMarket.getNextOpen, {@link STX.LegacyMarket.getPreviousClose} - Function signature updated:
    • stx is now a required parameter
  • STXChart.YAxis#shadowBreaks was added. This is an array that determines how many decimal places to print based on the size of the shadow (the difference between chart high and chart low). The array consists of tuples in descending order. If the shadow is less than n1 then n2 decimal places will be printed. Set to STXChart.YAxis.defaultShadowBreaks by default.

  • STXChart#mouseWheelAcceleration was added - Set to false to turn off mousewheel acceleration

  • New Drawing tools and constructors:

    • Callout drawing tool. This is like an annotation except it draws a stem and offers a background color and line style.
    • New Shape constructor - STX.Drawing.shape is a default implementation of a STX.Drawing.BaseTwoPoint drawing which places a "shape" on the canvas. It can be rotated and/or stretched. It is meant to be overridden with specific shape designs, such as arrows, etc.
  • New side-swipe scrolling. 2 finger side-swipe motion on touch pad (left/right) scrolls the chart.

Version 08-2015-01

This is a minor release containing mostly tweaks or minor bug fixes.

  • Please Note: The fibonacci drawing tool has been renamed "retracement" although the old name is supported for backward compatibility.

  • Added mutual fund support in Xignite quote feed

  • Fibonacci timezones, arcs, fan

  • Fibonacci settings

  • Resizing the chart now automatically maintains scroll position

  • IOS8 fixed:position bug workaround in stx-phone

  • Removal of markers bug fix

  • Removed small canvas used for floating last/current price label. It is now directly drawn on the chart canvas using STXChart#createYAxisLabel The following styles in stx-chart.css are no longer needed:

.stx-float-price {/* Floating horizontal value */
    margin-left: -13px;

.stx-float-price-canvas {
    margin-top: 7px;
    margin-left: 2px;
.stx-float-price-arrow {
    color: #333;
.stx-float-price-inner {
    position: absolute;
    top: 10px;
    padding-left: 13px;

Version 07-2015-01

  • Please Note: STX.Comparison.quoteFeedCallback should no longer be set on the QuoteFeed. Comparisons (series) quote fetching is now done automatically when using a QuoteFeed.


var quoteBehavior={
  refreshInterval: 15,
  //callback: STX.Comparison.quoteFeedCallback <<<---- remove this line if you want to use the new automatic series data loading

For backwords compatibility, the STX.Comparison.quoteFeedCallback function will still be called instead of the new automatic QuoteFedd fetching if defined in the quoteBehavior. But it is important that if you wish to continue using the legacy architecture, you must ensure you continue to flag series properly so the quoteFeedCallback continues to update data as needed. So if your quoteFeedCallback function uses quoteFeedCallbackRefresh as the flag for series that use the QuoteFeed for data, you must continue to include this flag in your series parameters.

  • Please note: All drawings and studies have been moved into stxLibrary.js (previously in stx.js) except those that are only available with the advanced package which are now in stxAdvanced.js.

  • New drawing types: Gartley, Pitchfork, Channel, Callout, Shapes (arrow, heart, etc). Shapes includes a facility for developers to draw custom shapes by specifying a series of vectors.

  • New Studies: Choppiness Index, Ulcer Index, Disparity Index, Rainbow Oscillator, Rainbow Moving Average, Pring's Know Sure Thing, Pring's Special, Price Momentum Oscillator

  • Support for multiple y-axis, including y-axis on the left side of the chart. See STXChart.YAxis#position and Renderers

  • The floatHR element (y-axis value that moves with crosshair) is no longer a DIV element but is now painted on to a new transparent canvas called floatCanvas. This was done to facilitate multiple y-axis, where each one would need a separate floating element.

  • Updated, simplified, Markers interface. See Markers. Trade From the Chart, panel icons, home button, etc all modified to use the new Marker interface.

  • New Renderer concept allows developers to build custom "renderers" for building time series based visualizations. Initial Renderer.Line and Render.Histogram can be used for adding multiple series to the chart in either line or stacked histogram format, with optional left y-axis. See Renderers

  • Callbacks object for for developers to tap into commonly requested callbacks such as tap, move, studyOverlayEdit, studyPanelEdit. See STXChart#callbacks (In stx-advanced.html stx.editCallback was replaced with stxx.callbacks.studyPanelEdit and stxx.callbacks.studyOverlayEdit)

  • A new server side symbol lookup module is available for customers who utilize Xignite market data.

  • stx-advanced.html now includes a context menu when right clicking on study overlays. The context menu allows users to either edit or delete the overlay.

  • Charts will now display partial bars on both left and ride side of the chart for a more seamless look. dataSegment as a result can now contain references to bars that are not entirely on the screen. Canvas clipping has been implemented more rigorously to accomodate this new functionality.

  • Baseline Delta charts now have a user draggable centerpoint.

  • Default studies in stx-demo.html have been changed to reduce clutter. Original studies are still available, just manually add them back if you need them.

  • Changes to stx-phone.html to better support full-screen mode, especially on older phones.

  • All browsers other than Chrome now use requestAnimationFrame by default. Set stxx.useAnimation to override this behavior. This improves performance on Firefox and Safari.

  • chart.left, chart.right, chart.width, etc all now refer to the space occupied by the chart panel itself, minus the axis. Similarly panel.left, panel.right, panel.width, etc is available for every panel. Finally, stxx.left,, etc now refer to the position of the chartContainer on the page. stxx.width references the width of the chartContainer.

  • A STXChart object (stx) is now required by the LookupWidget (to facilitate language translation).

  • STX.destroy() convenience method for destructing (cleaning up) STXChart and accompanying UI elements.

  • Added STXChart.YAxis#justifyRight and STXChart.YAxis#textBackground parameters.

  • stxx.yaxisLeft and stxx.yaxisWidth have been deprecated in favor of STXChart.YAxis#width and STXChart.YAxis.left.

  • stxx.preferences.zoomInSpeed and stxx.preferences.zoomOutSpeed now available to set the zoom sensitivity. See STXChart#preferences

  • Example built in themes in stx-advanced.html use names "White" and "Black". You can keep the old "Light": true, "Dark": true if desired.

  • excanvas.js now supports rudimentary clipping.

  • All convenience price conversion functions now take an optional yAxis argument. See for instance STXChart#pixelFromPrice.

  • A number of minor syntactical changes were made throughout the library to reduce warnings from jshint.

Version 05-2015-15

  • Chart title reverted back to display by default. Un-comment 'display:none' to hide.
.stx-panel-control.stx-chart-panel{ /* hide chart controls */
  • Added logic to properly remove any studies that relied on the old panel ID name, for instance a moving average on RSI(14) is no

  • stxx.streamParameter.maxWait set to default to 1 second.

  • stxx.allowZoom flag now also enables/disables mousewheel events.

  • Added logic to properly translate between camel and hyphenated preventing style error in order native Chrome browsers.

  • Fixed MA study line dropping to zero at head-end of the chart if not enough data is available in the dataSet.

  • Improved scrolling stability control by reducing the amount of accidental vertical scrolling when panning left/right.

  • Improved performance of appendMasterData.

Version 04-2015-24

  • Please Note: The library files have been reorganized from the last version into subdirectories: js, css, img. The advanced package also includes a "plugins" subdirectory. See Library Package - file-by-file descriptions for more details.

  • Please Note: A new file stxLibrary.js now contains a library of studies, drawing tools and quote feeds that were previously contained in the kernel.

  • Please Note: New SVG elements are now included in the img directory. These are used to render some chart components such as the icons on the chart panels.

To maintain IE8 compatibility, please ensure the following code is included:

// IE8 doesn't support svg as background image. This will cause a png to be used instead.
if(!document.implementation.hasFeature("", "1.1"))
  STX.appendClassName($$$("body"), "no-svg");
  • Please Note: QuoteFeed implementations should ideally support startDate<->endDate. This specific date range functionality is requested by the chart when loading comparison symbols.

  • Please note: the chart is now market hours aware. As such a valid symbol must be used in stxx.newChart(symbol, masterData); so the library can activate the proper exchange hours. To disable market hours and default to 24x7, set stxx.calendarAxis=true;. stxx.beginHour, stxx.beginMinute, stxx.endHour, stxx.endMinute are no longer relevant. See Market Hours and the Charts for more details.

  • Please note: STXChart#setSpan and STXChart#setRange will now intelligently fetch appropriate data when called, if a QuoteFeed is attached and the masterData does not contain all data required to render the range selected. This makes it much easier to build range pickers. setSpan now also supports "all", "ytd" and "today" as possible values. Be aware the functions will now override the selected periodicity and automatically choose the best periodicity for the selected range according to the following rules map:

              {range:STX.WEEK, periodicity:1, interval:5}, // Any range less than a week, load 5 minute bars
              {range:STX.MONTH, periodicity:1, interval:30}, // Any range less than a month, load 30 minute bars
              {range:STX.MONTH*7, periodicity:1, interval:"day"}, // Any range less than a year, load daily bars
              {range:STX.DECADE, periodicity:1, interval:"day"}, // Any range less than a decade, load daily bars
              {range:STX.DECADE*10, periodicity:1, interval:"month"}, // Any range less than a century, load monthly bars
              {range:Number.MAX_VALUE, periodicity:12, interval:"month"} // Anything greater than a century, load yearly bars

    See STXChart#setSpan and STXChart#setRange for usage details and parameters needed to override the new defaults.

  • Please note: The panel control buttons layout has been restructured. There is a new div called stx-btn-panel and new background files.

Previous version panel controls layout:

<div class="stx-panel-control" style="display: none;"><div class="stx-panel-title"></div><div class="stx-btn stx-ico"><span class="stx-ico-up"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-focus"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-down"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-edit"> </span></div><div class="stx-btn stx-ico"><span class="stx-ico-close"> </span></div></div>

This version panel controls layout:

<div class="stx-panel-control"><div class="stx-panel-title"></div><div class="stx-btn-panel"><span class="stx-ico-up"></span></div><div class="stx-btn-panel"><span class="stx-ico-focus"></span></div><div class="stx-btn-panel"><span class="stx-ico-down"></span></div><div class="stx-btn-panel"><span class="stx-ico-edit"></span></div><div class="stx-btn-panel"><span class="stx-ico-close"></span></div></div>

You will need to make sure your CSS contains the following (IF NOT COMPLETELY REPLACING WITH THE NEWLY PROVIDED CSS FILES) :

/* Panel Buttons */

.stx-btn-panel span {/* Button Defaults */
   -webkit-transition: -webkit-transform .2s;
   transition: transform .2s;
.stx-btn-panel {/* Button Spacing */
 margin:3px 2px;
.stx-btn-panel:hover span,
.stx-btn-panel:active span {/* Make buttons full opacity on hover or hit */
.stx-btn-panel:active {/* Scale up when active */
 -webkit-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);
 transform: scale(1.2, 1.2);
.stx-btn-panel span {/* Button Icons */
   -webkit-transition: opacity .2s;
   -moz-transition: opacity .2s;
   transition: opacity .2s; 
.no-svg .stx-btn-panel span {/* Button Icons for non SVG browsers */
.stx-btn-panel > span.stx-ico-up {background-position: -150px -25px;}
.stx-btn-panel > span.stx-ico-down {background-position: -200px -25px;} 
.stx-btn-panel > span.stx-ico-close {background-position: -250px -25px;} 
.stx-btn-panel > span.stx-ico-edit {background-position: -300px -25px;} 
.stx-btn-panel > span.stx-ico-focus {background-position: -350px -25px;} 

.stx-panel-control.stx-chart-panel{ /* hide chart controls */

.stx-panel-control div:nth-of-type(3) { /* solo button */

You may need these as well if you don't have it:

.stx-panel-control {/* Panel Control buttons template */
 position: absolute;
 left: 0px;
 overflow: hidden;
 z-index: 30;
 display: none;

.stx-panel-control * {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;

.stx-panel-control.stx-show {
 display: inline-block;

.stx-panel-title {/* Panel/Chart Titles */
 margin: 5px 10px;
 float: left;
 display: inline-block;
 color: #333;
 padding: 0 10px;
 font-size: 12px;
 text-transform: uppercase;
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
 box-shadow: 0px 1px 1px rgba(0, 0, 0, .2);
 cursor: auto;

.stx-panel-control .stx-btn {/* Float all icons so they stay in line on the left */
 float: left;

Use this for the light theme (replace existing):

.Light .stx-btn-panel > span.stx-ico-up {background-position: -150px -25px;}
.Light .stx-btn-panel > span.stx-ico-down {background-position: -200px -25px;} 
.Light .stx-btn-panel > span.stx-ico-close {background-position: -250px -25px;} 
.Light .stx-btn-panel > span.stx-ico-edit {background-position: -300px -25px;} 
.Light .stx-btn-panel > span.stx-ico-focus {background-position: -350px -25px;}

Use this for the dark theme (replace existing):

.Dark .stx-btn-panel > span.stx-ico-up {background-position: -150px -50px;}
.Dark .stx-btn-panel > span.stx-ico-down {background-position: -200px -50px;} 
.Dark .stx-btn-panel > span.stx-ico-close {background-position: -250px -50px;} 
.Dark .stx-btn-panel > span.stx-ico-edit {background-position: -300px -50px;}

Make sure to add the new background-image:url(../img/stx-sprite-panels.png) and background-image:url(../img/stx-sprite-panels.svg)

  • Please note: The "focus" icon which temporarily hides the other panels has been eliminated. It can still be added back for users who want backward compatibility by changing this line in stx-advanced.css:
.stx-panel-control div:nth-of-type(3) {
    display: none;
  • Please note: The chart title (symbol displayed on the upper left corner of the main chart) has been eliminated in the advanced package in favor of the input symbol box which also displays it. It can still be added back for users who want backward compatibility by changing this line in stx-advanced.css:
.stx-panel-control.stx-chart-panel{ /* hide chart controls */
  • It is no longer necessary to include stxTimeZoneData.js unless you wish to support the Timezone UI widget (standard and advanced packages). The default implementation now includes just the timezone information for New York and UTC which is necessary to support market hours logic. If you require logic for other timezones then you should include stxTimeZoneData.js.

  • Smooth scrolling. Charts now scroll pixel by pixel instead of candle by candle. This results in a smoother looking scrolling. An animation is used when pressing the zoom buttons. STXChart.micropixels now contains the offset in pixels from the basepoint of the first candle. set stxx.animate=null to turn off the animation effect.

  • New chart types Heiken Ashi, Kagi, Line Break, Renko, Point & Figure. (Advanced Package).

  • Gartley drawing tool. (Advanced Package).

  • New Studies: Relative Volatility, Market Facilitation Index, Relative Vigor Index, Alligator, Gator

  • New optional StockTwits and RSS News plugins. (Advanced Package).

  • studyLibrary now contains a friendly "name" member which can be used to drive automatic generation of menus.

  • Custom studies that require data to be fetched from a remote server can now do so by attaching a custom STX.QuoteFeed to the study.

  • Drawing tools now take into consideration shifting timezones, so that a user's drawings will appear in the right spot when they move to another timezone. Use the STX.Drawing#setPoint method to accomplish the same when building custom drawings.

  • STXChart.layout.chartScale="log" is now the preferred way to enable log scale (STXChart.layout.semiLog is maintained for backward compatibility).

  • YAxis Features: yAxis.min and yAxis.max can be used to set fixed minimum and maximum values for the y-axis. (For instance 0 and 1 on a percentage chart) yAxis.drawCurrentPriceLabel - set to false to not draw the current price label yAxis.drawPriceLabels - set to false to not draw price labels on that axis only yAxis.goldenRatioYAxis - will attempt to create grid lines that approximate the golden ratio. This creates an "airy" modern looking chart

yAxis parameter object can now be passed directly into the STXChart constructor.

  • A custom yAxis parameter object can now be specified as part of the studyLibrary entry for a study.

  • More refinements to the non-time-based axis algorithm. xAxis.axisType="ntb" now provides superior x-axis label alignments under most conditions. This axis is enabled by default for range bars, kagi, renko and p&f

  • stxx.allowZoom and stxx.allowScroll can now be set to false to disable zooming or scrolling. Must be sent in as a config parameter to STXChart. Example: var stxx=new STXChart({container:$$$(".chartContainer"), allowZoom:false, layout:{"candleWidth": 16, "crosshair":true}});

  • Injections can now be made to independent chart instances (as well as the prototype that affects all charts).

  • STX.addMemberToMasterdata can now be used to add a raw data series to the chart. (this is used internally by STXChart#addSeries).

  • Fixed bug in STXChart#tickFromPixel where the tick was being multiplied by the periodicity.

  • An injection was added to stx-advanced.html and stx-demo.html to provide a mechanism for deleting studies that don't support right click.

  • Performance improvements on createDataSet.

  • Complex security types are now supported. That is, a security object can be passed into newChart now instead of a string. Your QuoteFeed will receive this object. Set object.symbol to the unique label you want to print on the chart.

  • #chartContainer deprecated in favor of .chartContainer in css

  • Revised and simplified styling for chart components based on scalable svg elements.

  • z-index values of chart components have been re-arranged.

Version 01-2015-20

  • Please Note: createVolumePanel() has been deprecated. Previously volume charts were created within stxchart.displayChart(). Now they follow the same loading pricess as any other study. As such, the layout of the storage and retreival format has changed.

To make this change transparent to the end users, you can either

1- Add the following line at the end of displayChart() if the "vchart" panel is present:

if(stxx.panels.vchart) STX.Studies.addStudy(stxx, "volume", {}, {"Up Volume":"#8cc176","Down Volume":"#b82c0c"});

2- Add code in the restoreLayout() function to append the following to the layout data before calling stxx.importLayout(d) :

        Up Volume:"rgb(227, 100, 96)",
        Down Volume:"rgb(184, 44, 12)"},

It assumes the layout already includes the pannel "vchart":


Here is the function where you need to add the code:

function restoreLayout(){
    var datum=STX.localStorage.getItem("myChartLayout");
    var d=JSON.parse(datum);

    /********** add code here to include d.studies.vchart  **********/
    if(d.panels.vchart && d.studies && !d.studies.vchart) 
        d.studies.vchart=    {
                                    Up Volume:"rgb(227, 100, 96)",
                                    Down Volume:"rgb(184, 44, 12)"},
    if(stxx.layout.semiLog) STX.appendClassName($$$(".stxLog"), "true");
    if(stxx.layout.aggregationType=="heikinashi") STX.appendClassName($$$(".stxHeikinashi"), "true");
    else if(stxx.layout.aggregationType=="kagi") STX.appendClassName($$$(".stxKagi"), "true");
    else if(stxx.layout.aggregationType=="linebreak") STX.appendClassName($$$(".stxLinebreak"), "true");
    else if(stxx.layout.aggregationType=="pandf") STX.appendClassName($$$(".stxPandf"), "true");
    else if(stxx.layout.aggregationType=="renko") STX.appendClassName($$$(".stxRenko"), "true");
    else if(stxx.layout.aggregationType=="rangebars") STX.appendClassName($$$(".stxRangebars"), "true");
  • minMax miscalculations on studies with negative values due to use of MIN_VALUE

  • Studies can now be specified as singletons by including "singleton=true" in the library entry. This will prevent this study from being loaded in multiple panels.

  • Editing studies of studies now works correctly, daisy chaining all the way from parent to youngest child study

  • Additional moving average types

  • New Study : Volume profile

  • STXChart and UI Singletons now have destroy() methods to clean up their memory heaps

  • Default timezones for pacific islands modified based on customer feedback

  • minimumCandleWidth member of STXChart now specifies the smallest user zoom (1 pixel by default, previously 0.25)

  • Bug fix for chart borders on studies with "zones"

  • More efficient createDataSet() method

  • Formula corrections for pivot points

  • Iscroll5 is now "probe edition"

Version 12-2014-02

Please Note stxThirdParty.js and stxTimeZoneData.js are now required includes because our market date logic (used to compute the x-axis) is now timezone aware. Please includes these two scripts before stx.js.

Please Note The floating price label is now based off of a small canvas. CSS changes are necessary for a smooth transition. These are included in the updated stx-chart.css

.stx-float-price {/* Floating horizontal value */
    margin-left: -13px;

.stx-float-price-canvas {
    margin-top: 7px;
    margin-left: 2px;
.stx-float-price-arrow {
    color: #333;
.stx-float-price-inner {
    position: absolute;
    top: 10px;
    padding-left: 13px;

Please Note The DrawingToolbar has changed. To maintain compatibility please copy the <div class="stx-toolbar" id="stx-toolbar">...</div> section from the new stx-demo.html or stx-advanced.html to your existing system.

STXChart now accepts a config object. The config object can contain any member variable or subvariable for the STXChart object. For instance to set up a mountain chart:

var stxx=new STXChart({chartType:"mountain", container:$$("chartContainer")});

Aesthetic improvements:

+ Capitalized months by default on x-axis
+ Optional borders on chart enabled with stxx.axisBorders
+ More pleasing volume study and volume underlay
+ User customizable colors for volume and volume underlay
+ Crisper drawings
+ Options for y-axis label pointers. Default is now pointy arrow. See yaxisLabelStyle in stx.js
+ initialMarginTop and initialMarginBottom now default to 10 pixels to create buffer space at bottom and top of chart
+ More intuitive y-axis numbering
+ Support for billions and trillions in STX.condenseInt() for studies such as on balance volume
+ yTolerance stiffened so that horizontal panning is more natural for users. yTolerance exposed for developer override stxx.yTolerance
+ stxx.extendLastTick extends line and mountain charts to left and right edge of candleWidth for continuous look.

New baseline_delta chart type displays green above first (opening) tick and red below first tick.

New colored_line chart type alternates green/red on up down days

Range bar charts now available by setting stxx.layout.aggregationType="rangebars". A default range will be selected or programatically set stxx.layout.range to your desired range. Note that this is only available programatically.

Candle shadows (wicks) can now have different up/down colors. Custom colors on mountain charts can now support user controlled gradient.

Custom chart callbacks can now be used to program chart types where the color is determined programatically. See STXChart.Chart.prototype comments in stx.js.

Drawings may now be repositioned by end users.

Annotations now support user defined font/size/color.

Fibonacci now supports printing prices rather than levels (programatically by setting STXChart.currentVectorParameters.fibonacci.printValues=true)

Non-Time-Based x-axis for supporting tick, range bars and other chart types that have non-linear dates on the x-axis. Set xAxis.axisType="ntb" or stxx.layout.interval="tick".

xAxis variables exposed for developer override. See STXChart.XAxis. xAxis.formatter callback can be used to completely control x-axis formatting.

Stochastics now defaults to displaying overbought/oversold zones (similar to RSI).

New "0 to max" study type now supported. Studies such as OBV and TVI now extend the full height of their axis to show their range over the course of the chart.

STX.DropDownManager for creating drop downs. This class uses document level events rather than an overlay to detect "tap to close".

stxx.streamParameters can now throttle inbound ticks to streamTrade().

stxx.cleanupGaps when set to true the chart will automatically identify gaps in a linear chart sequence and populate those gaps with last close dashes

Async callbacks now allow developers to know when a chart has rendered when it depends on asynchronous date (for instance a study that makes a call out to a server for data). See STXChart#startAsyncAction, STXChart#completeAsyncAction, STXChart#registerChartDrawnCallback

STXChart#postAdjustScroll and STXChart#preAdjustScroll can be used to maintain a chart scroll position between resize events,such as if you need to adjust the size of the chart container.

DrawingToolbars can now be set up for multiple charts on one screen.

Iscroll5 is now available in stxThirdParty.js. We will be migrating from Iscroll4 to Iscroll5. Iscroll5 has much better support, particularly support for active scrollbars.

Dropped support for legacy class names such as STXStudies (now STX.Studies). It is no longer necessary to set stx_namespaced=true.

Version 08-2014

Please note as of this version many of the CSS styles have been changed. In general we have added stx- in front of styles. So what previously was "btn" would now be "stx-btn". This was done to avoid conflicts with toolkits such as Bootstrap and Angular.js which are now using many of the same names.

If you're using a prior version and have either customized the HTML or CSS there will be some effort to convert forward. You can compare the new stx-demo.html or stx-advanced.html files with the previous ones to see the CSS changes. If you have not heavily modified the code then you should be able to use a merge tool to quickly make the transition.

At the bottom of stx-demo.html and stx-advanced.html we have included a function called stxClassReplacer() to assist in the transition. This function will automatically convert any old CSS names to the new CSS names in real-time. The way to use this is:

1) replace the old stx-demo.css file with the two new files (stx-chart.css and stx-demo.css) 2) Copy the stxClassReplacer() function to your current code 3) Uncomment the conversion map

Now your old code should work with the new CSS. We recommend running this way as a temporary solution. Now:

1) Comment each line in the conversion map 2) Manually convert the class name in your HTML. For instance, change all instances of class="btn" to class="stx-btn" 3) Make sure nothing is broken 4) Repeat

After finishing this process your code should now be converted to the new CSS.

  • New file stx-chart.css contains the basic CSS required for a chart, but none of the CSS required for widgetry such as is found in stx-demo.html.
  • Removed stx-demo-theme-1.css and stx-demo-theme-2.css. These files are no longer necessary for theming. Instead, the class "Light" or "Dark" is automatically added to the BODY tag when a theme is enabled, causing CSS to be overridden by the higher specificity. The themes are thus included directly in stx-demo.css. You can of course override these themes if desired.
  • stx-print.css is now included. This formats the chart properly for printing.
  • A new phone interface is available in the Advanced package. This includes the new files stx-phone.css, stx-phone.html, stx-sprite-phone.png and stx-sprite-phone@2x.png.
  • STX_SAMPLE_30MIN.js and STX_SAMPLE_5MIN.js are no longer included. Demonstration intraday data is now generated randomly by STX.QuoteFeed.Demo
  • New Trade From Chart package
  • Ichimoku Cloud study now available in Advanced package
  • New STX.QuoteFeed class now makes it much easier to integrate a custom quote feed using an event driven callback model.
  • Most classes now using STX namespace. STXDialog becomes STX.Dialog. The old classes are still available for backward compatibility.
  • The library is now compatible with Require.js.
  • All global functions have now been moved into the STX namespace. The global functions are still available for backward compatibility.
  • STX#loadScript can now dynamically load JavaScript content.
  • "Right click to delete" message now appears when hovering on drawings or overlay studies.
  • Y-axis labels are now added for user drawn horizontal lines
  • Measure tool now available in Advanced package
  • Zoom by grabbing y-axis or x-axis with mouse
  • Charts now automatically detect container size changes through 1 second polling mechanism. Turn off by setting stxx.resizeDetectMS=0
  • Charts now default to displaying gaps when Close=null for a data point
  • STXChart#setStyle function now available to programatically change chart styles
  • STXChart#removeDrawing function to programatically remove user drawings
  • STXChart#drawXAxis now separates out functionality from STXChart#createXAxis so that either can be ammended through the Injection API
  • Smarter x-axis layout code to avoid unnecessary gaps and handle overlapping labels
  • yAxis.minimumPriceTick can be set to specify that the y-axis vertical grid be drawn with specific ranges. eg stxx.chart.panel.yAxis.minimumPriceTick=.25
  • Automatic selection of text color for y-axis labels
  • Vertical zoom is now pixel based rather than price based making for much smoother zooming
  • stxx.initialMarginTop and stxx.initialMarginBottom can now be used to add space to top or bottom of chart
  • Candle rendering is crisper and wicks are now always centered
  • series can now be added using the STXChart#addSeries method
  • STXChart#watermark now supports vertical and horizontal centering
  • Data can now be initialized either as a string for Date or as a JavaScript Date object (DT). See STXChart#newChart, STXChart#setMasterData

Version 05-2014

Please note that as of this version the charts will no longer function when double clicked from the filesystem (file:///). Instead, you can develop the charts using localhost or

  • Added loadWidget method to dynamically load html/css/js functionality
  • Added safeClickTouch, safeMouseOver, safeMouseOut, safeDrag functionality for supporting complex UI with mouse and touch devices
  • dragToDraw capability now supports optional draggable drawing tools
  • Mountain chart color can now be user selected
  • STXChart.yaxisLeft can now be used in conjuction with yaxisWidth to control positioning of the y-axis (for instance the y-axis can now be on top of the chart)
  • Timezone calculation performance improved with caching
  • Clearing drawings can now be undone with undo()
  • Improvements to x-axis time/date scaling
  • Performance improvements when scrolling and zooming chart
  • “chart-title” class can be used to style the symbol label on a chart
  • Smoother zooming. Better Apple Magic Mouse support.
  • z-indexes of chart controls raised by one
  • Fixed faulty GMT timezone choice

Standard Package

  • Added vertical line drawing tool
  • Added full screen capability

Advanced Package

  • Added freeform and continuous drawing tools
  • Added optional side panels to stx-advanced.html

Version 02-2014

Please note that as of this version the charts will no longer function when double clicked from the filesystem (file:///). Instead, you can develop the charts using localhost or

  • Chart "componentry" is now dynamically created. No need to include these html elements in your chart container unless you wish to override them.
  • Added support for "series" overlays
  • Added last sale streaming capability
  • Drawings can now be made in panels
  • Mousewheel zoom
  • "Mountain" chart type
  • Y-Axis labels are now native canvas and not DOM. Optionally display labels for all indicators and overlays.
  • Native importLayout() and exportLayout()
  • Consolidation of file structure.
  • Create a new chart using newChart() function which consolidates setMasterData(), initializeChart(), createDataSet() and draw().
  • Injection API now support multiple append and prepend functions.
  • Increased developer control over the y-axis on charts and studies
  • Built in modalBegin() and modalEnd() functions
  • floatDate now a built in capability
  • currentPanel now always equals the current panel that the cusor is within
  • priceFromPixel() now takes an optional second "panel" parameter and can be used on indicator panels
  • Further performance enhancements
  • Less sensitive vertical scrolling (horizontal pans are now more even)
  • Better pinching (pinches now occur where the user places her fingers and more consistent with the motion of the pinch)
  • Automatic resizing of chart canvas even when container is resized dynamically
  • Developer control over Fibonacci tool layout
  • Added createDrawing() convenience function
  • Undo functionality now built in using undoLast() function
  • deleteAllPanels() function now available

Version 11-2013

  • Performance tuning. A significant effort has been put into performance tuning the application so that it can provide quicker rendering and user interface.
  • Support for HTML5 Canvas animation by setting ‘STXChart.useAnimation=true’. Animation is automatically enabled for Android devices.
  • Drawing tool overhaul. A new drawing tool architecture has been released. Building custom drawing tools is much easier. Rectangles and ellipses are now supported natively. Line width and pattern can now be selected. Annotations no longer include a "stem".
  • Right hand side whitespace is now automatically maintained when a user selects a chart. This provides an improved experience for end users.
  • A new translation API and toolkit now included in stxI18N.js. See the documentation on Internationalization -- How to guide.
  • Logarithmic charting display has been improved. Users can now pan and resize logarithmic charts without affecting the aspect ratio.
  • Improved pinching and zooming. The chart is now intelligent about its placement when zooming, especially when pinching on touch devices.
  • Scatterplot chart now supported for datasets with more than one value per x-axis location.
  • STXChart#getStartDateOffset, STXChart#setStartDate, STXChart#leftTick methods provide convenient programmatic access to chart navigation.
  • Vertical line tool.
  • tickFN functionality now deprecated. seriesFN should be used for all custom indicators in order to boost performance.

Version 9-2013

  • Added stx-quickstart.html file.
  • Added stx-demo.html sample file – supports changing chart colors, enabling themes, smart menus, smart dialogs, symbol lookup widget, Scrolling manager, Timezone selector, Storage manager, drawing toolbar, head's up display
  • Added stx-demo.css, stx-demo-theme-1.css, stx-demo-theme2.css files.
  • Added stxUI.js library file.
  • Renamed sample.html to stx-sample.html and included more coding examples.
  • Consolidated images into stx-chart-icons.png and stx-ui-icons.png sprite files.
  • $$$() convenience function for using css selectors
  • clearCanvas() renamed STX#clearCanvas. Now supports clearing of canvas on old (defective) Android devices. Enable this functionality by setting global STXChart.useOldAndroidClear to true.
  • Default color palette for drawing modified to more useful, web friendly colors
  • STX#newChild convenience function for creating new HTML elements
  • stxStudies – library now supports "auto" colors which will automatically be white or black depending on the brightness of the chart background
  • STX.Studies#quickAddStudy – convenience function for programmatically adding new studies.
  • RSI now defaults to display of overbought and oversold lines. Override the STX.Studies#studyLibrary "parameters" to eliminate or change the defaults.
  • Studies may now be programmatically created with the "permanent" flag which will prevent users from deleting them.
  • Optional "yaxis" library parameter can override drawing the y-axis for a study.
  • Default study y-axis spacing reduced to provide more y-axis points.
  • Line drawings that go off screen no longer display horizontally at top or bottom of the chart.
  • Dashed and dotted line drawings now supported.
  • Timezone support.
  • STXChart.Chart.beginHour, STXChart.Chart.eginMinute, etc now automatically default to 24 hour trading unless overridden.
  • STXChart.Chart.minutesInSession now automatically calculated.
  • STXChart.registeredCharts eliminated in favor of STXChart.registeredContainers which contains references to the HTML containing elements.
  • showMeasure html element eliminated (consolidated with mSticky)
  • x-axis drawing and layout improved to eliminate gaps and overlaps
  • STXChart#formatPrice now available to format price in locale format
  • STXChart.constructVector now takes a "parameters" parameter which describes the width and pattern of the line, segment, etc.
  • Candle borders now supported.
  • “hollow" candle chart type now supported.
  • Panel close icon moved to top of panel, and changed from trashcan to "X"

Version 7-2013

This version adds support for the following:

  • Internationalization – See tutorial Internationalization -- How to guide and new files stxI18N.js as well as the Intl.js library for more details.
  • Multiple Charts – Multiple charts may now be displayed on the screen without the use of iframes. See the new stx-multi.html sample file.
  • Internet Explorer 8 Support – Using the excanvas.js shim library. Note that in order to support IE8 charts must not be created until the document body has been fully loaded. sample.html therefore no longer calls 'loadChart' inline but instead calls it via body onload.
  • Improved layout of x-axis eliminates gapped spacing and overlapping labels.
  • STXChart objects may now be set to manage their own mouse and touch events by setting stx.chart.manageTouchAndMouse= 'true'. When this is done the document level mouse and touch events can be eliminated from the main html page.
  • Some minor changes were made to sample_style.css to better support the menu layouts in sample.html. measureLit and measureUnlit classes were deprecated.
  • STX.Studies#go now accepts an STXChart object as a second parameter. This is necessary to support translation.
  • {link stx.displayInitialized} variable is now set when a chart is rendered. The old method of checking stx.chart.crossX!=null is no longer valid.
  • A streaming chart simulator was added to sample.html in order to better demonstrate the usage of STXChart#appendMasterData.
  • STXChart may now be constructed with a container DIV reference. That container may be accessed at STXChart.chart.container.
  • References to HTML navigational componentry are not included in STXChart.chart. These include mSticky, showMeasure, annotationSave, annotationCancel and chartControls.
  • STX.MenuManager.registeredCharts now contains an array of all STXChart objects on the page.
  • Right clicking through context menu can now be overridden by replacing document.oncontextmenu. See stxChart

Version 5-2013

Important! stxModulus.js has been added as a new file. Please be sure to include this in your application before stxKernelOs.js with the charset="ISO-8859-1" attribute.

Important! The stx.computeLength() object has been modified. It no longer takes a height but instead takes two prices, high and low. This was necessary to support logarithmic charts which cannot by their nature support linear length calculations. If you've used this function in your code then please modify those cases to the new signature.

Important! STXMarket.nextPeriod() and STXMarket.prevPeriod() both now require an interval. This was necessary for supporting intraday charts with n-period intervals. If you've used these functions independently then please modify your code to use the new signature.

Important! Div objects that previously were placed outside of the chart containing object must now be positioned within the chart containing object. In sample.html this is the section under the "CHART TEMPLATES" comment. This decision was driven by the increasing complexity of positioning the objects on charts that are being used in many different ways. By placing these objects within the chart container the library has fewer calculations to make and the likelihood of bugs is decreased.

  • The layout of mSticky and showMeasure have changed slightly.
  • Also in this version div tags have been added for the crosshairs. In previous versions the crosshairs were created dynamically by the library but this now gives web developers more control over these tags. (note that the z-index for crosshairs has also been reduced from 3 to 2).
  • A currentHR tag has been added that displays the current price on the Y-axis in green or red depending on whether the security is currently up or down.
  • A button has been added to toggle crosshairs on or off.
  • Semi-Logarithmic scale is now supported. Set stxx.layout.semiLog=true to turn on semi-log scaling.
  • A new periodicity function stxx.setPeriodicityV2(period, interval) allows more flexible periodicity for intraday charts. See the new section in this documentation on periodicity. (Note that setPeriodicity() remains functionally deprecated).
  • The functions for floatDate and floatHR in sample.html have been modified to reflect the changes in the contained objects. If you've copied these functions into your own code be sure to modify it to reflect these changes. -The mouse and touch events section in sample.html main() function have been modified to provide better support for Windows8 touch events. The library is now compatible with "all in one" computers that use both touch and a mouse. For complete touch support please migrate to this new functionality.
  • A new library stxSocial.js is available. This library supports chart image creation and sharing. Please contact us if you'd like to license this package.
  • stx.appendMasterData() can now be used to implement auto-updating or streaming charts. See the new section in the above documentation.
  • STXStudies.removeStudy() can now be used to programmatically remove a study.
  • Several new convenience functions have been added to stxUtilities.js.

Version 3-2013

  • This version remains unchanged but sample.html now includes an example of an intraday chart.

Version 2-2013

  • Charting performance is greatly improved in this version thanks to smarter rendering algorithms to the HTML5 Canvas. Zooming and panning have also been improved for a better overall user experience.
  • This version includes support for Windows 8 touch events which makes it compatible with Windows Surface. We've also improved our support for Android devices (please note that there is a bug in the current Android browser that causes it to crash under heavy load such as can be experienced on tablets. We recommend that users use Android Chrome which does not crash and has much better performance).
  • This version uses a different image nomenclature for the icons. In this package you should find several icons that begin with "stx". The icons are the same as the previous versions but this new naming system is less likely to conflict with other naming conventions.

New features include:

  • A label "currentHR" which shows the current price on the y-axis in red or green.
  • Colored bar charts (red if the stock is down, green if it is up)
  • Crosshair offset can be set programmatically and the default has changed on touch devices to be a little easier for users to see
  • Magnet mode allows drawing tools to snap to points on the chart
  • STXChart.chart.symbolDisplay allows programatic change of the display label on the charting panel
  • Sharp display on iPad retina displays

New tools

  • STX.Plotter – High performance drawing on the canvas
  • dashedLineTo - Dashed line drawing support
  • STX.textLabel – Convenience tool for drawing a text label on the canvas