Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scatter + Line chart on the same plot #6409

Closed
2 of 3 tasks
nazariyv opened this issue Jul 25, 2019 · 2 comments
Closed
2 of 3 tasks

Scatter + Line chart on the same plot #6409

nazariyv opened this issue Jul 25, 2019 · 2 comments

Comments

@nazariyv
Copy link

nazariyv commented Jul 25, 2019

Documentation Is:

  • Missing or needed
  • Confusing
  • Not Sure?

Please Explain in Detail...

I do not understand how to put scatter + line chart on the same plot (mixed chart). I have read about a potential solution on your forum, that suggests using both line charts but switching off the line for the second. This will not work if you intent the scatter points to take the intermediate values in the x-axes. What do I mean by that? Suppose your line chart has x data points at x=2 and x=3. Now if you specify your scatter plot's x at 2.5, the point gets moved to x=2 on the chart. Javascript code example is below.

Your Proposal for Changes

No clue how this lib works.

Example

  var ctx = document.getElementById('curve').getContext('2d');
  var grd = ctx.createLinearGradient(0, 600, 0, 0)
  grd.addColorStop(0, "rgba(36, 11, 54, 0)")
  grd.addColorStop(1, "rgba(195, 20, 50, 0")

  let x = [0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 4.0, 5.0, 6.0, 10.0];
  let y = [0.2, 0.3, 0.2, 0.5, 0.6, 0.6, 0.8, 0.5, 1.0, 1.5];

  let options = {
    layout: {
      padding: {
        left: 50,
        right: 50
      }
    },
    animation: {
      easing: 'easeInQuad'
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        }
      }],
    }
  }

  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: x,
      datasets: [{
          label: 'Curve',
          backgroundColor: grd,
          borderColor: 'rgba(0, 0, 0, 0.6)',
          data: y,
        },
        {
          label: 'Scatter Dataset',
          backgroundColor: 'black',
          data: [{
            x: 1.49,
            y: 0.1
          }, {
            x: 5.0,
            y: 3.0
          }, {
            x: 15.0,
            y: 3.0
          }],
          showLine: false,
          type: 'scatter'
        }
      ]
    },
    options: options
  });
@benmccann
Copy link
Contributor

Can you remove labels and specify data the way you did for the scatter dataset for both datasets?

If you share the example via Plunker or JSFiddle then we can edit and try to help make it work

Also, turning on and off lines will be improved in 2.9 #5999

@benmccann benmccann mentioned this issue Jul 25, 2019
@nazariyv
Copy link
Author

Did it like this (i.e. both charts are scatter) and it worked. https://jsfiddle.net/p4tyLgme/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants