Related
I'm trying to make an area chart using apexcharts with nuxt (vue2), but the area is not getting filled, and the options i set in chartOptions for fill are getting used by the line itself instead of the area, as below:
this is my apexchart component:
<client-only>
<apexcharts
type="area"
width="70%"
ref="realtimeChart"
:options="chartOptions"
:series="series">
</apexcharts>
</client-only>
this is my chartOptions:
chartOptions: {
chart: {
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
},
},
id: "basic-bar",
colors: ["#FFA07A"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
forecastDataPoints: {
count: 28,
strokeWidth: 4,
dashArray: 5,
},
title: {
text: "doesnt matter",
align: "center",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "date",
tickAmount: 40,
},
yaxis: [
{
title: {
text: "Mt CO2eq/we",
},
forceNiceScale: true,
},
]
},
Can anyone help ?
I was declaring type: "line" in my series. thats all.
I am using vue-echarts along with Apache eCharts.
But I do not know how to load async data values.
I have looked through the examples in the docs and I still can't figure it out.
Can anyone take a look at this SFC and tell me how to update the data value inside the gaugeOption ref?
Currently the gaugeData array loads with a value of 0 and stays that way even though props.totalScore gets updated with a new value.
<template>
<vue-echarts
class="echart-container"
autoresize
:option="gaugeOption"
/>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeData = [
{
value: props.totalScore,
},
];
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeData,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
</script>
<style lang="scss" scoped>
.echart-container {
height: 300px;
max-width: 300px;
margin-top: -135px;
}
</style>
EDIT UPDATE:
I can now get the chart to load correctly using another ref and a watch of the props.
But when the props change it draws a new number ON TOP of the old one. But I need it to replace the old number.
See here how it looks on page load (this is correct):
And see here how it looks when I try to change the gaugeDataRef value (this is wrong, the value is drawn on top of the old one):
Here is the updated code:
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
Figured it out.
I needed to add a watch on the props that first clears the array and then adds the new value back into the array.
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
Trying to figure this out and I think I'm just missing something simple. I've got a few screens configured and I want to switch between tabs pending on a user action on the second screen.
Nav:
Navigation.setRoot({
root: {
bottomTabs: {
children: [
{
stack: {
id: 'rootStack',
children: [
{
component: {
name: 'dashboard',
id: 'cc.dashboard',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Home',
icon: images.bottomIconHome,
testID: 'FIRST_TAB_BAR',
text: 'Home',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
// fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
{
stack: {
id:'screen2stack',
children: [
{
component: {
name: 'program',
id: 'cc.program',
options: {
statusBar: {
visible: true,
style: 'light',
},
},
},
},
],
options: {
bottomTab: {
title: 'Program Tab',
icon: images.bottomIconProgram,
testID: 'SECOND_TAB_BAR_BUTTON',
text: 'Program',
selectedIconColor: color.WHITE,
selectedTextColor: color.WHITE,
iconColor: color.WHITE_25,
textColor: color.WHITE_25,
fontFamily: font.LATO_BOLD,
fontSize: 11,
},
bottomTabs: {
selectedTabColor: 'white',
backgroundColor: color.charcoalGreyThree,
titleDisplayMode: 'alwaysShow',
//fontSize: 10
},
topBar: {
visible: false,
},
statusBar: {
visible: true,
style: 'light',
},
layout: {
orientation: ['portrait'],
},
},
},
},
}
});
I've tried:
Navigation.popTo('cc.dashboard');
But that does nothing, so then I tried:
Navigation.push('cc.dashboard', {
component: {
id: 'cc.dashboard',
name: 'dashboard',
passProps: propsToPass ? propsToPass : {},
options: {
layout: {
backgroundColor: color.charcoalGreyThree,
componentBackgroundColor: color.charcoalGreyThree,
},
bottomTabs: {
visible: true,
backgroundColor: color.charcoalGreyThree,
},
},
},
});
That works, but it doesn't update the bottom tabs on the screen, still showing the second tab as highlighted. It also just puts the dashboard over it so you can still click on "Home" and go to the dashboard. When you go back to the second screen, it shows the dashboard still. Any thoughts would be appreciated.
Using "react-native-navigation": "^7.16.0", "react": "17.0.1", "react-native": "0.64.1", if that matters at all.
In order to change current tab index in React Native Navigation, you need to do merge options for bottomTabs option:
Navigation.mergeOptions(this.props.componentId, {
bottomTabs: {
currentTabIndex: 1
}
});
For more information, you'd recommend checking out this part in the docs - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index.
I have the following Chart Component:
<template>
<div class="gauge-chart">
<chart :options="options"></chart>
</div>
</template>
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data: () => ({
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
}),
};
</script>
As you can see I am tryng to inject chartValue and chartName props into options.series.data.value and options.series.data.name respectively.
The values for the properties are coming from
<GaugeChart chartName="Sleep" :chartValue="2" />
At the moment the values are hardcoded, but eventually they will be dynamic.
However it keep throwing the following error:
"TypeError: Cannot read property 'chartName' of undefined"
"TypeError: Cannot read property 'chartValue' of undefined"
I have done a colsole.log of both properties and they come up as "Sleep" and 2. I have also done a typeof on both property names and they both come up as String and Number, respectively.
Could somebody tell me where I am going wrong please?
Many thanks in advance.
You cannot use 'this' operator inside an arrow function so define your data section as a normal function
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data() {
return {
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
};
}
};
</script>
You should use the prop in following manner:
<GaugeChart chart-name="Sleep" chart-value="2" />
Documentation
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.
I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].
Firstly, I am using the below highcharts code in react native to develop iOS app.
I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.
Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.
To increase the width of the labels, set the right style:
xAxis: {
categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 25,
y: -22,
align: 'left',
style: {
width: '300px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/went9xmf/
API: https://api.highcharts.com/highcharts/xAxis.labels.style