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??
Related
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%'
}
},
}
],
})
}
I want to change the background color in echarts like that:
The dotted line is the average serie. I want to color the first serie when the value exceed the average but I don't find what to use on the documentation.
My options options are like that for now, but only one color because I don't know how to do it
options() {
return {
xAxis: {
type: 'time',
zlevel: 2,
boundaryGap: false,
splitLine: {
show: true,
},
axisLabel: {
formatter(value) {
return format(new Date(value), "HH'h'mm", {
locale: fr,
})
},
inside: true,
color: '#000',
},
axisTick: {
alignWithLabel: true,
inside: true,
},
min: startOfDay(new Date()),
max: endOfDay(new Date()),
interval: 3600000 * 3, // 3 hours in milliseconds
},
yAxis: {
show: false,
type: 'value',
},
series: [
{
data: this.dataMeasures,
type: 'line',
smooth: true,
areaStyle: {
color: '#FDD835',
},
lineStyle: {
width: 0,
},
},
{
data: this.dataAverage,
type: 'line',
smooth: true,
lineStyle: {
color: '#000',
type: 'dashed',
},
},
],
grid: [
{
left: 0,
right: 50,
bottom: 0,
top: 0,
containLabel: true,
},
],
}
}
Any idea to do that ?
Thank you !
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
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
I am trying to make the data grouping more obvious in my chart:
I would like a line to go through the middle to indicate that they are two different data sets. However i am not quite sure how to do it.
Here is my code for generating the chart:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {
axisLine: {
show: true
},
axisTick: {
show: true
},
axisLabel: {}
},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
formatter: '{c0}'
},
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
tooltip: {
formatter: '{c0}'
},
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
What can I try next?
I think what you are looking for is a splitLine.
Just enabled splitLine on your xAxis and style it accordingly.
xAxis: {
splitLine: {
show: true,
lineStyle: ...
}
}