I am trying to render a chart in VueJS using ChartJS and the Vue-chartJS wrapper. What I need is to style a specific line segment in a perticular manner(e.g if the value is not available, the line segment will be dashed/ a different color). I have looked over at chart.js documentation which states:

segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      },

Where,

const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;

Now I have tried implementing this in Vue-chartJS but this does not seem to work. Also I do not have the access to the ctx variable. Can anyone help me? I am using ChartJS 2.7.1 and Vue Chart 3.5.1 and this is my code:

this.datacollectionLine = {
        labels: this.labelLine,
        datasets: [
          { 
            data: this.chartData,
            label: "Patient Details",
            backgroundColor: "#2b4c99",

           
            fill: false,
            borderColor: "rgb(43, 76, 153)",
            tension: 0.1,
            pointRadius: 0.1,
            borderWidth: 2,
          },
        ],
      },

CodePudding user response：

Line segment styling is only available in Chart.js version 3. So to use it you will either need to ditch the vue wrapper and use chart.js barebone or you will need to switch to a wrapper that support chart.js V3 like vue-chart-3.

Keep in mind that chart.js V3 has some major breaking changes from V2 so you will need to rewrite you code. For more info about this you can read the migration guide.

If you want to keep using V2 of chart.js I suggest you read the V2 docs and not the V3 version