Chart.js: how to custom points

[JuLiAnChz]

Hello everyone,

I have a problem with CHARTJS, I want to change the shape of the points in LINE CHART, I have researched and have not managed to find the solution.

Thank you very much in advance...

[etimberg]

@JuLiAnChz this is possible in version 2.

You can set point style for all points like so:

config = {
    elements: {
        points: {
            pointStyle: 'triangle'
        }
    }
}

Set the pointStyle attribute on each dataset to change the style for only that dataset.

Possible values are 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If you set pointStyle to a canvas image object, that will be drawn instead.

V2 docs are available at http://nnnick.github.io/Chart.js/docs-v2/

[JuLiAnChz]

@etimberg
wow! Thx, but no way to do it in version 1

[etimberg]

@JuLiAnChz in v1 it's more complicated you'll have to replace the draw method on Chart.Point.prototype.draw and do the custom drawing in there.

[JuLiAnChz]

@etimberg Thx, i have new question :D! I change the figure to achieve the points, now I want to know how I can add a new option to dataset.

EDIT: I modified Chart.js v1

[etimberg]

I think you need to modify: https://github.com/nnnick/Chart.js/blob/master/src/Chart.Line.js#L98-L105
And then also: https://github.com/nnnick/Chart.js/blob/master/src/Chart.Line.js#L231-L239

[JayBerlin]

Is it possible to remove the points on the line? Or display the points as transparent until hover?

I figured this out. I was using one of the samples, and it was resetting my point options and I did not notice that is was doing so.

[etimberg]

@JayBerlin you could set the regular color to transparent and set a highlight color that is not transparent.