CODEWITHSUNDEEP
highchartsdonut-chartangular2-highcharts
suhas kurade
suhas kurade

Reputation: 13

How we can remove white vetrical line from highchart donut chart

My chart shows vertical white line as shown in the image. I have set borderRadius: 0 & borderWidth: 0 but still it it not working. SOmetime it will show in normal mode & sometime it will always shown in full screen mode. Does anyone having idea about this?

Image - chart Below is my code that I have tried.

{         
"credits": {         
    "enabled": false
},
"exporting": {
    "enabled": false
},
"legend": {
    "squareSymbol": true,
    "borderRadius": 0,
    "symbolRadius": 0,
    "symbolHeight": 12,
    "symbolWidth": 12,
    "useHTML": false,
    "enabled": true,
    "reversed": false,
    "maxHeight": 250,
    "floating": false,
    "itemStyle": {
        "color": "#22263D",
        "fontSize": "12px",
        "fontWeight": "700",
        "whiteSpace": "nowrap",
        "textOverflow": "ellipsis",
        "overflow": "auto",
        "width": "auto",
        "cursor": "default"
    },
    "layout": "horizontal",
    "align": "center",
    "verticalAlign": "bottom",
    "y": 7,
    "x": null,
    "padding": 10,
    "itemDistance": 20,
    "symbolPadding": 5
},
"chart": {
    "type": "pie",
    "backgroundColor": "#fff",
    "custom": {},
    "events": {}
},
"title": {
    "text": ""
},
"tooltip": {
    "outside": true,
    "backgroundColor": "#505575",
    "style": {
        "color": "#fff",
        "fontSize": "12px"
    }
},
"plotOptions": {
    "pie": {
        "innerSize": "50%",
        "dataLabels": {
            "distance": 15,
            "enabled": true,
            "format": "{point.percentage:.0f}%",
            "style": {
                "fontSize": "14px",
                "textOutline": "none",
                "opacity": 1,
                "color": "black"
            }
        },
        "borderRadius": 0,
        "borderWidth": 1,
        "borderColor": "transparent",
        "showInLegend": true,
        "point": {
            "events": {}
        },
        "legendSymbol": "rectangle"
    }
},
"series": [
    {
        "type": "pie",
        "data": [
            {
                "name": "Sales",
                "y": 1745616.3607720993,
                "color": "#4E8DBE"
            }
        ]
    }
]

}

Upvotes: 1

Views: 37

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

I see that the line occurs only in styled mode. To hide it, you need to add the below CSS:

.highcharts-point {
    stroke-width: 0;
}

Live demo: https://jsfiddle.net/BlackLabel/ghbkqz6f/

Docs: https://www.highcharts.com/docs/chart-design-and-style/style-by-css

Upvotes: 0

Related Questions