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 !
Related
i want to show the percentage at the chart, i tried to use tooltips but it's not working.
i'm using vue 2
polar chart
the code:
Codesandbox
polarChart: { options: { responsive: true, maintainAspectRatio: false, responsiveAnimationDuration: 500, yaxis: { show: true,
},
legend: { position: 'right', labels: { padding: 25, boxWidth: 10, showActualPercentages: true, fontSize: 15,
},
}, tooltips: { callbacks: { shadowOffsetX: 1, shadowOffsetY: 1, shadowBlur: 8,
},
}, scale: { scaleShowLine: true, scaleLineWidth: 1, ticks: { display: false,
}, reverse: false, gridLines: { display: false,
},
}, animation: { animateRotate: false,
},
},
chartData: { labels: ['Africa', 'Asia', 'Europe'],
The data -----
datasets: [
{ label: 'Population (millions)', ba
ckgroundColor: [
'#836AF9',
'#ffe800',
'#28dac6',
'#ffe802',
'#FDAC34',
'#299AFF',
'#4F5D70',
'#2c9aff',
'#84D0FF',
'#EDF1F4',
], data: [3141, 3132, 2112],
borderWidth: 0,
},
],
},
i tried to use tooltips but it does not working.
i want that the chart show the percentage and the value.
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??
I'm trying to represent in a real timeline chart the input from a user's microphone in hertz (corresponding to each musical note from the second octave to the 6th). I'm trying to achieve something like: this
Right now I got: this. If I use the formatter function I get: this.
My problem is that I need to replace the hertz value for the octave scale (A2, B2, C2, D2, E2, F2, G2 and so on) on the Y-axis.
My config:
const initialOptions = {
chart: {
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 20,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: true,
type: "x",
autoScaleYaxis: true,
zoomedArea: {
fill: {
color: "#90CAF9",
opacity: 0.4,
},
stroke: {
color: "#0D47A1",
opacity: 0.4,
width: 1,
},
},
},
},
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
width: 0.99,
opacity: 1,
},
markers: {
size: 0,
},
plotOptions: {
bar: {
horizontal: false,
},
},
legend: {
show: false,
},
dataLabels: {
offsetX: 0,
enabled: true,
},
xaxis: {
show: true,
categories: [0],
tickAmount: 10, // optional tickAmount value
},
};
And I have tried updating the options on a useEffect like this:
yaxis: {
tickAmount: 1,
labels: {
enabled: true,
formatter: function (val, index) {
return currentNote; // This prints the same output on each line of the Y axis as in picture 2
},
},
},
I've been stuck on this for days now and I'm not sure if I should move on to another library. Any suggestions welcomed!
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';
}
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