I have a problem with ApexChart in React. It does not show decimal numbers in the labels of the x-axis and repeats integers instead. It seams like it rounds in the integer. However when go with mouse on the bar it shows the correct value (maybe because of the tooltip I added). Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.
this.state = {
options: {
chart: {
height: '600',
type: 'rangeBar',
toolbar: {
show: true,
autoSelected: 'selection'
},
},
plotOptions: {
bar: {
horizontal: true,
}
},
legend: {
position: 'right'
},
xaxis: {
type: 'numeric',
title: {
text: 'ms'
},
labels: {
show: true
},
decimalInFloat: 3,
},
tooltip: {
custom: ({ dataPointIndex, w }) => {
let s = w.config.series[0].data[dataPointIndex];
return `<div class="apexcharts-tooltip-rangebar"><div>
<span class="category">${s.x}: </span>
<span class="value start-value">${s.y[0]}</span>
<span class="separator">-</span>
<span class="value end-value">${s.y[1]}</span></div></div>`;
}
},
},
series: [
{
data: []
}
],
}
Add formater for xaxis to round to decimal place you want
xaxis: {
...
labels: {
formatter: function (val) {
return val.toFixed(1);
}
}
},
Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.
Set max value in xaxis
Related
I am using basic timeline chart of Apexcharts in React application, where the data contains decimal numbers (e.g: data = [{"x":"TaskData0link_Node0_Node1","y":[0.0,0.05]}].
However when I enter the bars with the mouse I can only see values that are rounded . In this case: 0-0.
Is it somehow possible to display the real values (0-0.05)? And not round it to integer.
The options that I use:
options: {
chart: {
height: 350,
type: 'rangeBar',
toolbar: {
show: true,
autoSelected: 'selection'
},
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'numeric',
title: {
text: 'in ms'
},
labels: {
show: true
},
decimalInFloat: 3,
},
},
Thank you in advance!
Use this custom tooltip
tooltip: {
custom: ({ dataPointIndex, w }) => {
let s = w.config.series[0].data[dataPointIndex];
return `<div class="apexcharts-tooltip-rangebar"><div>
<span class="category">${s.x}: </span>
<span class="value start-value">${s.y[0]}</span>
<span class="separator">-</span>
<span class="value end-value">${s.y[1]}</span></div></div>`;
}
},
//There are two ways for its solution :-
`1) options.yaxis: {
labels: {
formatter: function(value) {
return "$" + value.toFixed(2);
}
},
tickAmount: 5,
min: 0,
max: 'Your Y axis maximum value here like 5000',
}
2) options.yaxis: {
tickAmount: 5,
`enter code here`
min: 0,
max: 'Your Y axis maximum value here like 5000',
decimalsInFloat: 2
}`
Value shows on Y axis using Apex Chart
I'm trying to highlight a specific part in a graph by date. The graph is dates in X axis and value in Y axis. I tried doing like this example but I get the error TypeError: Cannot read properties of undefined (reading 'coord')
This is my graph's code:
{
xAxis: {
type: "category",
data: xaxis,
show: true,
axisLabel: {
formatter: function(params:any){
return (new Date(params)).toLocaleString('pt-BR')
}
}
},
yAxis: {
type: "value",
name: 'Eficiência de Consumo (Nm³/ton)',
axisLabel: {
formatter: '{value}'
}
},
dataZoom: [
{
type: 'inside'
}
],
tooltip: {
trigger: "axis",
formatter: function(params:any){
const seriesName = params[0].seriesName
const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
const eficiencia = params[0].value
return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
},
axisPointer: {
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
orient: 'horizontal',
top: 'top'
},
visualMap: {
show: false,
pieces: [
{
min: startAlertTime,
max: endAlertTime,
color: '#FBDB0F'
}
]
},
series: [{
data: yaxis,
name: 'Eficiência de Consumo',
type: "line",
}]}
startAlertTime and endAlertTime are ISO timestamps like so '2022-06-13T10:42:22.772Z'. I'd like to highlight the graph between those two points. This is my graph with no VisualMap:
Graph with no visualmap
This is what I'd like to do based on the timestamps on the X axis:
Desired output
visualMap is going to color the line. If you want to color an area (like in your desired output), you'll have to use series.markArea. Both are used on the example you gave.
I try to make a scatter plot using React-ChartJS-2. The basic setting gives only the values of the x-value and the y-value of the point in the plot. Is there any way to show the label for the point in the plot?
I lookup around and found the code seemed to work, but it did not.
const optionsScatterPlot = {
plugins: {
tooltip: {
callbacks: {
title: function (tooltipItem:any, data:any) {
const dataLabel = dataScatterPlot.labels[tooltipItem.index];
return dataLabel;
}
}
},
},
};
const Scatter = () => {
return (
<div>
<Box maxWidth="lg" margin="auto" >
AdEfficiency
</Box>
<Scatter options={optionsScatterPlot} data={dataScatterPlot} />
</div>
)
}
Add label title to either of the axes like so:
const options = {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'label for Y'
}
},
x: {
beginAtZero: true,
title: {
display: true,
text: 'label for X'
}
},
},
};
the text property is the text label to be displayed on the axes. 'options' variable is what you pass to the options prop.
I've been trying to figure out how to create a line chart that plots data in this
format {x:time,y:data}.
Basically exactly like this post.
How can I create a time series line graph in chart.js?
Problem is it that i can't manage to get it to work using the react-chartjs2 library.
Below is my code and a link to a image of my graph.
class Grafer extends Component {
constructor(props) {
super(props);
this.state = {};
}
data = {
datasets: [
{
label: 'time-data',
data: [
{ x: '2021-08-21 18:37:39', y: 2 },
{ x: '2021-08-22 18:39:39', y: 3 },
{ x: '2021-09-25 18:44:39', y: 1 },
],
borderColor: 'rgba(255,99,132,0.8)',
tension: 0.3,
},
],
};
options = {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Line Chart',
},
scales: {
xAxes: [
{
type: 'time',
distribution: 'linear',
},
],
title: {
display: false,
},
},
},
};
render() {
return (
<div>
<Line data={this.data} options={this.options} />
</div>
);
}
}
export default Grafer;
image to see my line-graph
I am using line-apex Charts in ReactJs. If there is no data available then legend for Y-Axis is invisible. And if data is available they will show up. I want legend to be displayed even if there is no data in series.
Alternatives I tried out: If there is no data in DB, send seriesData with 0 Values, it will show the point on the graph with 0 value and legend will be available. But, I want to get rid of that point.
getOptions() {
return {
chart: {
height: 200,
type: "line",
stacked: false,
},
colors: this.themes[this.props.theme],
dataLabels: {
enabled: false,
},
stroke: {
width: [3.5, 3.5],
},
xaxis: {
categories: this.props.xCategories,
labels: {
style: {
color: "#263238",
},
},
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: this.themes[this.props.theme][0],
fontWeight: "bold",
},
},
tooltip: {
enabled: false,
}
},
{
seriesName: "Revenue",
opposite: false,
axisTicks: {
show: true,
},
axisBorder: {
show: false,
},
labels: {
style: {
colors: this.themes[this.props.theme][1],
fontWeight: "bold",
},
},
},
],
legend: {
position: "top",
horizontalAlign: "left",
offsetX: -15,
fontWeight: "bold",
}
}
}
And below is the render method:
render() {
return (
<div>
<Chart
options={this.getOptions()}
series={this.props.seriesData}
type='line'
/>
</div>
);
}
There are a few properties that determine whether the legend should be shown in different circumstances. There's information available in the ApexCharts documentation, but here's an overview:
showForSingleSeries
default: false
This will determine if the legend should be shown even if there is just one series being displayed on the graph.
showForNullSeries
default: true
This will determine whether series that contain only null values are hidden.
showForZeroSeries
default: true
This will determine whether series that contain only zero values are hidden.
In your case, you'll want to make sure first of all that the showForSingleSeries is set to true to ensure that the legend is always shown. Secondly, rather than returning a series that contains a zero value, you can return either an empty array or an array containing null elements.
Finally, in order for the legend to show up when using your code, I had to add a series property to the options object. This is because the legend won't display unless it has any series names to show - it doesn't know the names of the series you'll be providing it with unless you specify it.
var options = {
...
series: [
{
name: "Revenue",
data: []
}
]
...
}