I have created a chart with chartjs which is a line chart with time on the X-axis.
I have added that chartjs zoom plugin and set the minRange such that a user can not zoom in past 7 days. I am trying to do the same with zooming out, but I want to limit it to 30 days. I have tried changing the min/max values for the zoom limits, but no luck.
I am using the date-fns adapter (chartjs-adapter-date-fns) and the subDays() and addDays() functions from the date-fns package
Here is my config:
{
type: "line",
data: {
datasets: [
{
data: data,
fill: true,
pointRadius: 3,
},
],
},
options: {
responsive: true,
adapters: {
date: {
locale: enUS,
},
},
scales: {
y: {
grid: {
display: true,
drawTicks: false,
},
ticks: {
callback: (value: number) => {
if (value === 0) return "";
return Math.round(value).toLocaleString();
},
},
},
x: {
type: "time",
min: subDays(maxDate, 30),
max: maxDate,
ticks: {
source: "auto",
autoSkip: true,
minor: {
enabled: true,
fontStyle: "normal",
},
major: {
enabled: true,
fontStyle: "bold",
},
},
},
},
plugins: {
zoom: {
limits: {
y: {
min: 0,
},
x: {
minRange: 7 * 24 * 60 * 60 * 1000,
min: minDate,
max: maxDate,
},
},
pan: {
drag: true,
mode: "xy",
enabled: true,
},
zoom: {
mode: "x",
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
},
},
},
},
}
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 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 built a line chart & a bar chart in Chartjs with exactly the same configuration, but for some reason the x-scales of both charts are different as you can see in the picture below.
The configuration for the both charts is the same, the only difference is the chart type:
function getOptions() {
return {
animation: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: false,
legend: {
display: false
},
title: {
display: false
}
},
elements: {
line: {
fill: true
},
point: {
radius: 0
}
},
scales: {
x: {
type: "time",
time: {
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH'
},
unit: 'minute',
stepSize: 1,
min: '00:00:00',
max: '23:59:59',
},
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
color: function(context) {
return '#fff';
},
}
},
y: {
beginAtZero: true,
grid: {
display: true,
drawBorder: false,
color: function(context) {
return '#fff';
},
},
}
}
};
}
I noticed that the x axes do align perfectly, if I set the "stepSize" to 'seconds'. This probably has to do with the fact that the data inserted into the chart is second-data.
This is because the bar chart sets the offset property on the x axis scale to true.
https://www.chartjs.org/docs/3.8.0/axes/cartesian/category.html#common-options-to-all-cartesian-axes
So to align them you either have to set it to false for the bar chart or to true for the line chart
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'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!