CODEWITHSUNDEEP
javascripthtmlcss
user3050392
user3050392

Reputation:

Border-radius fails in javascript

I have the following code

<html>
<head>
  <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
  <link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
  <style>
    html, body, #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
anychart.onDocumentReady(function () {
    gauge = anychart.gauges.circular();
    gauge.fill('#fff')
            .stroke(null)
            .padding(0)
            .margin(30)
            .startAngle(0)
            .sweepAngle(360);

gauge.axis().labels()
        .padding(3)
        .position('outside')
        .format('{%Value}\u00B0');

gauge.data([120, 12]);

gauge.axis().scale()
        .minimum(0)
        .maximum(360)
        .ticks({interval: 30})
        .minorTicks({interval: 10});

gauge.axis()
        .fill('#7c868e')
        .startAngle(0)
        .sweepAngle(-360)
        .width(1)
        .ticks(
                {
                    type: 'line',
                    fill: '#7c868e',
                    length: 4,
                    position: 'outside'
                }
        );

gauge.axis(1)
        .fill('#7c868e')
        .startAngle(270)
        .radius(40)
        .sweepAngle(180)
        .width(1)
        .ticks(
                {
                    type: 'line',
                    fill: '#7c868e',
                    length: 4,
                    position: 'outside'
                }
        );

gauge.axis(1).labels()
        .padding(3)
        .position('outside')
        .format('{%Value} m/s');

gauge.axis(1).scale()
        .minimum(0)
        .maximum(25)
        .ticks({interval: 5})
        .minorTicks({interval: 1});

gauge.title()
        .padding(0)
        .margin([0, 0, 10, 0]);

gauge.marker()
        .fill('#64b5f6')
        .stroke(null)
        .size('15%')
        .zIndex(120)
        .radius('97%');

gauge.needle()
        .fill('#1976d2')
        .stroke(null)
        .axisIndex(1)
        .startRadius('6%')
        .endRadius('38%')
        .startWidth('2%')
        .middleWidth(null)
        .endWidth('0');

gauge.cap()
        .radius('4%')
        .fill('#1976d2')
        .enabled(true)
        .stroke(null);

var bigTooltipTitleSettings = {
    fontFamily: "'Verdana', Helvetica, Arial, sans-serif",
    fontWeight: 'normal',
    fontSize: '12px',
    hAlign: 'left',
    fontColor: '#212121'
};

gauge.label()
        .text('<span style="color: #64B5F6; font-size: 13px">Wind Direction: </span>' +
                '<span style="color: #5AA3DD; font-size: 15px">' + 120 + '\u00B0 (+/- 0.5\u00B0)' + '</span><br>' +
                '<span style="color: #1976d2; font-size: 13px">Wind Speed:</span> ' +
                '<span style="color: #166ABD; font-size: 15px">' + 12 + 'm/s' + '</span>').useHtml(true)
        .textSettings(bigTooltipTitleSettings);
gauge.label()
        .hAlign('center')
        .anchor('centerTop')
        .offsetY(-20)
        .padding(15, 20)
        .background(
                {
                    fill: '#fff',
                    stroke: {
                        thickness: 1,
                        color: '#E0F0FD'
                    }
                }
        );

// set container id for the chart
gauge.container('container');

// initiate chart drawing
    gauge.draw();
});

</script>

This code is taken from the following link, and generates a wind gauge. Wind_gauge_link

I want to make the inner-corners of the wind gauge round (where the wind-direction and wind-speed are displayed). Normally I would fix the css file and add the border-radius attribute to do so.

So I went on and found the code of this inner square:

    gauge.label()
        .hAlign('center')
        .anchor('centerTop')
        .offsetY(-20)
        .padding(15, 20)
         <CODE_HERE>
        .background(
                {
                    fill: '#fff',
                    stroke: {
                        thickness: 1,
                        color: '#E0F0FD'
                    }
                }
        );

I tried adding the following lines to the code (into the part that says CODE_HERE) one-by-one (not all together), but all of them failed:

.borderRadius(25)
.borderRadius("25px")
.borderRadius = 25
.borderRadius = "25px"
.border-radius = "25px"
.border-radius = 25
.border-radius:25
.border-radius:"25px"

And tried some more ways, none worked.

Does anybody know how to fix this problem? Why doesn't it work, shouldn't I just enter the css line there?

Thank you very much!

Upvotes: 2

Views: 140

Answers (2)

GIA
GIA

Reputation: 1716

Just set number, not string

.stroke('3 red')
.cornerType('round') //"Rounded", "Cut" and "RoundedInner" 
.corners(10);

Read more: https://docs.anychart.com/7.2.0/General_Appearance_Settings/Background

Upvotes: 1

Ishan Madhusanka
Ishan Madhusanka

Reputation: 821

You should use the .corner() method on the background() of the returned gauge.label().

Check the anycharts docs. Here's the link for their jsFiddle

var center_label = gauge.label()
        .text('<span style="color: #64B5F6; font-size: 13px">Wind Direction: </span>' +
                '<span style="color: #5AA3DD; font-size: 15px">' + 120 + '\u00B0 (+/- 0.5\u00B0)' + '</span><br>' +
                '<span style="color: #1976d2; font-size: 13px">Wind Speed:</span> ' +
                '<span style="color: #166ABD; font-size: 15px">' + 12 + 'm/s' + '</span>').useHtml(true)
        .textSettings(bigTooltipTitleSettings);


center_label
        .hAlign('center')
        .anchor('centerTop')
        .offsetY(-20)
        .padding(15, 20)
        .background(
                {
                    fill: '#fff',
                    stroke: {
                        thickness: 1,
                        color: '#E0F0FD'
                    }
                }
        );

center_label.background()
        .cornerType('round')
        .corners(10);

Upvotes: 1

Related Questions