HTML5 & JS Step Line Charts

Step Line Charts are much like line charts except they uses vertical and horizontal lines to connect the dataPoints. The Step like structure so formed highlights the increase or decrease in values over time.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Important Properties

Applies To Attribute Type Default Options/Examples
dataSeries lineThickness String 2 4,6..
dataSeries/ dataPoint markerSize Number auto 5,10..
dataSeries/ dataPoint markerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint markerColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerBorderColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerBorderThickness Number 0 4,7..

Basic Step Line Chart

Try Editing The Code

Step Line Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

7 Comments

  2. Shubham Kalra says:

    Ronald,
    StepLine chart was introduced in the 1.1 beta version of CanvasJS. I think you have probably downloaded 1.0 GA.
    Please download 1.1 beta from the download page.

  3. Ronald Palencia says:

    it work!…thank you…i generate data from oracle and all work fine! tanks again!!!

    • Sanjoy says:

      Oliver,

      Can you kindly brief what you mean by backstep. Any link or pictorial representation will help us to know the kind of chart you are looking for.

    • Vishwas R says:

      Harish,

      As of now this feature is not available, but you can try rotating the chart-div and customize. Check this example.

If you have any questions, please feel free to ask in our forums. Ask Question