• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download/NPM
    • Download CanvasJS
    • Install via NPM
  • Integrations
    Front End Technology Samples
    • React Charts
    • Angular Charts
    • Vue.js Charts New!
    • jQuery Charts
    • Dashboards
    Server Side Technology Samples
    • PHP Charts
    • Python Charts New!
    • ASP.NET MVC Charts
    • Spring MVC Charts
    • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
My Account
  • KEY FEATURES
    • StockChart with Numeric Axis
    • StockChart with Date-Time Axis
    • StockChart with Annotation / Indexlabel
    • StockChart with Print & Export as Image
    • Multi-Series StockChart with Navigator
    • StockChart with Async Data Loading
    • StockChart with Price & Volume
    • StockChart with Tooltip & Crosshair Syncing
    • StockChart with Combination Charts
    • Dynamic / Live StockChart
    • Dynamic / Live StockChart with StripLine
    • Stock Chart with DatePicker
  • CHART TYPES
    • StockChart with Line using JSON Data
    • StockChart with Spline Chart
    • StockChart with Area Chart
    • StockChart with Spline Area & Navigator
    • StockChart with Candlestick & Range Selector
    • StockChart with OHLC using JSON Data
    • StockChart with Range Spline Area
  • TECHNICAL INDICATORS
    • StockChart with SMA
    • StockChart with EMA
    • StockChart with MACD
    • StockChart with Technical Indicators

JavaScript Dynamic / Live StockChart with Stripline

Download JavaScript StockChart Samples
  • JavaScript StockChart Samples
  • JavaScript Chart Samples
  • React Chart Samples
  • Angular Chart Samples
  • Vue.js Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • Python Django Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples

Live / Realtime updates of data and striplines are supported out of the box. Striplines / Trendlines can be used in both x and y-axes. In the below example, you can observe the stripline being updated dynamically.

Try Editing The Code

Download Copy JSFiddle
window.onload = function () {
  var dataPoints = [], currentDate = new Date(), rangeChangedTriggered = false;
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    title:{
      text:"Dynamic StockChart with Stripline"
    },
    rangeChanged: function(e) {
        rangeChangedTriggered = true;
    },
    charts: [{
      axisX: {
         crosshair: {
          enabled: true,
          valueFormatString: "MMM DD, YYYY HH:mm:ss"
        }
      },
      axisY: {
        title: "Pageviews Per Second",
        stripLines: [{
          showOnTop: true,
          lineDashType: "dash",
          color: "#ff4949",
          labelFontColor: "#ff4949",
          labelFontSize: 14
        }]
      },
      toolTip: {
        shared: true
      },
      data: [{
        type: "line",
        name: "Pageviews",
        xValueFormatString: "MMM DD, YYYY HH:mm:ss",
        xValueType: "dateTime",
        dataPoints : dataPoints
      }]
    }],
    navigator: {
      slider: {
        minimum: new Date(currentDate.getTime() - (90 * 1000))
      }
    },
    rangeSelector: {
      enabled: false
    }
  });
  var dataCount = 700, ystart = 50, interval = 1000, xstart = (currentDate.getTime() - (700 * 1000));
  updateChart(xstart, ystart, dataCount, interval);
  function updateChart(xstart, ystart, length, interval) {
    var xVal = xstart, yVal = ystart;
    for(var i = 0; i < length; i++) {
      yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
      yVal = Math.min(Math.max(yVal, 5), 90);
      dataPoints.push({x: xVal,y: yVal});
      xVal += interval;
    }
    if(!rangeChangedTriggered) {
        stockChart.options.navigator.slider.minimum = new Date(xVal - (90 * 1000));
    }
    stockChart.options.charts[0].axisY.stripLines[0].value =  dataPoints[dataPoints.length - 1].y;
    stockChart.options.charts[0].axisY.stripLines[0].label = stockChart.options.charts[0].axisY.stripLines[0]["value"];
    xstart = xVal;
    dataCount = 1;
    ystart = yVal;
    stockChart.render();
    setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000);
  }
}                            

Related Customizations in StockChart

  • Updating StockChart Options
  • render()
  • striplines.labelFontColor
  • striplines.lineDashType
  • Quick Links

    • Chart Docs
    • StockChart Docs
    • About Us
    • FAQs

    Server Side Technologies

    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

    Front Side Technologies

    • JavaScript Charts
    • jQuery Charts
    • React Charts
    • Angular Charts
    • JavaScript StockCharts

    Contact

    • Fenopix, Inc.
    • 2093 Philadelphia Pike,
    • #5678, Claymont,
    • Delaware 19703
    • United States Of America

    ©2025 Fenopix Privacy Policy Cookies Policy Careers