How to render non-continuous time intervals separately in CanvasJS StockCharts?

[RedCNCSAS]

How to render non-continuous time intervals separately in CanvasJS StockCharts?
I’m using CanvasJS StockCharts and I have a dataset that covers an entire year (e.g., from January 1st to December 31st).
I want to plot data from multiple specific time periods, such as:
• January 1st to March 30th
• May 1st to July 20th
• September 1st to December 31st

Here are the specific requirements I want to achieve:
• I want the x-axis to remain continuous — it’s okay if there are gaps where there is no data (i.e., April, August, etc.).
• I want each time interval to be shown as a separate, visually distinct series (e.g., different colors, line styles, or markers).
• The time intervals may overlap — meaning one data series might overlap with another on the x-axis.
• Ideally, I would like the chart to clearly distinguish between the different intervals visually, even if they are close together or overlap.

Is it possible to do this using multiple dataSeries in CanvasJS?
Would splitting the data manually into multiple series be the right approach, or is there a more recommended way to handle this kind of non-uniform, overlapping time periods?

[Manoj Mohan]

@redcncsas,

Yes, you can achieve this in CanvasJS by splitting your data into multiple series, each representing a specific time period. Each series can have its own unique styling, such as different colors, line dash-type or markers. Since the x-axis is time-based, CanvasJS will automatically create gaps for the periods without data (like April or August) and the series will overlap if needed. Please have a look at the below code snippet for splitting the data across multiple dataseries.

data: [{
  type: "line",
  dataPoints: [
    { x: new Date(2023, 0, 1), y: 120 },
    { x: new Date(2023, 2, 30), y: 135 }
  ],
  color: "#FF0000"  // Red for Jan-Mar
}, {
  type: "line",
  dataPoints: [
    { x: new Date(2023, 4, 1), y: 170 },
    { x: new Date(2023, 6, 20), y: 180 }
  ],
  color: "#0000FF",  // Blue for May-Jul
  lineDashType: "dash"   // Dashed line style
}]

Also, check out this JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[RedCNCSAS]

I checked the example and seems it works, but I have some questions.

Do we allow the user to select the time ranges for which to plot those graphs dynamically? And also for each of those groups do we calculate the regression line separately?

[Manoj Mohan]

@redcncsas,

You can define interval groups and their associated styles (like color or lineDashType) in an object. Then, iterate through the dataPoints and assign each dataPoint to the appropriate dataSeries as per associated interval groups. Please take a look at this StackBlitz project for complete working code.

And also for each of those groups do we calculate the regression line separately?

You can use line chart to draw regression line. Please refer to this article for more information on performing regression analysis with CanvasJS.

—-
Manoj Mohan
Team CanvasJS