We Keep Coding

how do I refresh new data in ApexCharts?

anyone can help me to solve my case, well I have an ApexCharts for show the data that can be refreshed whenever user want to and the data should be change to the updatest datas.
but I dont have idea how to reload the data ini ApexCharts
this my script
var options = {
series: [{
name: 'Stock Value',
type: 'column',
data: val_data_1
}, {
name: 'Actual Value',
type: 'column',
data: val_data_2
}, {
name: 'difference',
type: 'line',
data: val_data_3
}],
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'XYZ - Stock Opname',
align: 'left',
offsetX: 110
},
xaxis: {
categories: categories,
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Stock Value",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Income',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Actual Value",
style: {
color: '#00E396',
}
},
},
{
seriesName: 'Revenue',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#FEB019'
},
labels: {
style: {
colors: '#FEB019',
},
},
title: {
text: "Differences",
style: {
color: '#FEB019',
}
}
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
i've have to hear for use the chart.UpdateSeries() but in my case I dnt know how to use it

Indeed, you have to use the updateSeries() method. It is documented here: Methods – ApexCharts.js
To help you, I give you an example with updateSeries() using a simple button. When you click on it, random integers are generated in the data array. The series is then updated accordingly.
let options = {
series: [{
name: 'Series',
data: [1, 7, 3]
}],
chart: {
type: 'line',
height: 350
},
dataLabels: {
enabled: false
},
xaxis: {
categories: ['Category 1', 'Category 2', 'Category 3']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
function getRandomNumber() {
return Math.floor(Math.random() * 10);
}
document.querySelector('button').addEventListener('click', () => {
chart.updateSeries([{
data: [getRandomNumber(), getRandomNumber(), getRandomNumber()]
}])
});
button {
padding: 10px;
color: white;
background-color: #0d6efd;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
color: black;
background-color: #0dcaf0;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<button type="button">Update series</button>

ECharts how to set different symbol for different marklines in one chart

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.
When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.
markLine: {
symbol:"none",
data:[]
}
function format(data)
{
data = parseFloat(data);
return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
var columns_basic_element = document.getElementById("columns_basic");
// Basic columns chart
if (columns_basic_element) {
// Initialize chart
var columns_basic = echarts.init(columns_basic_element);
var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53];
var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22];
//
// Chart config
//
// Options
columns_basic.setOption({
// Define colors
color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 90,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Parts', 'Labor'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return '$' + Intl.NumberFormat().format((value/1000));
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Labor',
type: 'bar',
data: data_labor,
label: {
normal: {
formatter: function (params) {
var val = format(params.value);
return val;
},
show: true,
//position: 'inside'
},
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
symbol:"none",
data: [
{
// I want to set symbol:none for this line only
name: 'test',
yAxis:120000 ,
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
},
{
//keep its original style
type: 'average',
name: 'Average',
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
}]
}
}
]
});
}
.chart-container {
position:relative;
width:100%;
}
.chart {
position:relative;
display:block;
width:100%;
}
.has-fixed-height {
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div class="chart-container">
<div class="chart has-fixed-height" id="columns_basic"></div>
</div>

I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:
Base Concepts
MarkerModel.js
MarkLineView.js
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
data: ["1", "2", "3", "4", "5", "6"]
},{
data: ["1", "2", "3", "4", "5", "6"],
show: false,
}],
yAxis: {},
series: [
{
name: 'Series1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'none',
name: 'max line',
type: 'max',
lineStyle: {
normal: {
type:'solid',
color: 'blue',
}
},
}],
}
},{
name: 'Series2',
type: 'bar',
data: [0,0],
xAxisIndex: 1,
label: { show: false },
markLine: {
symbol: 'none',
data: [{
yAxis: 24,
label: {
normal: {
show: false,
}
},
lineStyle: {
normal: {
type:'dashed',
color: 'green',
}
},
}],
}
}]
}
myChart.setOption(option);
<div id="main" style="width: 600px;height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

You have mistake with incorrect symbol declaration, do like this:
markLine: {
symbol: 'icon' // <---- it's wrong
data: [{
symbol: 'diamond', // <---- it's right
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
var myChart = echarts.init(document.getElementById('main'));
// Unsert your code below
var option = {
xAxis: {
data: ["1", "2", "3", "4", "5", "6"]
},
yAxis: {},
series: [{
name: 'Series1',
stack: '1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'diamond',
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
}]
}
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Change color of single bar in apex chart

I've some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();

You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],

You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.

colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}

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

echarts line between grouped bar chart

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: ...
}
}