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!
Related
I have problem with my chart, I want to my Pie chart use specific color for specific label, for example :
if label is "Bekerja" then chart color is #2489FF
here is my code :
var options = {
chart: {
type: "donut",
fontFamily: 'inherit',
height: 260,
sparkline: {
enabled: true
},
animations: {
enabled: true
},
},
fill: {
opacity: 1,
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
showAlways: true,
show: true
}
}
},
distributed: false,
}
},
colors: ["#2489FF", "#FFC149"],
series: jumlah,
labels: nama_status,
}
does anyone can help? thank you.
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 am trying to change ApexChart tooltip background colors but i couldn't do it.
They aren't same with the series colors. I tried set fillSeriesColor to true but it didn't worked, i don't know why.
Also I couldn't find the default colors to change them from css file, there is so confusing. Something must be going wrong.
My donut option codes are below, please help.. :)
var options = {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800'],
series: time,
labels: name,
chart: {
width: 350,
height: 280,
type: 'donut',
},
cutoutPercentage: 75,
responsive: !0,
maintainAspectRatio: !1,
cutout: "75%",
title: {
display: !1
},
fill: {
colors: ['#3699FF', '#DEF2EB', '#19C5BD', '#FEE7DD', '#FEA800']
},
animation: {
animateScale: !0,
animateRotate: !0
},
tooltip: {
fillSeriesColor: true,
x: {
fillSeriesColor: true
},
y: {
fillSeriesColor: true
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
plugins: {
legend: {
display: !1
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
width: 0,
dashArray: 0,
},
plotOptions: {
pie: {
donut: {
size: "85%",
labels: {
show: true,
name: {
color: "#000000",
show: true
},
value: {
color: "#000000",
show: true
},
total: {
fontSize: "12px",
color: "#000000",
show: true,
label: 'testing'
}
}
}
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
};
Is there any way to give padding from the Y-axis so that there is a gap from the gridlines? I achieved this with a transparent border and ticks border. Also, How Can I customize the length of the tick indicator.
Targeted Graph Design => https://i.ibb.co/gFJVyBQ/image.png
Current Graph Design => https://i.ibb.co/LNtgTtT/image.png
my graph config code:
const config = {
type: "line",
data: data,
options: {
animations: {
tension: {
duration: 1000,
easing: "linear",
to: 0.3,
from: 0,
},
},
interaction: {
intersect: false,
},
elements: {
point: {
radius: 1,
hoverRadius: 4,
hitRadius: 10,
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: externalTooltipHandler,
},
},
scales: {
yAxes: {
grid: {
color: "#ACB8BE",
borderColor: "rgba(0,0,0,0)", //transparent border
},
position: "right",
//How to add padding to this AXES?
min: 1.0,
max: 2.0,
ticks: {
stepSize: 0.1,
padding: 30, //padding form the axis
//How to customize the length of the ticks indicator?
},
},
xAxes: {
grid: {
offset: true,
display: false,
},
},
},
},
};
I have tried creating new custom axes but didn't find any luck there. Can anyone suggest to me how to add this customization?
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