I'm using the following line to change some visual properties based on some conditions
this.$refs.pieChart.chart.series[0].update({ dataLabels: { color: 'blue' }, chart: { backgroundColor: 'yellow' } })
This works fine for the dataLabels part, but I'm unable to change the backgroundColor one.
I tried this:
this.$refs.pieChart.chart.series[0].update({ dataLabels: { color: 'blue' }, backgroundColor: 'yellow' })
and this
this.$refs.pieChart.chart.series[0].update({ backgroundColor: 'yellow' })
With no luck, I searched everywhere else in my code, nothing is overriding or setting the backgroundColor
side.
You should do an update on the whole chart config, not on the series:
chart.update({
chart: {
backgroundColor: 'red'
}
})
API: https://api.highcharts.com/highcharts/chart.backgroundColor
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Demo: https://jsfiddle.net/BlackLabel/p7yg386x/
Related
I am making a React Native app in which calendars in it.
Is it possible to change the style of selected date of React Native calendar?
As shown in the image, I want to change the style of (6/10/2019) like the image.
Is there any way to change this? Or which module should I use for this?
Those are modules that I know related with calendar.
react-native-calendars
react-native-calendar-events
react-native-calendar
react-native-calendar-strip
react-native-bpk-component-calendar
react-native-calendar-select
react-native-calendario
react-native-dates
react-native-event-calendar-customized
react-native-calendar-reminders
Yes! Here's an example
<Calendar
// Date marking style [simple/period/multi-dot/single]. Default = 'simple'
markingType={'custom'}
markedDates={{
'2018-03-28': {
customStyles: {
container: {
backgroundColor: 'green'
},
text: {
color: 'black',
fontWeight: 'bold'
}
}
},
'2018-03-29': {
customStyles: {
container: {
backgroundColor: 'white',
elevation: 2
},
text: {
color: 'blue'
}
}
}
}}
/>
I am usingreact-native-radio-buttons-group for radio buttons in my app. I have a bit of difficulty to paint the labels of the radio buttons in some colors. I tried the example:
{
label: 'option one',
color: '#FFFFFF',
},
but only the bullets were painted. I want to paint the labels as well.
Now I got this:
I found a solution to my problem. It is a bit hacky but works. I wrapped the labels in <Text> tags whit inline style as follows:
deliveryRadioData: [
{
id: 1,
label: (
<Text style={{color: '#FFFFFF'}}>{'option one'}</Text>
),
selected: true,
color: '#FFFFFF',
size: 16,
},
{
id: 2,
label: (
<Text style={{color: '#FFFFFF'}}>
{'option two'}
</Text>
),
selected: false,
color: '#FFFFFF',
size: 16,
},
],
};
Now the radio buttons look like this:
Check if there is labelStyle prop.
Otherwise, try react-native-btr
NOTE: This package is updated and actively maintained in
react-native-btr library. Hence, we recommend you to use this
component from react-native-btr library.
I am using react-native-material-dropdown for a form where I also use RN TextInput so I want a consistent look between both.
I want to have a black label header and a light grey underline
For Android I use underlineColorAndroid={'transparent'} and that works fine.
The problem is on iOS if I change the baseColor property, it automatically changes the dropdown arrow, the underline and the label.
How could set the color of the label and the underline separately?
import { Dropdown } from 'react-native-material-dropdown'
//...
<Dropdown
underlineColorAndroid="transparent"
label={'BILLING TYPE'}
labelFontSize={12}
labelTextStyle={styles.dropdownLabel}
itemTextStyle={styles.dropdownItem}
style={styles.dropdownMainText}
style = {{color: Colors.black}}
baseColor={Colors.black}
value={'Paper'}
data={billingTypes}
onChangeText={value => this.onEditField(value)}
/>
If I set baseColor={Colors.black} (which I want) the underline becomes black instead of grey (which I don't want).
If I set baseColor={Colors.rose}, all 3 elements change colors: label, arrow and underline.
here is my styles.js file where nothing special happens
export default StyleSheet.create({
//...
dropdownLabel: {
textTransform: 'uppercase',
color: Colors.black,
},
dropdownItem: {
fontSize: Fonts.size.tiny,
color: Colors.black,
},
dropdownMainText: {
},
});
const colors = {
black: '#252525',
rose: '#e6968f',
};
The color you would like to change in the Dropdown object is currently running in the function. You cannot set it separately because you do not specify a separate color for the underline.
/dropdown/index.js
renderRipple() {
let {
baseColor,
rippleColor = baseColor,
rippleOpacity,
rippleDuration,
rippleCentered,
rippleSequential,
} = this.props;
let { bottom, ...insets } = this.rippleInsets();
let style = {
...insets,
height: this.itemSize() - bottom,
position: 'absolute',
};
return (
<Ripple
style={style}
rippleColor={rippleColor}
rippleDuration={rippleDuration}
rippleOpacity={rippleOpacity}
rippleCentered={rippleCentered}
rippleSequential={rippleSequential}
ref={this.updateRippleRef}
/>
);
}
I found it! As explained here: https://github.com/n4kz/react-native-material-dropdown/issues/23
<Dropdown
//
inputContainerStyle={{ borderBottomColor: Colors.midGrey, borderBottomWidth: 1 }}
/>
with const colors = {midGrey: 'rgba(214, 219, 224, 1)'};
when using react-select v2, I can't figure out how to set the font of the input field..
I have tried the following:
input: (base) => ({
...base,
fontFamily: 'Arial',
fontSize: 13,
fontWeight: 500,
color: 'green'
})
the color is working accordingly but none of the other font styles are applied.
Also is there a way of setting the color of the dropdownIndicator on hover of the control?
Like:
control: (base, { isFocused }) => ({
...base,
':hover': {
### Set the dropdownIndicator Color
},
}),
I know v2 is still in beta but I would really appreciate some help :)
I am feverishly trying to make the title of a window multiline.
I have a fairly long title and need to be able to see the whole title.
Right now the title just gets cut of and has three dots if it is longer than the window allows
But I need it to break into two lines if it is too long
My current markup looks like:
/////// create first starting window ////////
var startWin = Titanium.UI.createWindow({
title: 'Some really long title that has to be wrapped',
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
titleAttributes: {
color: '#FFF',
font: {
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold',
wordWrap: true
}
}
});
Or can I maybe use a multiline label?
Anyone an idea ?
Thanx
My working code thanx to Sebastian
page_title = Ti.UI.createLabel({
text: 'Algorithmen',
height: 80,
left: 60,
right: 60,
textAlign: 'center',
color: '#fff',
font: {
fontSize: 18,
fontWeight: 'bold',
wordWrap: true
}
}),
startWin = Titanium.UI.createWindow({
titleControl: page_title,
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png'
});
You can set the window.titleControl with a label
var startWin = Titanium.UI.createWindow({
titleControl: Ti.UI.createLabel({
text:'Some really long title that has to be wrapped'
font:{
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold'
}
}),
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
});
I have never managed to do this, so I have always hidden the title bar and created my own, with android you will need to create a custom theme to hide the title bar, also there is no title bar on iOS.
I use alloy mainly and created a nav control view that I added by reference to each page, then set the title and menu options in that.