Given the following plnkr
http://plnkr.co/edit/v01Kei1oI7sfdas2dbwN?p=preview
How do you fill the bar chart? As you can see its transparent ?
I have tried passing the info in this question How to have solid colored bars in angular-chart bar chart
using
chart-dataset-override="datasetOverride"
but still does not work
Issue https://github.com/jtblin/angular-chart.js/issues/696
solved my problem
colors: [
{
backgroundColor: '#A2DED0',
borderColor: '#A2DED0',
hoverBackgroundColor: '#A2DED0',
hoverBorderColor: '#A2DED0'
},
{
backgroundColor: '#65C6BB',
borderColor: '#65C6BB',
hoverBackgroundColor: '#65C6BB',
hoverBorderColor: '#65C6BB'
},
{
backgroundColor: '#1BBC9B',
borderColor: '#1BBC9B',
hoverBackgroundColor: '#1BBC9B',
hoverBorderColor: '#1BBC9B'
}
]
Related
I want to get a similar scrollbar to youtube in MUI v5 that supports both light and dark themes. I have seen several answers for this but I am confused how to do it for all browsers and in the best possible way. Some answers only work for certain browsers or use MUI v4.
There was one answer on StackOverflow that showed almost what I wanted, but the issue with this is it is hard-coding the colors into the code - which means it is the same in dark and light mode. I want it to be dynamic based on the theme and look like the youtube scrollbar (with a transparent background)
Please tell me the best possible way to do this in MUI v5.
I found another answer which did support theme aware scrollbar, but I am not sure how to integrate that into my code. The way I am doing theming is I first create a base theme with all the style changes/overrides then I create two themes based on that: light and dark (I am not sure if this is the best way to handle it - if not, please feel free to correct my code below).
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
scrollbarColor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundColor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderRadius: 8,
backgroundColor: "#6b6b6b",
minHeight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundColor: "#2b2b2b",
},
},
},
},
},
});
const lightTheme = createTheme({ ...theme, palette: { mode: "light" } });
const darkTheme = createTheme({ ...theme, palette: { mode: "dark" } });
export { lightTheme, darkTheme };
Again, the issue with my code above is that it is not theme aware
I am attempted to add new text css to my highmaps map in order to have the state name appear larger and bolder. I've tried making this change using by :
chart: {
style: {
fontFamily: 'Roboto',
fontWeight: 'bold',
fontSize: '14px',
color: '#002F65',
textAlign: 'center'
}
},
Although I do see these set css elements when I inspect the graph, it has no affect on the actual map itself.
My expected outcome to to change the css of the state abbreviations displaying on the map: For example CA, CO, AZ, NV etc..
Here is a link to my jsfiddle
Those names (CA, CO, AZ, NV etc..) are a dataLabels, so you need to set those style options inside the dataLabels style options config.
Demo: https://jsfiddle.net/BlackLabel/oxz34gj6/
dataLabels: {
enabled: true,
formatter: function() {
return this.point.properties['hc-a2'];
},
style: {
fontFamily: 'Roboto',
fontWeight: 'bold',
fontSize: '14px',
}
},
API: https://api.highcharts.com/highmaps/series.map.dataLabels.style
I'm new to React Native and I'm using this repository for the TabBar.
Am I able to change some styles? By default the bubble background is blue and I want to change it to something else.
In the index.js under node_modules/react-native-fluidbottomnavigation the backgroundColor is defined as #4C53DD.
Am I able to change it from the point I am using the TabBar?
This is my NavBar:
This is my code in App.js:
<TabBar
onPress={tabIndex => {
console.log(tabIndex);
curTab = tabIndex;
}}
values={[
{
title: 'requests',
image: require('./assets/requests.png'),
tintColor: 'red',
},
{
title: 'requests',
image: require('./assets/requests.png'),
tintColor: 'blue',
},
{
title: 'events',
image: require('./assets/events.png'),
default: true,
tintColor: 'green',
},
{
title: 'members',
image: require('./assets/members.png'),
tintColor: 'orange',
},
{
title: 'account',
image: require('./assets/account.png'),
tintColor: 'yellow',
},
]}
/>
This tintColor doesn't change the background color as you can see in the picture. I want that blue circle to be another color.
There is the property tintColor that you can use for both TabBar and every item like this:
import TabBar, { iconTypes } from "react-native-fluidbottomnavigation";
<TabBar
iconStyle={{ width: 50, height: 50 }}
// CHANGE TINT COLOR HERE ---------------
tintColor="red" // Change tint color here
// --------------------------------------
onPress={(tabIndex) => {
console.warn(tabIndex);
}}
isRtl={ true }
iconSize={25}
values={[
{ title: "Home", icon: "alarm", tintColor: curTab == 0 ? "red" : "blue", default: true, isIcon: true, iconType: iconTypes.MaterialIcons },
{ title: "Home1", tintColor: curTab == 1 ? "red" : "blue", },
{ title: "Home2", tintColor: curTab == 2 ? "red" : "blue", },
{ title: "Home3", tintColor: curTab == 3 ? "red" : "blue", },
{ title: "Home4", tintColor: curTab == 4 ? "red" : "blue", },
]}
/>
If you read more carefully my answer and the README at the repo, then you'll see that tintColor does not only apply to tab items but also at the TabBar component itself. So, if you set <TabBat tintColor="red" ... you'll have red color for the bubble like this:
First get a fork form this, then get a clone, do the necessary changes and push it.
All good now you can install it to your app
npm install --save <git-url-of-your-fork>
I am using fullcalendar and I am looking for a way to pass background color as an event
so that my calendar app can use a combination of colored events and colored backgrounds.
I'm pretty sure this is not supported by the library, so if anyone has any notes towards coding the feature or experience working with the code, that would be helpful.
The following question is very similar to mine, but not written clearly enough to know if it's a dupe:
Fullcalendar event cell background color
Update 1
Based on the accepted answer, I use the following event specs
{
title: '',
start: moment().add(2,'h').toISOString(),
end: moment().add(5,'h').toISOString(),
color: 'rgba(63, 191, 191, 0.24)',
textColor: 'rgba(63, 191, 191, 0)',
editable: false,
durationEditable: false,
allDay: false,
fakeEvent: true
},
{
title: 'WORK DAY',
start: moment().add(1,'h').toISOString(),
end: moment().add(3,'h').toISOString(),
color: 'green',
//background-color = 'blue'
},
And get this result. Next step is trying to prevent the event overlapping display algorithm, so that the light blue appears more like a background color, less like an event.
Update 2
I have since discovered this example app that accomplishes what I needed: http://fullcalendar.io/js/fullcalendar-2.2.0/demos/background-events.html
That question you referenced isn't the same. He was looking to change the background color of any day that has an event, not the event itself. What you are trying to do is supported by the library. You can set the color of the event by passing in a color property with the event data.
All examples can be found on the FullCalendar Event Source Object page. As noted on that example page, you can set it in the array of events:
{
events: [
{
title: 'Event1',
start: '2011-04-04'
},
{
title: 'Event2',
start: '2011-05-05'
}
// etc...
],
eventColor: 'yellow', // an option!
textColor: 'black' // an option!
}
or in JSON:
{
url: '/myfeed.php',
color: 'yellow', // an option!
textColor: 'black' // an option!
}
Now, those are setting the background for every event in the source, but you can do it per event as well, the same way, like:
[
{
"title": "Free Pizza",
"allday": "false",
"borderColor": "#5173DA",
"color": "#99ABEA",
"textColor": "#000000",
"description": "Fake description for the Free Pizza",
"start": "2014-11-15T16:30:28",
"end": "2014-11-15T17:30:28",
"url": "some url"
},
{
"title": "CSS Meetup",
"allday": "false",
"borderColor": "#820F20",
"color": "#A6113C",
"textColor": "#ffffff",
"description": "Fake description",
"start": "2014-11-19T16:30:28",
"end": "2014-11-19T18:30:28",
"url": "someUrl
}
]
You can use eventColor and eventTextColor (src) to set the background for all events on the calendar, like
$('#fullCal').fullCalendar({
events: [...],
eventColor: 'yellow',
eventTextColor: 'black'
});
After further clarification it appears you want certain time slots to have colors but not be a "real" event. You can do this in FullCalendar 2.2 using the Background Events by adding rendering: 'background' to the event (documentation).
$('#fullCal').fullCalendar({
events: [{
title: 'Main Event 1',
start: moment().add(-4, 'h'),
end: moment().add(-2, 'h'),
color: '#ff0000',
allDay: false
}, {
start: moment().add(2, 'h'),
end: moment().add(5, 'h'),
rendering: 'background'
}, {
title: 'Main Event 2',
start: moment().add(5, 'h'),
end: moment().add(7, 'h'),
color: '#00cc00',
allDay: false,
fakeEvent: false
}],
header: {
left: '',
center: 'prev title next',
right: ''
},
timezone: 'local',
defaultView: 'agendaWeek'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.0/fullcalendar.min.js"></script>
<div id="fullCal"></div>
I would like to color my root node a different color than the rest of the nodes on the screen, I have already done some pre-work to identify the value of the root node and have it readily available in a variable. However, in trying to style the graph nothing happens and its been difficult to debug through this.
example:
nodes: [{id = 1}, {id=2}]
var startingNode = 1; //root node
$('#cy').cytoscape({
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'background-color': 'red',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
},
{
selector: "node[content = 'startingNode']",
css: {
'content': 'data(id)',
'background-color': 'purple',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
}]
// more info for cytoscape rendering omitted
});
Any input would be helpful!
Thanks,
Paul G.
Unless, content is in the node's data, that won't work. If you have the ID of a node (e.g. foo), you can use #foo or [id = 'foo'] as the selector.