archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity
Chart.js/docs/samples/line/segments.md
Jacco van den Berg 4c200b2574
Replace html extension with md extension for docs (#11439) 
* Replace html extension with md extension for docs

* Revert some links

* Commit saved files
2023-08-08 00:12:44 +02:00

1.4 KiB
Raw Permalink Blame History

Line Segment Styling

Using helper functions to style each segment. Gaps in the data ('skipped') are set to dashed lines and segments with values going 'down' are set to a different color.


// <block:segmentUtils:1>
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;
// </block:segmentUtils>

// <block:genericOptions:2>
const genericOptions = {
  fill: false,
  interaction: {
    intersect: false
  },
  radius: 0,
};
// </block:genericOptions>

// <block:config:0>
const config = {
  type: 'line',
  data: {
    labels: Utils.months({count: 7}),
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, NaN, 48, 56, 57, 40],
      borderColor: 'rgb(75, 192, 192)',
      segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      },
      spanGaps: true
    }]
  },
  options: genericOptions
};
// </block:config>

module.exports = {
  actions: [],
  config: config,
};

Docs