CODEWITHSUNDEEP
vue.jschart.jsvue-chartjs
ritwick_ _D
ritwick_ _D

Reputation: 127

Line segment styling in Vue-chartJS

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,
          },
        ],
      },

Upvotes: 1

Views: 2602

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

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

Upvotes: 1

Related Questions