Round Corners

[kinokatsu]

Hi

I want to use canvas lineCap and lineJoin properties.
In the past bug reports, it is stated that “round” is possible, but it is a “miter” rendering.
Step Line with Round Corners

In the case of miter, the angle causes it to exceed the plot point.

The data is used to draw the arrow.
If the lineJoin property is miter, the plot point is exceeded by an angle.
We want to make sure that the plot point is not exceeded.

Please check this JSFiddle for a working example.

The data plot is (6, 6), but the arrow points to approximately (6.3, 6.3).
I would like the arrow to point to (6,6) or close to it.

Please suggest a solution.

[Thangaraj Raman]

@kinokatsu,

Using canvas properties like lineCap and lineJoin with CanvasJS charts is not possible as of now. In your example, the arrow exceeds the plot point because of the line thickness. Reducing the line thickness will fix this.

Please check this updated JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[kinokatsu]

Hi @thangaraj raman

I know from the thickness of the line that the arrow is beyond the plot point.
I want to draw the arrow with that line thickness. We want to fill the inside of the arrow.

Is there any way to draw that in CanvasJS?

f I can’t seem to draw it, I will suggest this to the our customer.

[Thangaraj Raman]

@kinokatsu,

Reducing your destination point to 95% of its actual value seems to be working fine with the current line thickness that you have set. Please check this updated JSFiddle for working code.

—
Thangaraj Raman
Team CanvasJS

[kinokatsu]

Hi thangaraj raman

Thanks for your suggestion.

Thickness of the line and the angle of the arrow were fixed, that would work.

Those settings can be changed, we are in the process of improving the system to use a polynomial approximation function to produce percentages from statistical data using various line thicknesses and angles.

• This reply was modified 1 month, 2 weeks ago by kinokatsu.
• This reply was modified 1 month, 2 weeks ago by kinokatsu.