I am trying to remove the grey border of gauges while using JQPlot.
With other charts I use the following code:
grid: {
drawBorder: false,
shadow: false,
},
However, gauges don't seem to support this functionality. How can I remove the borders of a gauge?
Thanks in advance
Related
By default MUI adds, 65px of right padding to the outlined Autocomplete box. However, I would like to change the right padding to 50px as per my usecases. I am trying to override the right padding but no luck. Here is my sandbox where I tried changing the right padding of the Autocomplete input box - https://codesandbox.io/s/sizes-demo-material-ui-forked-95rvqw
Also attaching the screenshots of the Autocomplete box whose padding needs to be changed.
Can someone please suggest how to override the default right padding of the Autocomplete box ?
Simply change your sx attribute like this:
sx={{
"& .MuiOutlinedInput-root": {
paddingRight: "10px!important",
},
}}
Explanation:
Your approach is right, but there are some problems that I'll try to correct step by step.
First of all, the & sign needs to be the first letter of the string followed by a space. For example:
"& .MuiAutocomplete-hasPopupIcon"
Second, You should target the classes one by one, like this:
sx={{
"& .MuiAutocomplete-hasPopupIcon": {
paddingRight: "50px"
},
"& .MuiAutocomplete-hasClearIcon":{
paddingRight: "50px"
},
"& .MuiAutocomplete-inputRoot":{
paddingRight: "50px"
},
}}
Third, You only need to select .MuiOutlinedInput-root class for your desired change.
And lastly, because (in this case) the classes in the nested component have higher specificity, You need to add !important keyword to finish the work.
See the MUI Documentations on how to customize nested components using the sx prop
This padding (65px) exists for a good reason - in order to not allow input content to overflow the clear button at the end of the input. You can pass disableClearable prop to your Autocomplete component in order to have padding 6px from all sides but you will lose the clear button. Otherwise, just overriding the existing padding will lead to collisions between content and the clear button in UI.
<Autocomplete
disableClearable
multiple
...other props
MuiAutocomplete: {
root: {
"&.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-
root": {
paddingRight: 0,
},
}
}
Although cell borders in a GoogleSpreadsheet can be set manually to 6 different styles (dotted, dashed, solid (1px width), solid (2px width), solid (3px width) and double), it seems the current version of the API is limited to the options DOTTED, DASHED and SOLID for BorderStyle. The latter has a 1px width.
Is there a way which allows me to set a border with 2px width, either by choosing one of the other 3 styles not in the BorderStyle enum, or by setting the border width by any workarounds?
Update: (revisiting this a few years later) - there are now other options for BorderStyle, including SOLID_MEDIUM which I was originally looking for.
This should work
function borders() {
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Line 1").getRange("E21:F26").setBorder(true, true, true, true, true, true, 'black', SpreadsheetApp.BorderStyle.SOLID_MEDIUM);
}
Of course the sheet and range are just what I used for testing, should work with any range/sheet.
Here's the documentation for the border styles and here is the documentation for .setBorder
It appears that multiple border thickness options is a very new feature as of February 2017, so I don't think it has made its way into the Enum options of apps script.
Google Help Forum Post on add border style options
We are building a website which should have the following layout:
As you can see, there's a header and a sidebar, and the content area is a Google Map built with the Google Maps Javascript API v3.
Now we would like to make the header and the sidebar half-transparent, such that the map would be visible behind the header and the sidebar, something like this:
However, now the header and the sidebar are overlapping the Google logo and the zoom control.
Is there a way to tell the Google map that it should apply some padding to the placement of its controls?
Of course we could try to move the Google logo and the controls "manually" by applying some CSS, but the Google Maps Javascript API would restore their location every time the user uses the map (e.g. on panning or scrolling), so this would result in a fight between our code and Google's.
I have found an answer that seems to work reliably:
The controls
You can add a top-margin to the controls by adding a dummy control:
var dummy = document.createElement('div');
dummy.style.height = '55px';
dummy.style.width = '100px';
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(dummy);
Then, in the configuration, place the zoom control with RIGHT_TOP:
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP,
},
Note that this only works because TOP_RIGHT controls are always placed above RIGHT_TOP controls.
The Google logo
The following code waits for the Google map to be initialized, then adds the class gmaps-logo-padded to the logo:
var moveLogo = function () {
var logo = $('#map div a div img').parent().parent().parent();
if (logo.length == 0)
window.setTimeout(moveLogo, 10);
else
logo.addClass('gmaps-logo-padded');
};
moveLogo();
Then, by applying the following CSS, you can change the placement of the logo:
.gmaps-logo-padded {
left: 300px !important;
}
Please note that paragraph 9.4 of the Terms of Service forbid hiding or removing the logo.
As for the zoom control placement, you can use Control positioning, for example:
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
I am using SSRS reporting. I have designed a report which contains some Pie Chart.
All the things working fine. There is some issue around the Legends alignment and font family .
If you see attached image. You will see the 1st Pie charts legends are different than 2nd pie Chart's Legends.
I have set same properties for both pie Chart's Legends.
Can any body suggest the solutions regarding this issue.
Thanks in advance
Ashish Bisht
Try to give same size to both the pie charts, if layout of Lengends is not matching and check if this resolves your problem.
Try to give same size to the chart area of both the charts (Select Chart Area, F4, in the properties window look for Custome Position, Set Enabled to TRUE, give Height, Width, Left, Right ). Check if this gives same size to your chart area.
If you are trying to have same legend text value, then try this,
Right click on Series (in char data box) ---> Series Properties --> Legend -- > Custome Legen Text .. Here you give the text you want to see in your Legend.
Try the three possibilities, hope any one of the three resolves your problem.
I am using Primefaces barChart in one of my projects where in a small area I need to display a chart that contains multiple data points. When the chart is rendered, the bars become very thin, which is ok for me. However, there are shadows of each of the bars that look confusing on the chart.
Is it possible to disable shadows in Primefaces charts?
The bar chart has a 'shadow' attribute. Setting it to false should make the shadow dissapear.
However, at least in version 3.1.1 I was not able to make the shadow dissapear using this attribute, it seems that it doesn't work. If you have the same issue, add the following style to your css file:
.jqplot-series-shadowCanvas {
display: none;
}
It hides the shadows of bar chart (and probably the shadow of other charts too, I haven't tested it).
I know that it is an old question but for anyone else looking for help here you can do:
BarChartModel barChartModel = new BarChartModel();
barChartModel.setShadow(false);
It work also with linecharts:
LineChartModel result = new LineChartModel();
result.setShadow(false);
and should work with other kinds of charts as well.