Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: grid borderRadius #11512

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/axes/radial/linear.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
| `borderDash` | `number[]` | | | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | Yes | | `0.0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
| `borderRadius` | `number` | | | `0` | If greater than 0, grid lines will be curved.
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
Expand Down
1 change: 1 addition & 0 deletions docs/axes/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
| Name | Type | Scriptable | Indexable | Default | Description
| ---- | ---- | :-------------------------------: | :-----------------------------: | ------- | -----------
| `circular` | `boolean` | | | `false` | If true, gridlines are circular (on radar and polar area charts only).
| `borderRadius` | `number` | | | `0` | If greater than 0, grid lines will be curved.
| `color` | [`Color`](../general/colors.md) | Yes | Yes | `Chart.defaults.borderColor` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line, and so on.
| `display` | `boolean` | | | `true` | If false, do not display grid lines for this axis.
| `drawOnChartArea` | `boolean` | | | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
Expand Down
30 changes: 25 additions & 5 deletions src/scales/scale.radialLinear.js
Original file line number Diff line number Diff line change
Expand Up @@ -287,11 +287,31 @@ function drawPointLabels(scale, labelCount) {
}
}

function pathRadiusLine(scale, radius, circular, labelCount) {
function pathRadiusLine(scale, radius, borderRadius, circular, labelCount) {
const {ctx} = scale;
if (circular) {
// Draw circular arcs between the points
ctx.arc(scale.xCenter, scale.yCenter, radius, 0, TAU);
} else if (borderRadius) {
// Draw curved lines connecting each index
let pointPosition1 = scale.getPointPosition(0, radius);
let pointPosition2 = scale.getPointPosition(1, radius);
ctx.lineTo(
(pointPosition1.x + pointPosition2.x) / 2,
(pointPosition1.y + pointPosition2.y) / 2
);

for (let i = 1; i <= labelCount; i++) {
pointPosition1 = pointPosition2;
pointPosition2 = scale.getPointPosition((i + 1) % labelCount, radius);
ctx.arcTo(
pointPosition1.x,
pointPosition1.y,
(pointPosition1.x + pointPosition2.x) / 2,
(pointPosition1.y + pointPosition2.y) / 2,
borderRadius
);
}
} else {
// Draw straight lines connecting each index
let pointPosition = scale.getPointPosition(0, radius);
Expand All @@ -306,7 +326,7 @@ function pathRadiusLine(scale, radius, circular, labelCount) {

function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
const ctx = scale.ctx;
const circular = gridLineOpts.circular;
const {circular, borderRadius} = gridLineOpts;

const {color, lineWidth} = gridLineOpts;

Expand All @@ -321,7 +341,7 @@ function drawRadiusLine(scale, gridLineOpts, radius, labelCount, borderOpts) {
ctx.lineDashOffset = borderOpts.dashOffset;

ctx.beginPath();
pathRadiusLine(scale, radius, circular, labelCount);
pathRadiusLine(scale, radius, borderRadius, circular, labelCount);
ctx.closePath();
ctx.stroke();
ctx.restore();
Expand Down Expand Up @@ -548,12 +568,12 @@ export default class RadialLinearScale extends LinearScaleBase {
* @protected
*/
drawBackground() {
const {backgroundColor, grid: {circular}} = this.options;
const {backgroundColor, grid: {circular, borderRadius}} = this.options;
if (backgroundColor) {
const ctx = this.ctx;
ctx.save();
ctx.beginPath();
pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), circular, this._pointLabels.length);
pathRadiusLine(this, this.getDistanceFromCenterForValue(this._endValue), borderRadius, circular, this._pointLabels.length);
ctx.closePath();
ctx.fillStyle = backgroundColor;
ctx.fill();
Expand Down
4 changes: 4 additions & 0 deletions src/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2977,6 +2977,10 @@ export interface GridLineOptions {
* @default false
*/
circular: boolean;
/**
* @default 0
*/
borderRadius: number;
/**
* @default 'rgba(0, 0, 0, 0.1)'
*/
Expand Down
Loading