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

Multiple datapoint styles on a single chart #5546

Closed
psuplat opened this issue Jun 5, 2018 · 3 comments
Closed

Multiple datapoint styles on a single chart #5546

psuplat opened this issue Jun 5, 2018 · 3 comments

Comments

@psuplat
Copy link

psuplat commented Jun 5, 2018

Hi,

Question, not an isse.

I am building a set of line charts, getting data as json objects, via AJAX call.

Here is one examplary array:

{"U_BATCH_NUMBER": "PSS30086", "RAW_NUMERIC_RESULT": 6.25, "RESULT_STATUS": "A"},
{"U_BATCH_NUMBER": "PSS30171", "RAW_NUMERIC_RESULT": 6.43, "RESULT_STATUS": "A"},
{"U_BATCH_NUMBER": "PSS30180", "RAW_NUMERIC_RESULT": 6.49, "RESULT_STATUS : "A"},
{"U_BATCH_NUMBER": "PSS30326", "RAW_NUMERIC_RESULT": 6.45, "RESULT_STATUS": "B"},
{"U_BATCH_NUMBER": "PSS30326", "RAW_NUMERIC_RESULT": 6.47, "RESULT_STATUS": "B"},
{"U_BATCH_NUMBER": "PSS30327", "RAW_NUMERIC_RESULT": 6.41, "RESULT_STATUS": "A"},
{"U_BATCH_NUMBER": "PSS30327", "RAW_NUMERIC_RESULT": 6.43, "RESULT_STATUS": "A"},
{"U_BATCH_NUMBER": "PSS30221", "RAW_NUMERIC_RESULT": 6.23, "RESULT_STATUS": "A"},,
{"U_BATCH_NUMBER": "PSS30342", "RAW_NUMERIC_RESULT": 6.48, "RESULT_STATUS": "C"},
{"U_BATCH_NUMBER": "PSS30293", "RAW_NUMERIC_RESULT": 6.18, "RESULT_STATUS": "A"}

The U_BATCH_NUMBER is my x-axis point/label, and RAW_NUMERIC_RESULT is the y-axis value.
So far so good, everything works perfectly fine (obviously there is some JS coding behind the scenes to create chartjs valid datapoint array).

Now what I want to achieve is draw the datapoint stle based on the value of RESULT_STATUS, so for example A=circle, B=triangle, C= cross.

The only thing I was able to find was how to change the style for the entire chart:

options: {
    elements:{
        point: {
            pointStyle: 'triangle',
        }
    },
}

Is that doable and if so how?

@etimberg
Copy link
Member

etimberg commented Jun 7, 2018

You can change the pointStyle per dataset but there is no good way of changing it per point.

@nagix
Copy link
Contributor

nagix commented Jun 26, 2018

You can set a String array to pointStylein a dataset so that each point has a different style. See the document.

pointStyle: ['circle','circle','circle','triangle','triangle','circle','circle','circle',,'cross','circle']

@kurkle
Copy link
Member

kurkle commented May 11, 2019

Since #5973 you can use scriptable options:

pointStyle: function(ctx) {
  switch(ctx.dataset.data[ctx.dataIndex].RESULT_STATUS) {
    case 'A': return 'circle',
    case 'B': return 'triangle':
    default: return 'cross';
  }
}
``´

@kurkle kurkle closed this as completed May 11, 2019
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

4 participants