I'm using a Chart component from react-google-charts and I'd like to put it in a mdx page and adjust its colors to the page colors. What's the best way to get the color and backgroundColor?
Here is my chart:
<Chart
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
['A', '1'],
['B', '2'],
['C', '3'],
]}
options={{
title: 'Graphic view',
chartArea: { left: 0 },
backgroundColor: {*** Here I want to use the page's default background color ***},
colors: [{*** Here I want to use the page's default text color ***}],
}}
legendToggle
/>
Related
I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.
I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.
Has anybody else ever run into this and found a solution?
I have been using this site as a resource for years and never asked a question. I can't figure this one out.
The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to be able to display the legend.
Code snippets and screenshot of graph below:
<template>
<div class="standard_div">
<!-- Begin chart component of graph -->
<v-chart v-if="showChart" :options="chartOptionsBar"/>
<!-- End chart component-->
</div>
</template>
<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>
chartOptionsBar = {
xAxis: {
// The data for the series
data: this.xAxisSeries,
// Parameters for the x axis
name: this.x_axis,
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 20, 20, 20],
fontWeight: 'bold',
}
},
yAxis: {
// Parameters for the x axis
name: this.y_axis,
nameLocation: 'middle',
nameTextStyle:{
padding: [25, 25, 25, 25],
fontWeight: 'bold',
}
},
series: [
{type: 'line', data: this.yAxisSeries},
],
legend:{
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
width: '50%',
orient: 'horizontal',
lineHeight: '56',
padding: 25,
type: 'plain',
zlevel: 20,
data: ["item0"]
},
title:{
show: true,
text: this.graphTitle,
x: 'center',
textStyle: {
fontSize: 20,
}
},
};
The link includes an image of the graph that was produced from the options bar above.
I had the same problem and importing the legend using
import 'echarts/lib/component/legend'
in my component worked for me!
Try to play with positioning props
I am trying desperately to change the color used to underline the selected tab in the NativeBase element Tab https://docs.nativebase.io/Components.html#tabs-def-headref . So fare I have been able to change the text color of the selected element to red but there seems to be no way of doing it for the underlings blue bar.
here is The Vue native template which can use every react native element.
<template>
<nb-container :style="{flex:1, backgroundColor: '#fff'}">
<header v-bind:title="title" ></header>
<nb-tabs>
<nb-tab :heading="heading1" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<actualitesVue v-bind:navigation= "navigation" > </actualitesVue>
</nb-tab>
<nb-tab heading="Dossiers" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<dossiersVue v-bind:navigation= "navigation" > </dossiersVue>
</nb-tab>
</nb-tabs>
</nb-container>
here is the prop
data: function () {
return {
heading1: "Actualités",
title : "INFOS",
tabStyle : {backgroundColor: "white"},
activeTabStyle : {backgroundColor: "white"},
textStyle : {color: "rgba(189,40,26,0.6)"},
activeTextStyle : {color : "rgba(189,40,26,1)", fontSize: 20 },
}
},
And the result is close to this. My point is about the blue line:
Simply you can change :
<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>
I am using high charts, In that how to have legends vertically aligned legends with more columns(instead of having a navigation for legends), js
fiddle
https://jsfiddle.net/aarthi_101/ruw8t3p9/6/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
itemMarginBottom: 5
}
You can achieve that look of the legend with a help of a little trick. Change the type of the legend to floating and set spacingRight to create the space for the legend. Notice that it's done with the default horizontal layout. legend.width & legend.itemWidth allow you to make sure that 2 columns will be used (width / itemWidth has to be higher or equal to 2 and lower than 3). legend.x adjusts the position of the whole legend.
chart: {
marginRight: 200,
(...)
},
legend: {
floating: true,
align: 'right',
itemMarginBottom: 5,
width: 180,
x: 25,
itemWidth: 90
},
Live demo: https://jsfiddle.net/BlackLabel/avo0cgnt/
API reference: https://api.highcharts.com/highcharts/
I am using the names property to label a scatter chart legend. I have not been able to find a way to only show the legend for only data14, data15, data16 and data17 and hide the legend elements for data1 through data13.
data1 through data13 will always be the same, data14 through data17 could expand or collapse in number and the label text will change.
names: {
data1: '2%',
data2: '5%',
data3: '10%',
data4: '15%',
data5: '20%',
data6: '25%',
data7: '30%',
data8: '35%',
data9: '40%',
data10: '45%',
data11: '50%',
data12: '55%',
data13: '60%',
data14: 'Oracle',
data15: 'HP',
data16: 'MS',
data17: 'Oracle'
},
Set your chart legend not visible:
legend: {
show: false
}
Then, make the legend visible only with elements you want:
chart.legend.show(['data14', 'data15', 'data16', 'data17'])
Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??
My Code :
var bottomCar=new Ext.Panel({
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
flex:1
},
items: [bottomCar0,bottomCar1,bottomCar2]
});
how can i change the defaults??
Thnaks
Sneha
The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.
Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.
What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.
You can set inside the defaults the height and width, if all of them will get the same values
defaults:{
height: 200,
width: 300
}
or set to each item its height and width
items: [
{
title: 'Home',
iconCls: 'home',
height: 200,
width: 300
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen',
height: 100,
width: 150
}
]
More on Flex
Shlomi.
OR you can add "cls" to your panel and adjust it in css file.