Enable line segment point styles override by scriptable options in the segment object

[bairog]

Feature Proposal

According to line segment docs currently all of the border* and backgroundColor options are supported. But these options doesn't affect line point style.
When I set borderColor and backgroundColor for a dataset but omit pointBorderColor and pointBackgroundColor - point have exactly same color like line has. But that logic is not working when overriding line segment color by scriptable options.

Feature Use Case

Now it looks slightly ugly when line segment color is overriden but point color not. You can see it on a slightly modified Line Segment Styling sample (I've just added backgroundColor setting and removed radius: 0 option):

https://jsfiddle.net/bairog/wpu9z5rs/31/

Possible Implementation

I think it will be very handy to make it working same way like original options do OR support pointBorderColor and pointBackgroundColor in line segment scriptable options.

[kurkle]

The rationale is styling the line between 2 points.
Points can be styled using the regular options.

[bairog]

Points can be styled using the regular options.

I didn't get the idea you are talking about.. Is there any special option for points to have a color of a line that connects them? Or what do you mean?

[kurkle]

The 2nd point in your image, would it be red or gray? It is between 2 segments.

If you add a function as borderColor in the dataset, you can style the points there by index or whatever.

[bairog]

The 2nd point in your image, would it be red or gray? It is between 2 segments.

The 2nd point would be red. I'm trying to implement the following logic:

1. If some point connects solid and dashed segment - it should have the color of a solid segment
2. If some point connects two solid segments - it should have the color of a solid segment that is located to the left of this point
3. If some point is the first point in dataset and has a solid segment to the right of it - it should have the color of a solid segment
   So my picture should look like that:
   

If you add a function as borderColor in the dataset, you can style the points there by index or whatever.

I'm afraid that I still do not fully understand what you mean. Do you recomend me to change points color right inside down function in Line Segment Styling sample? If so - I've tried the following code:

function down (ctx, value) {
	if (ctx.p0.parsed.y > ctx.p1.parsed.y) {
		//line segment is going to be red - so p1 color should be also red
		ctx.p1.options.backgroundColor = value;
		ctx.p1.options.borderColor = value;
		return value;
	}		 		
	else{
		//line segment is going to be cyan (default dataset color) - so p0 and p1 color should be also cyan
		return undefined;
	}		 		
}

But that makes all points to become red - https://jsfiddle.net/bairog/wpu9z5rs/49/ :

Moreover ctx object as I can see doesn't even have datasets property - so how is it supposed that I get default dataset color here?

So I guess I didn't catch your idea. Clarify please what exactly did you mean? Thank you in advance.

[etimberg]

What @kurkle meant was to use a function for the pointBackgroundColor option to style the point colour based on your needs.

The context for that function will have the following properties which should be enough to meet the criteria you need:

{
  chart: Chart,
  dataset: ChartDataset,
  datasetIndex: number,
  active: boolean,
  dataIndex: number,
  element: Chart.Element,
  index: number,
  mode: string;
  parsed: { x : number, y: number | null },
  raw: number
  type: "data"
}

[bairog]

What @kurkle meant was to use a function for the pointBackgroundColor option to style the point colour based on your needs.

Oh, it's much clearer for me now. Looks like I've missed docs section about dataset options that can by set with a function (and description of the contexts that are passed to that functions). Could you please point me in the right direction. Thank you.

[etimberg]

I think the docs changed on that when we released v3. In v2, only certain options could be functions but now in v3 almost everything can be set as a function. In https://www.chartjs.org/docs/latest/charts/line.html#dataset-properties the rows that have "Yes" in the "Scriptable" column can be set as a function

The general docs on function options are https://www.chartjs.org/docs/latest/general/options.html

[bairog]

Thank you. Scriptable options (https://www.chartjs.org/docs/latest/general/options.html#scriptable-options) saved my day!

But I've faced another problem - on my chart I need to have special "puncture" points (they visually represent moments of time when no data has been registered):

1. they have border and background colors set to gray
2. they have the same Y value a the nearest "ordinary" point to the left
3. they have dashed segments connecting them to each other and to the nearest "ordinary" points

As you can see I cannot simply use y=NaN for "puncture" points because I need to draw them..
If modifying Line Segment Styling sample - the picture should look like (point with x=3 is a "puncture" point):

So I've tried the following:

1. added an extra boolean hasNoData field in dataset data: data: [{x:1, y:65, hasNoData: false}, {x:2, y:59, hasNoData: false}, {x:3, y:59, hasNoData: true}, {x:4, y:48, hasNoData: false}, {x:5, y:56, hasNoData: false}, {x:6, y:57, hasNoData: false}, {x:7, y:40, hasNoData: false}]
2. set points border and background colors with a function:

pointBackgroundColor: ctx => getPointColor(ctx);
.........
function getPointColor(context) {
    let point = context.dataset.data[context.dataIndex];

    if (point.hasNoData)
        return 'gray';
    else
       //other colors depending on point.y
}

3. but now I'm stuck on setting segment color and dash because:

segment: {
    backgroundColor: ctx => getSegmentColor(ctx),
    borderColor: ctx => getSegmentColor(ctx),
}
.........
function getSegmentColor(context) {
    let point = context.p1;

    //point.hasNoData is not available here
    if (point.hasNoData)
        return 'gray';
    else
       //other colors depending on point.y
}

Context that is passed inside a function for a segment has points (p0 and p1 properies) with only the following properties:

Context itself has only the following properties:

So I cannot use if (context.p1.hasNoData) and I cannot use if context.dataset.data[context.p1DataIndex].hasNoData).
@etimberg @kurkle Any recomendations/workaround for this situation? Thank you in advance.

[kurkle]

If you have the chart instance or the data array available at upper scope, you could access that directly, eg:

if (myDataArray[context.p1DataIndex}.testIsSkipped) or
if (myChartInstance.data.datasets[context.datasetIndex].data[context.p0DataIndex].testIsSkipped)

The context should really have the chart instance included, but it is not easily available where the context is created.

[bairog]

If you have the chart instance or the data array available at upper scope, you could access that directly

So for today I've ended up with the following approach:

1. Store data array as global variable:
   var points = [{x:1, y:65, hasNoData: false}, {x:2, y:59, hasNoData: false}, {x:3, y:59, hasNoData: true}, {x:4, y:48, hasNoData: false}, {x:5, y:56, hasNoData: false}, {x:6, y:57, hasNoData: false}, {x:7, y:40, hasNoData: false}];
2. Use that variable as dataset's data:
   data: points
3. And also use it in chart options' segment functions:

segment: {
    backgroundColor: ctx => getSegmentColor(ctx, points),
    borderColor: ctx => getSegmentColor(ctx, points),
    borderDash: ctx => getSegmentDash(ctx, points), 
}
.........
function getSegmentColor(context, points) {
    let point = points[context.p1DataIndex];
    if (point.hasNoData)
        return 'gray';
    else
       //other colors depending on point.y
}

function getSegmentDash(context, points) {
    let point = points[context.p1DataIndex];
    if (point.hasNoData) 
        return [10, 10];
    else
        return undefined;
}

The context should really have the chart instance included, but it is not easily available where the context is created.

Well why not to simply include all properties (not only x and y) into p0 and p1 objects? Maybe this will be easier to implement?

P. S. One last question: now legend reflects only default dataset color:

Is there a way to reflect colors of all segments - something like that:

Maybe some option or a legend custom drawing callback?

[etimberg]

For the legend, you might be able to use the generateLabels legend option and return use createLinearGradient to make a gradient that draws in the legend. The problem is aligning the pixels when creating the gradient.

[bairog]

For the legend, you might be able to use the generateLabels legend option

Do I need to fill in all Legend Item Interface fields? Because I've tried the following with no success:

plugins: {
        legend: {
            onClick: null,
            labels: {
                color: "#c0c0c0",
                generateLabels: ctx => getLegendLabel(ctx)
            }
        }
......
function getLegendLabel(context) {
    var label = {
        text: 'TEST'
    };

    return label;
}

Maybe you can point me to the source where default implementation is - so I will be able to see how to properly fill in a label?

and return use createLinearGradient to make a gradient that draws in the legend.

To what particular field should I assign CanvasGradient that createLinearGradient will return? FillStyle or what?

P. S. I apologize for such possibly obvious questions - I'm newbie to Java Script :)

[etimberg]

You should return all the fields. The default implementation is https://github.com/chartjs/Chart.js/blob/master/src/plugins/plugin.legend.js#L636-L663 and I would put the gradient into the fillStyle field

[bairog]

The problem is aligning the pixels when creating the gradient.

Now for gradient that I need I have the following code :

const gradient = chart.ctx.createLinearGradient(0, 0, legendBoxWidth, legendBoxHeight);
grad.addColorStop(0.33, "rgb(75, 192, 192)");
grad.addColorStop(0.33, "rgb(192,75,75)");
grad.addColorStop(0.66, "rgb(192,75,75)");
grad.addColorStop(0.66, "rgb(0,0,0,0.2)");
var fillStyle = gradient;

But now can I get legendBoxWidth and legendBoxHeight? If there are no such properties - they are calculated somewhere, right?