How to style line segments within QuickChart URL

[Pretzel6812]

Hi! I’m new to QuickChart and to JavaScript in general. I hope someone would be able to help with what I’m trying to accomplish.

My aim is to be able to generate a line chart with two lines, with the spanGaps option turned on so that empty values do not break the line. So far so good, I can manage that much.

I then want to style line segments bridging the gaps so that there is a dashed line connecting points between which there is no data. I’ve been looking at this page: Line Segment Styling | Chart.js

The example given in ChartJS’s docs seems to use a “helper” function called “skipped” that allows styling line segments exactly like I need. However, I am not sure whether such a helper function can be defined when generating a chart only using the sandbox.

For context, I am trying to generate a chart to be used within an AppSheet app.

Any help would be appreciated!

Here is a link to my current sandbox, which is returning an error because the “skipped” function is not defined:
https://quickchart.io/sandbox/#%7B%22chart%22%3A%22%7B%5Cn%20%20type%3A%20’line’%2C%5Cn%20%20data%3A%20%7B%5Cn%20%20%20%20labels%3A%20%5B’Q1’%2C%20’Q2’%2C%20’Q3’%2C%20’Q4’%2C%20’Q5’%5D%2C%5Cn%20%20%20%20datasets%3A%20%5B%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20label%3A%20’Users’%2C%5Cn%20%20%20%20%20%20data%3A%20%5B50%2C%2030%2C%20%2C%2070%2C%20180%5D%2C%20%5Cn%20%20%20%20%20%20spanGaps%3A%20true%2C%20%5Cn%20%20%20%20%20%20fill%3A%20’-1’%2C%5Cn%20%20%20%20%20%20segment%3A%20%7B%5Cn%20%20%20%20%20%20%20%20borderDash%3A%20ctx%20%3D%3E%20skipped(ctx%2C%20%5B6%2C%206%5D)%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%2C%20%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20label%3A%20’Revenue’%2C%5Cn%20%20%20%20%20%20data%3A%20%5B100%2C%20200%2C%20350%2C%20%2C%2050%5D%2C%20%5Cn%20%20%20%20%20%20spanGaps%3A%20true%2C%20%5Cn%20%20%20%20%20%20lineTension%3A%200.3%2C%20%5Cn%20%20%20%20%20%20fill%3A%20’-1’%5Cn%20%20%20%20%7D%5D%5Cn%20%20%7D%5Cn%7D%22%2C%22width%22%3A500%2C%22height%22%3A300%2C%22version%22%3A%224%22%2C%22backgroundColor%22%3A%22%23fff%22%7D

[ian]

Hi @Pretzel6812,

The Chart.js documentation defines skipped elsewhere (under SegmentUtils) as:

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

We can just inline it:

{
  type: 'line',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
    datasets: [
    {
      label: 'Users',
      data: [50, 30, , 70, 180], 
      spanGaps: true, 
      fill: '-1',
      segment: {
        borderDash: (ctx) => ctx.p0.skip || ctx.p1.skip ? [6, 6] : undefined
      }
    }, 
    {
      label: 'Revenue',
      data: [100, 200, 350, , 50], 
      spanGaps: true, 
      lineTension: 0.3, 
      fill: '-1'
    }]
  }
}

Which results in this:

Link to sandbox

I think if you add some colors it’ll be looking good. Hope this helps!

[Pretzel6812]

@ian, you are a godsend! I have no idea how to inline functions, but thanks to you I’m a little bit smarter today than I was yesterday! Many thanks!