We Keep Coding

Dynamic Positioning of Label in Responsive react-echarts

I have a react web application using echarts-for-react. I've set values that accurately reflect my UI requirements but the problem started when I made it responsive. The position, offset and distance for label are fixed numeric values and not percentage. So when I resize the screen and therefore chart also. The label position gets changed. Is there any way to fix it so that on changing the size, the position of label is changed properly without getting misplaced ???
`
import ReactEcharts from "echarts-for-react"
var builderJson = {
"all": 100,
"total": 1000,
"charts": {
"A": 10,
"B": 20,
"C": 30
},
};
const options = {
grid: {
containLabel: true,
height: '60%'
},
xAxis: {
show : false,
type: 'value'
},
yAxis: {
data: Object.keys(builderJson.charts),
type: 'category',
axisLabel: {
show: false,
},
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false,
}
},
series: [
{
color: 'blue',
type: 'bar',
barCategoryGap: '10%',
barWidth: '40%',
stack: 'total',
groupPadding: 3,
label: {
color: 'black',
position: [0, -16],
formatter: function(param) { return param.name },
show: true
},
itemStyle: {
borderRadius: [0, 2, 2, 0],
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
barWidth: '40%',
stack: 'total',
barCategoryGap: '10%',
color: 'whitesmoke',
groupPadding: 3,
label: {
show: true,
distance: 15,
position: 'insideBottomRight',
offset: [-50, 0],
color: 'grey',
formatter: function(params) { return builderJson.all - params.value + '%' }
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'total',
barWidth: '40%',
barCategoryGap: '10%',
color: 'whitesmoke',
groupPadding: 3,
label: {
show: true,
position: 'insideBottomRight',
offset: [20,-10],
formatter: function(params) { return builderJson.total }
},
data: Object.keys(builderJson.charts).map(function (key) {
return 0;
})
}
]
}
function App() {
return (
<ReactEcharts
option={options}
style={{
width: "100%", height: "100vw"
}}
></ReactEcharts>
)
}
export default App
`
Gives following output in certain height and width scaling :-
But when the height changes, the label get placed in wrong part :-
Any help on how to fix this??

Selection zoom not working for Area chart in Apexchart for React Js

I have implemented an Area Chart using Apexchart for React Js. I have set options using useState. When I am updating the options by updating the state. When I am using selection zoom, the charts get zoomed and then gets reset within less than a second. Can someone help me with it? Thanks in advance.
setOptions1({
dataLabels: {
enabled: false,
},
chart: {
id: 'chartId1',
width: "100%",
zoom: {
enabled: true,
type: 'x',
// autoScaleYaxis: true,
},
toolbar: {
show: true,
tools: {
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: openModal ? [] : [{
icon: `<img src=${fullScreen} width="13">`,
index: 6,
title: 'full screen',
class: 'custom-icon-css',
click: function (chart, options, e) {
setOpenModal(true);
setOpenModalAreaChart(true);
setModalChartdata(options.globals.chartID)
}
}]
},
autoSelected: 'zoom'
},
},
xaxis: {
categories: year1,
min: 1,
max: 17
},
yaxis: [
{
title: {
text: 'Scale: in Millions ($)',
style: {
color: "rgb(55, 61, 63)",
fontSize: " 13px",
fontWeight: "400",
fontFamily: 'Montserrat, sans- serif'
},
},
},
],
legend: {
show: true,
showForSingleSeries: true
},
tooltip: {
y: {
formatter: function (val, index) {
return '$' + val;
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
},
responsive: [
{
breakpoint: 650,
options: {
chart: {
width: '50%'
}
},
},
{
breakpoint: 500,
options: {
chart: {
width: '30%'
}
},
}
],
})
}

ReferenceError: SGMax1 is not defined at eval (dashboard.v1.vue?88bf:1134) in Vue.js

I am using highcharts to display data from MySQL database using PHP.
here is my code
CustomGauge.vue
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: [
"data",
"title",
"name",
"min",
"max",
"format",
"text",
"x",
"y",
"target",
"targetFormat"
],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: "Segoe UI Light",
fontSize: "22px"
},
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: "#f2f2f2"
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
}
},
{
data: this.target,
dataLabels: {
enabled: true,
format: this.targetFormat,
verticalAlign: "top",
borderWidth: 0
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%"
}
}
]
}
};
},
};
I call it in my page like this
<CustomGuage
class="guage"
:title="guageTitle1"
:data="gaugeData1"
:format="gaugeFormat2"
:target="gaugeTarget1"
:max="SGMax1"
:targetFormat="targetFormat2"
/>
In the methods, i get the data from MySQL like this
axios
.get("http://localhost/intranet-php/SG1-max.php" + "?action=fetch-all")
.then(response => {
console.log(response.data);
//var x = JSON.parse(response.data)
var x = response.data;
console.log( x);
this.SGMax1.push(x);
console.log(SGMax1);
})
.catch(function(error) {
console.log(error);
});
I have even initialized it in data() like this -
SGMax1: [],
I get the error,
ReferenceError: SGMax1 is not defined at eval (dashboard.v1.vue?88bf:1134)
I used the exact methods to get other data and it works fine. The php file also works fine as i can see the correct output in the console. Its only for this particular one i get the error. Am i defining it wrong in the chart component? Thanks for the help in advance

Apex Chart Line Graph not showing data label only on first month

For some reason, the data label isn't being displayed on my line graph by ApexChart.
Seems like the chart's JS is relatively simple:
var options = {
chart: {
height: 380,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
},
dropShadow: {
enabled: true,
top: 10,
left: 0,
bottom: 0,
right: 0,
blur: 2,
color: '#45404a2e',
opacity: 0.35
},
},
colors: ['#1ecab8', '#56b9db', '#ffb66e', '#eb3131', '#373d3f'],
dataLabels: {
enabled: true,
},
stroke: {
width: [3, 3, 3, 3, 3],
curve: 'smooth'
},
series: [{
name: "Informational",
data: [5,10,15,20]
},
{
name: "Low",
data: [2,3,4,5]
},
{
name: "Medium",
data: [9,0,2,3]
},
{
name: "High",
data: [1,2,3,4]
},
{
name: "Critical",
data: [0,0,0,10]
}
],
title: {
text: 'Reported Findings',
align: 'left',
style: {
fontSize: "14px",
color: '#ffffff'
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.2
},
borderColor: '#f1f3fa'
},
markers: {
style: 'inverted',
size: 6
},
xaxis: {
categories: <%= raw #series_months %>,
axisBorder: {
show: true,
color: '#bec7e0',
},
axisTicks: {
show: true,
color: '#bec7e0',
},
},
yaxis: {
min: 0,
max: 50
},
legend: {
position: 'top',
horizontalAlign: 'right',
floating: true,
offsetY: -25,
offsetX: 5
},
responsive: [{
breakpoint: 600,
options: {
chart: {
toolbar: {
show: false
}
},
legend: {
show: false
},
}
}]
}
var chart = new ApexCharts(
document.querySelector("#<%= #chart_id %>"),
options
);
chart.render();
What am I missing that is causing this to not display correctly? It doesn't make sense because if I change one of the first arrays from a 9 to a 10, then it shows up just fine:

Fixed this by updating the apexchart version from 3.15.6 to 3.19.3

Passing data from external js file to vue component

I'm trying to pass data from external data.js file to the component so that it can be used in it.
However I'm getting error that the data is not defined.
Here is my data.js file
const data = [
{
chartOptions: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[100, 221, 250, 300, 411]]
},
{
name: "Company name",
color: "yellow",
type: "scatter",
data: [[0, 200]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
},
{
chartOptions2: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[120, 231, 222, 320, 321]]
},
{
name: "Company name 2",
color: "yellow",
type: "scatter",
data: [[0, 210]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
}
];
export default data;
And here is the component where I need to use data:
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
<highcharts class="hc" :options="chartOptions2" ref="chart"></highcharts>
</div>
</template>
<script>
import data from "./data.js";
export default {
data () {
return {
data
}
}
};
</script>
You can also try this on codesandbox

Convert your data.js to object (now it's an array):
const data = {
chartOptions: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[100, 221, 250, 300, 411]]
},
{
name: "Company name",
color: "yellow",
type: "scatter",
data: [[0, 200]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
},
chartOptions2: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[120, 231, 222, 320, 321]]
},
{
name: "Company name 2",
color: "yellow",
type: "scatter",
data: [[0, 210]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
}
export default data;
Then in your component:
import data from "./data.js";
export default {
data () {
return {
chartOptions: data.chartOptions,
chartOptions2: data.chartOptions2,
}
}
};

You should specify the key/value pair as follows :
data() {
return {
charts:data
};
},
and in the template access the items of the charts array :
<div>
<highcharts class="hc" :options="charts[0].chartOptions" ref="chart"></highcharts>
<highcharts class="hc" :options="charts[1].chartOptions2" ref="chart2"></highcharts>
</div>