javascriptchartscanvasjs

Multiple data series with common labels

using CanvasJS I have two type of data for same dates. The second chart is starting from the left and is not showing in the same X positions as the first chart dates however the dates are the same. How should I show the red chart in the correct X positions?

var chart = new CanvasJS.Chart("chartContainer", {
        theme:"light2",
        zoomEnabled: true,
        animationEnabled: true,
        title:{text: "Production"},
        axisY:{title: "amount"},
        axisX:{labelFontSize: 10},
        toolTip: {shared: "true"},
        legend:{cursor:"pointer",   itemclick : toggleDataSeries},
        data: [{
                
                type: "spline", //area
                showInLegend: true,
                axisYIndex: 0,
                name: "P1",
                dataPoints: [
                        
                    { label: "2019/07/01", y: 10 },
                    { label: "2019/07/02", y: 12 },
                    { label: "2019/07/03", y: 18 },
                    { label: "2019/07/04", y: 5 },
                    { label: "2019/07/05", y: 9 },
                    { label: "2019/07/06", y: 12 },
                    { label: "2019/07/07", y: 10 },
                    { label: "2019/07/08", y: 10 },
                    { label: "2019/07/09", y: 12 },
                    { label: "2019/07/10", y: 7 },
                    { label: "2019/07/11", y: 2 },
                    { label: "2019/07/12", y: 3 },
                    { label: "2019/07/13", y: 4 },
                    { label: "2019/07/14", y: 5 },
                    { label: "2019/07/15", y: 6 },
                    { label: "2019/07/16", y: 0 },
                    { label: "2019/07/17", y: 0 },
                    { label: "2019/07/18", y: 0 },
                    { label: "2019/07/19", y: 0 },
                    { label: "2019/07/20", y: 0 },
                    { label: "2019/07/21", y: 0 },
                    { label: "2019/07/22", y: 0 },
                    { label: "2019/07/23", y: 0 },
                    { label: "2019/07/24", y: 0 },
                    { label: "2019/07/25", y: 0 },
                    { label: "2019/07/26", y: 0 },
                    { label: "2019/07/27", y: 0 },
                    { label: "2019/07/28", y: 11 },
                    { label: "2019/07/29", y: 18 },
                    { label: "2019/07/30", y: 21 },
                    { label: "2019/07/31", y: 20 },
                ]
            },


    {
    color: "red",
    type: "spline",
    showInLegend: true,
    name: "Events",
    dataPoints: [
        
        { label: "2019/07/05", y: 29 },
        { label: "2019/07/10", y: 29 },
        { label: "2019/07/13", y: 29 },
        { label: "2019/07/18", y: 29 },
        { label: "2019/07/20", y: 29 },
        { label: "2019/07/23", y: 29 }
        ]
    },


        ]
    });
    
    
    
    
    chart.render();
    
    function toggleDataSeries(e) {
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
            e.dataSeries.visible = false;
        } else {
            e.dataSeries.visible = true;
        }
        chart.render();
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>

<div id="chartContainer" style="height:300px; width: 100%;"></div>

Solution

  • CanvasJS plots data based on the x-value. Passing x-value instead of label works in this case. Below is the updated code.

    var chart = new CanvasJS.Chart("chartContainer", {
  theme:"light2",
  zoomEnabled: true,
  animationEnabled: true,
  title:{text: "Production"},
  axisY:{title: "amount"},
  axisX: {
    labelFontSize: 10,
    valueFormatString: "YYYY/MM/DD"
  },
  toolTip: {shared: "true"},
  legend:{cursor:"pointer",   itemclick : toggleDataSeries},
  
  data: [{
    type: "spline", //area
    showInLegend: true,
    axisYIndex: 0,
    name: "P1",
    dataPoints: [
      { x: new Date(2019, 06, 01), y: 10 },
      { x: new Date(2019, 06, 02), y: 12 },
      { x: new Date(2019, 06, 03), y: 18 },
      { x: new Date(2019, 06, 04), y: 5 },
      { x: new Date(2019, 06, 05), y: 9 },
      { x: new Date(2019, 06, 06), y: 12 },
      { x: new Date(2019, 06, 07), y: 10 },
      { x: new Date(2019, 06, 08), y: 10 },
      { x: new Date(2019, 06, 09), y: 12 },
      { x: new Date(2019, 06, 10), y: 7 },
      { x: new Date(2019, 06, 11), y: 2 },
      { x: new Date(2019, 06, 12), y: 3 },
      { x: new Date(2019, 06, 13), y: 4 },
      { x: new Date(2019, 06, 14), y: 5 },
      { x: new Date(2019, 06, 15), y: 6 },
      { x: new Date(2019, 06, 16), y: 0 },
      { x: new Date(2019, 06, 17), y: 0 },
      { x: new Date(2019, 06, 18), y: 0 },
      { x: new Date(2019, 06, 19), y: 0 },
      { x: new Date(2019, 06, 20), y: 0 },
      { x: new Date(2019, 06, 21), y: 0 },
      { x: new Date(2019, 06, 22), y: 0 },
      { x: new Date(2019, 06, 23), y: 0 },
      { x: new Date(2019, 06, 24), y: 0 },
      { x: new Date(2019, 06, 25), y: 0 },
      { x: new Date(2019, 06, 26), y: 0 },
      { x: new Date(2019, 06, 27), y: 0 },
      { x: new Date(2019, 06, 28), y: 11 },
      { x: new Date(2019, 06, 29), y: 18 },
      { x: new Date(2019, 06, 30), y: 21 },
      { x: new Date(2019, 06, 31), y: 20 },
    ]
  }, {
    color: "red",
    type: "spline",
    showInLegend: true,
    name: "Events",
    dataPoints: [
      { x: new Date(2019, 06, 05), y: 29 },
      { x: new Date(2019, 06, 10), y: 29 },
      { x: new Date(2019, 06, 13), y: 29 },
      { x: new Date(2019, 06, 18), y: 29 },
      { x: new Date(2019, 06, 20), y: 29 },
      { x: new Date(2019, 06, 23), y: 29 }
    ]
  }]
});

chart.render();


function toggleDataSeries(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
    e.dataSeries.visible = false;
  } else {
    e.dataSeries.visible = true;
  }
  chart.render();
}
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>