I am using Apex charts in the react project, I have implemented a time series chart there I am not able to decrease the "thickness of a grid line" in the line chart.
Grid lines
Can anyone help?
I didn't find any standard ones. With css:
.apexcharts-gridline {
stroke-width: 2px;
}
default value 1px
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
I am trying to achieve the transparent color of the area with only borders in spite of color fill for a donut graph. I am using nvd3 with angularJS, but unable to achieve that. Any suggestions on this as how to do this.
If there is any library - which is capable of doing so, please suggest.
Image for reference
The problem is the style set in nv.d3.css.
Add this style after including nv.d3.css
.nvd3.nv-pie path {
stroke: inherit;
stroke-width: 1px;
stroke-opacity: 1;
fill: white;
}
If you only want this to apply this to a particular pie chart add the id to the style selector.
In Angular js ui rid, how can I remove vertical and horizontal scrollbars ?
And also for each column heading I am getting a little carrot icon by default, which shows sort ascend, sort descent, Hide column. I want to remove this also from my column headings.
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
enableHorizontalScrollbar : 0,
enableVerticalScrollbar : 0,
enableSorting : false,
enableColumnMenus : false;
Good answer from #Asqan answering the first part of your question. For the second part:
Instead .table-striped which comes by default for ui grid, I want to use .table-bordered. Is there any place to set these parameters to ui grid?
I'm thinking you mean you want the look in this plunker I created.
You can solve these css issues in one of two general ways.
1) Customize the ui-grid css
2) Leave the original ui-grid css then override it in your own css file
I've shows the first option to solve your "stripped" issue and the second option to implement your desired border. I have done both for example only so you can see both options - I recommend choosing and using consistently one method or the other.
The ui-grid sets the ".table-striped" look to which you are referring in the css. You can override this either in you own css file or using the customizer tool and setting the #rowcoloreven and #rowcolorodd fields to the hex code for white #ffffff. This will update the ui-grid css to contain the below:
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffffff;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ffffff;
}
For ".table-bordered" see specifically in the style.css file these added lines
.ui-grid-cell {
border-style: solid;
border-bottom: 1px #ff0000;
}
I'm working on an ExtJS chart. The axis labels of the chart is having lengthy texts. At the edges of the Chart the texts are cut off. How to word wrap style to Ext JS Chart axis labels?
adding newlines every n words with a renderer could also work
Heres the fiddle
renderer: function(v) {
//adds newline every 5th word
return v.replace(/((?:\w+ ){5})/gi, "$1\n");
}
try this
.x-form-label#myLabel {
width: 20px;
overflow: hidden;
}
I am trying to build a grid created by AngularJS's ng-grid module that will extend across the width of the webpage. However, when I create the grid, by default it only extends roughly 1/2 of the way across the page. Increasing the width of columns only results in columns being cut off instead of expanding the overall grid. I can't find any online documentation on how to expand the width of grids so any help would be appreciated.
Create a grid style.
.gridStyle {
border: 1px solid #ccc;
width: 100%;
height: 300px
}
And then apply it to the HTML
<div class="gridStyle" ng-grid="gridOptions">