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

Is it possible to get a tooltip on individual points on a box plot? #30

Closed
gisheri opened this issue May 17, 2022 · 2 comments
Closed
Assignees
Labels
answered question Further information is requested

Comments

@gisheri
Copy link

gisheri commented May 17, 2022

I would like to show a tooltip for each point in a horizontal box plot

The outlier points get their own tooltip, but I can only seem to trigger a tooltip for the entire box area for any non-outliers. The tooltip item in the callbacks and filters doesn't help, because item in the argument only refers to the entire box as well, so i can't seem to narrow it down there. I've tried setting the interaction mode to point, but it doesn't seem to change this functionality.

Screen.Recording.2022-05-16.at.9.52.41.PM.mov

I'm on 3.7.2

Thanks

@gisheri gisheri added the question Further information is requested label May 17, 2022
@sgratzl sgratzl self-assigned this May 17, 2022
@sgratzl
Copy link
Owner

sgratzl commented May 17, 2022

this plugin doesn't support tooltips on individual points. On outliers (i.e. the grey point on the left), they should automatically appear.

@sgratzl sgratzl closed this as completed May 17, 2022
@Andrewg1263
Copy link

I am not sure if combing scatter plot and box plot is the correct way to do,
but it seems working for showing tooltip for a single point.

const boxplotData = {
  // define label tree
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'Dataset 1',
    backgroundColor: 'rgba(255,0,0,0.5)',
    borderColor: 'red',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 0,
    order: 2,
    data: [
      randomValues(100, 0, 100),
      randomValues(100, 0, 20),
      randomValues(100, 20, 70),
      randomValues(100, 60, 100),
      randomValues(40, 50, 100),
      randomValues(100, 60, 120),
      randomValues(100, 80, 100)
    ]
  },{
    type: 'scatter',
    label: 'Scatter Dataset',
    borderColor: 'rgb(75, 192, 192)',
    data:[{
      x: 'January',
      y: 20
    }, {
      x: 'January',
      y: 40
    }],
    order:1,
  }]
};

Reference:
https://www.chartjs.org/docs/latest/charts/mixed.html
https://codepen.io/sgratzl/pen/QxoLoY

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
answered question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants