You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "vaishnavigitsavvy (via GitHub)" <gi...@apache.org> on 2024/05/12 17:43:27 UTC
[I] [Bug] 1)Tooltip not accepting border radius for 4 different corners using formatter for tooltip and 2)it is not accepting options for borderRadius for 4 corners options ex(borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius) [echarts]
vaishnavigitsavvy opened a new issue, #19925:
URL: https://github.com/apache/echarts/issues/19925
### Version
echarts-for-react: 3.0.2,
### Link to Minimal Reproduction
https://codesandbox.io/p/sandbox/doughnut-chart-z8r6hq?file=%2Findex.js
### Steps to Reproduce
go to the codesandbox link
### Current Behavior
I wrote following code for custom tooltip and I tried to use cssclass(echarts-tooltip) (without formatter) both of which did not work,
tooltip: {
backgroundColor: '#005C8E', // Transparent black background,
formatter: function(params){
console.log("params",params)
return `
<div class="custom-tooltip" style="border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:8px; border-bottom-right-radius:0px;">
<div class="tooltip-content">
`+params.data.name+`:`+params.data.value+`
</div>
</div>
`
},
renderMode: 'html',
className: 'echarts-tooltip',
textStyle: {
// Tooltip text color
color:'#FFFFFF',
fontSize:9,
height:3,
fontFamily:"Roboto",
padding:0
},
},
Tooltip.css
.echarts-tooltip{
border-radius: 0px 0px 0px 8px;
}
### Expected Behavior
1)There is no provision to assign border-top-left](border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px;,
2)If I try to assign it using borderRadius as an array for all 4 corners no border radius value gets assigned as shown in below code and picture
tooltip: {
backgroundColor: '#005C8E', // Transparent black background,
borderTopLeftRadius:"0px",
renderMode: 'html',
borderRadius:[0,0,9,0],
className: 'echarts-tooltip',
textStyle: {
// Tooltip text color
color:'#FFFFFF',
fontSize:9,
height:3,
fontFamily:"Roboto",
padding:0
},
/*
formatter:function (params) {
return '<div style="border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px;">'+ params.data.name + ': ' + params.data.value +'</div>';
},*/
},
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
Please guide/provide options to assign different border radius to all four corners
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 1)Tooltip not accepting border radius for 4 different corners using formatter for tooltip and 2)it is not accepting options for borderRadius for 4 corners options ex(borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius) [echarts]
Posted by "plainheart (via GitHub)" <gi...@apache.org>.
plainheart closed issue #19925: [Bug] 1)Tooltip not accepting border radius for 4 different corners using formatter for tooltip and 2)it is not accepting options for borderRadius for 4 corners options ex(borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius)
URL: https://github.com/apache/echarts/issues/19925
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Bug] 1)Tooltip not accepting border radius for 4 different corners using formatter for tooltip and 2)it is not accepting options for borderRadius for 4 corners options ex(borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,borderBottomRightRadius) [echarts]
Posted by "plainheart (via GitHub)" <gi...@apache.org>.
plainheart commented on issue #19925:
URL: https://github.com/apache/echarts/issues/19925#issuecomment-2106529518
Two ways to do this,
1. Use [`extraCssText`](https://echarts.apache.org/option.html#tooltip.extraCssText)
```js
tooltip: {
extraCssText: 'border-radius: 0 0 0 8px',
},
```
2. Use `className` with defined CSS styles
```js
tooltip: {
className: 'custom-tooltip'
}
```
```css
.custom-tooltip {
/* `!impoatant` is required */
/* because the `border-radius` is an inline style that will be set by ECharts by default */
border-radius: 0 0 0 8px!important;
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org