Splitting Data Across DataSeries

CanvasJS Basic StockChart | CanvasJS JavaScript StockChart

HTML

<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var stockChart = new CanvasJS.StockChart("stockChartContainer", {
  theme: "light2",
  charts: [{
    title: {
      text: "Splitting Data across 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
    }]
  }]
});

stockChart.render();