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,
},
},
],
});
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0
I am creating simple bar chart using Chartjs in Vue
<bar-chart
:data="[40, 19, 3, 5,]"
:labels="['0-30 days', '31-60 days', '61-90 days', '90+']"
:colors="['blue', 'blue', 'blue', 'blue']"
></bar-chart>
and the code for this is
createChart(chartData: object) {
const canvas = document.getElementById('bar') as HTMLCanvasElement;
const myopt = {
deferred: {
xOffset: '50%',
delay: 250,
},
plugins: {
datalabels: {
align: 'top',
anchor: 'end',
color: 'blue',
},
},
legend: {
display: true,
},
title: {
display: true,
text: 'Chart.js - Different Bar Colors',
},
tooltips: { enabled: true },
responsive: true,
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '',
},
offset: false,
color: 'rgba(0, 0, 0, 0)',
gridLines: {
drawOnChartArea: false,
},
}],
yAxes: [{
id: 'y-axis-0',
mirror: false,
stacked: true,
offset: false,
callback(label:any, index:any, labels:[]) {
return `${label}%`;
},
ticks: {
beginAtZero: true,
min: 0,
},
gridLines: {
display: true,
color: 'rgba(0, 0, 0, 0)',
drawOnChartArea: false,
},
}],
},
};
const options = {
type: 'bar',
data: chartData,
options: myopt,
};
new Chart(canvas, options);
}
the chart which this is generating is not equidistant sharing image for reference
position and width of the bar is incorrect and also I want to know if there is any way by which i can customize labels for y axis e.g. instead of 40,35,30... it will be ** 40k,35k,30k** in y axis
If any one has worked on this case please help
You can make use of the tick callback for your K at the end (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats)
var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
type: 'bar',
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: (val) => (val + 'k')
}
}]
},
legend: {
display: false,
labels: {
fontSize: 20,
fontColor: '#595d6e',
}
},
tooltips: {
enabled: false
}
},
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
backgroundColor: "#5e63b4",
data: [20, 30, 40, 50, 60]
}]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="stack-chart" width="1360" height="450"></canvas>
How can I remove yAxis from react-native-wrapper and also I want to have custom label at yAxis. As there is no proper documentation for react-native for each component of react-native-wrapper. I want Line chart to work like Gantt Chart.
constructor(props) {
super(props);
this.state = {
data: {
dataSets: [{
values: [{ y: 130 }, { y: 130 }, { y: 130 }, { y: 130 }, { y: 130 }],
label: 'Company Z',
valueTextColor:processColor('cyan'),
config: {
lineWidth: 1,
drawCubicIntensity: 0.4,
circleRadius: 5,
drawHighlightIndicators: false,
color: processColor('blue'),
drawFilled: true,
fillColor: processColor('blue'),
fillAlpha: 45,
circleColor: processColor('blue'),
textColor: processColor('cyan'),
}
}],
},
xAxis: {
valueFormatter: ['4 Jul', '5 Jul', '6 Jul', '7 Jul','8 Jul','9 Jul','10 Jul','11 Jul','12 Jul','13 Jul'],
textColor: processColor('red'),
},
yAxis: {
textSize:30
},
legend: {
enabled: true,
textColor: processColor('blue'),
textSize: 12,
position: 'BELOW_CHART_RIGHT',
form: 'SQUARE',
formSize: 14,
xEntrySpace: 10,
yEntrySpace: 5,
formToTextSpace: 5,
wordWrapEnabled: true,
maxSizePercent: 0.5,
custom: {
colors: [processColor('red')],
labels: []
}
},
marker: {
enabled: true,
backgroundTint: processColor('teal'),
markerColor: processColor('#F0C0FF8C'),
textColor: processColor('white'),
}
};
// if you want to listen on navigator events, set this up
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
render(){
return(
<View style={styles.container}>
<LineChart
style={styles.chart}
data={this.state.data}
description={{ text: '1111111' }}
legend={this.state.legend}
marker={this.state.marker}
xAxis={this.state.xAxis}
drawGridBackground={true}
borderColor={processColor('teal')}
borderWidth={1}
drawBorders={true}
touchEnabled={true}
dragEnabled={true}
scaleEnabled={true}
scaleXEnabled={true}
scaleYEnabled={true}
pinchZoom={true}
doubleTapToZoomEnabled={true}
dragDecelerationEnabled={true}
dragDecelerationFrictionCoef={0.99}
keepPositionOnRotation={false}
onSelect={this.handleSelect.bind(this)}
/>
</View>
)
yAxis props
yAxis: PropTypes.shape({
left: PropTypes.shape(yAxisIface),
right: PropTypes.shape(yAxisIface)
}),
you can use like this
yAxis: {
left: {
axisLineColor: processColor(AXIS_LINE_COLOR),
gridColor: processColor(AXIS_LINE_COLOR),
labelCount: 6,
labelCountForce: true,
},
right: {
enabled: true,
drawLabels: false,
drawAxisLine: true,
axisLineColor: processColor(AXIS_LINE_COLOR),
drawGridLines: false,
}
}
I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!