Home Forums Chart Support Displaying multiline chart with label with some data points have no data

Displaying multiline chart with label with some data points have no data

Viewing 2 posts - 1 through 2 (of 2 total)
  • #34011

    I have multi line chart with labels on X axis.
    I have data in which some data points are missing.
    so when I plot data, its displaying at different position then it should be.

    here i have code in which some labels on data-points are missing.

    var chart = new CanvasJS.Chart("chartContainer",
        {
        title:{
        text: "Multi-Series Line Chart"  
        },
        data: [
        {        
          type: "line",
         dataPoints: [
          { y: 30, label: "label1" },
          { y: 40, label: "label3" },
          { y: 50, label: "label4" },
          { y: 60, label: "label5" },
          { y: 90, label: "label7" },
          { y: 20, label: "label8" },
          { y: 50, label: "label9"}
        
          ]
        },
          
          {        
          type: "line",
          dataPoints: [
          { y: 10, label: "label1" },
          { y: 20, label: "label2"},
          { y: 30, label: "label3" },
          { y: 40, label: "label4" },
          { y: 50, label: "label5" },
          { y: 60, label: "label6" },
          { y: 70, label: "label7" },
          { y: 80, label: "label8" },
          { y: 90, label: "label9"}
        
          ]
        }
        ]
      });
    • This topic was modified 7 months, 3 weeks ago by AbhiHD. Reason: spelling error
    • This topic was modified 3 months, 2 weeks ago by Vishwas R.
    #34028

    @abhihd,

    Chart doesn’t automatically group dataPoints by its label. When only label is given (without x-value), internally it assigns x values to dataPoints in an order. So, there can be different dataPoints with same x value but different label. You can pass x-value along with label to group them accordingly. Please find the updated datapoints below.

    data: [
        {        
          type: "line",
          dataPoints: [
            { x: 1, y: 30, label: "label1" },
            { x: 3, y: 40, label: "label3" },
            { x: 4, y: 50, label: "label4" },
            { x: 5, y: 60, label: "label5" },
            { x: 7, y: 90, label: "label7" },
            { x: 8, y: 20, label: "label8" },
            { x: 9, y: 50, label: "label9"}
    
          ]
        }, {        
          type: "line",
          dataPoints: [
            { x: 1, y: 10, label: "label1" },
            { x: 2, y: 20, label: "label2"},
            { x: 3, y: 30, label: "label3" },
            { x: 4, y: 40, label: "label4" },
            { x: 5, y: 50, label: "label5" },
            { x: 6, y: 60, label: "label6" },
            { x: 7, y: 70, label: "label7" },
            { x: 8, y: 80, label: "label8" },
            { x: 9, y: 90, label: "label9"}
    
          ]
        }
      ]

    Multiseries Chart with Label Grouping

    Please take a look at this JSFiddle for complete code.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.