skip to Main Content

Data:

const data={
  "labels": [
    0,  
    400,
      800,
      1200,
      1600,
      2000,
      2400,
      2800,
      3200,
      3600,
      4000
  ],
  "datasets": [
    {
      "axis": 'x',
      "label": "FFF",
      "borderColor": "Red",
      "backgroundColor": "Red",
      "data": [
          {
              "x": 2883,
              "y": 129
          },
          {
              "x": 3509,
              "y": 118
          },
          {
              "x": 3916,
              "y": 73
          }
      ]
  }
  ]
};

Chart:
enter image description here

I am providing both x & y axis values, the result should be like this for red line.
But for current config it rendering the line from start instead of specific point on x-axis.
enter image description here

2

Answers


  1. You have to use scatter chart and showline : true option instead of line chart for this result.

    //your code
    
    const data={
      "labels": [
        0,  
        400,
          800,
          1200,
          1600,
          2000,
          2400,
          2800,
          3200,
          3600,
          4000
      ],
      "datasets": [
        {
          "axis": 'x',
          "label": "FFF",
          "borderColor": "Red",
          "backgroundColor": "Red",
          "showLine": true,         //add this option to connect dots of scatterred points
          "data": [
              {
                  "x": 2883,
                  "y": 129
              },
              {
                  "x": 3509,
                  "y": 118
              },
              {
                  "x": 3916,
                  "y": 73
              }
          ]
      }
      ]
    };
    
    <Scatter data={data} />
    
    Login or Signup to reply.
  2. This is because you are using a line chart with default config.

    By default a line chart uses a category scale and expects strings. In the dataset you specify an x, this x is the internal data format which for the catagory scale is not the value but the index.

    The easyest approach would be to use a linear scale by setting options.scales.x.type to 'linear'

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search