How to make gradients in spiderweb?

[grayman1234]

Hi! I'm struggling how to make the spiderweb pane(I mean the area of the hexagon) have gradient color like this image

Only thing I found was filling the pane part.
and this code didn't work for me.

Code: Select all

color: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, '#003399'],
        [1, '#3366AA']
    ]
}

Is there a way to fill with gradient color?

and one more question, how do I make the circle line dashed?
Is there only straight lines?

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

1. You can:
- define a gradient with defs
- easily add a gradient to a certain SVG element via CSS

2. You can:
- define a dasharray
- set a stroke-dasharray attribute on the axis-line element

Here's a demo: https://jsfiddle.net/BlackLabel/3qo7vaLw/
Links you may find helpful:
- https://developer.mozilla.org/en-US/doc ... -dasharray
- https://www.highcharts.com/docs/chart-d ... d-patterns
- https://api.highcharts.com/class-refere ... ement#attr

Please let me know if that helps.

Best regards!

[grayman1234]

Thank you for the reply. But I think I wrote the question little wrong. I was finding the gradient of the background white part not the data part.
But I really apprecate your help!
And the dash part works good.

[jakub.s]

Sorry for the misunderstanding.

You can change the "background" part, not the "data" part by simply changing the CSS class affected.

Here's a demo: https://jsfiddle.net/BlackLabel/e51zjvwm/

Is that what you were looking for?

Kind regards!

[grayman1234]

Thank You!