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.
Related
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
I'm having rounding issues with the tooltip in my Line chart for ChartJs. When I hover over my datapoints on the chart, the tooltip displays a rounded version of my data (usually 3 decimal points, or less if there's trailing 0s). Is there a way to stop the auto rounding in the tooltip and show the full number?
Here's my code and a screenshot of the issue.
const LineChart = () => {
const [dataForChart, setDataForChart]=useState<any[]>([1.0023, 1.0231, 1.0347412, 1.03541, 1.0434, 1.04001, 1.0459])
const [labelsForChart, setlabelsForChart]=useState<any[]>(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July'])
const options = {
responsive: true,
plugins: {
legend: {
display:false
},
title: {
display: true,
text: 'Price',
},
},
};
const data = {
labels: labelsForChart,
datasets: [
{
label: 'Price',
data: dataForChart,
borderColor: 'green',
backgroundColor: 'green',
},
],
};
return (
<div>
<Line options={options} data={data} />
</div>
);
};
export default LineChart;
Screenshot of the tooltip
try to use label callback it can modify your tooltip text
change your options to
const options = {
responsive: true,
plugins: {
legend: {
display:false
},
title: {
display: true,
text: 'Price',
},
tooltip: {
callbacks: {
label: function(context) {
return context.dataset.label;
}
}
}
},
};
I'm currently working on project in react.js. I'm trying to get some data to appear using chart.js but am having some difficulties. I'm trying to create a custom label for my difficulty chart.
Trying to have a difficulty of easy, medium, or hard display on the y value that corresponds with the numbers 0, 1, and 2 But the 2 value is getting skipped over in my chart.
Code:
const yLabels = {
0:'easy',
1.0:'medium',
2.0:'hard',
}
const createChart = (data) => {
return (
<div className="chart">
<h1>{data.name}</h1>
<div >
<div >
<Line
width={600}
height={200}
data={data}
options={{
responsive: true,
scaleShowValues: true,
scales: [
{
ticks:{
autoSkip: true,
stepSize: 1,
startAtZero: true,
callback: function(value, index, ticks){
console.log(ticks)
return `${yLabels[value]}`
}
}
}
],
plugins: {
title: {
fontSize: 30,
display: true,
font: { size: 20 }
},
legend: {
labels: {
font: { size: 15 }
}
}
},
}}
/>
</div>
</div>
</div>
)
1. List item
}
What can I try next?
I am using react apex chart to create a chart that will display the average response time for each agent.
I have managed to get the result in a timestamp format but i am unable to convert that into hours, minutes and seconds to display that in yaxis, i have checked the documentation docs link but they are giving examples for date time only.
here is the result that i am getting with the component bellow
import React, { useState } from 'react';
import Chart from 'react-apexcharts';
const AvgResponseTimeChart = (props) => {
const { prod_data } = props;
const [ data, setData ] = useState([
{
x: 'Agent one',
y: 1589670005
},
{
x: 'Agent one',
y: 1589670307
}
]);
const [ series, setSeries ] = useState([ { data } ]);
const [ options, setOptions ] = useState({
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '25%',
endingShape: 'rounded'
}
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: [ 'transparent' ]
},
xaxis: {
type: 'category'
},
yaxis: {
labels: {
datetimeFormatter: {
formatter: function(value, timestamp) {
return new Date(timestamp).toLocaleTimeString();
}
}
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function(value, timestamp) {
return new Date(timestamp);
}
}
}
});
return (
<div id="chart">
<Chart options={options} series={series} type="bar" height={350} />
</div>
);
};
export default AvgResponseTimeChart;
I have searched for similar issues without success if, someone can help me with that i will be really grateful
Try to add lables to yaxis in chartOptions this way:
labels: {
show: true,
formatter: (val) => { return new Date(val); }
}
And remove the tooltip as well.
I'm using highcharts-react-official to render a HighchartsReact component. It shows up and works appropriately until I re-render the component. By changing the state at all, the chart will shrink vertically.
I've experimented with setting reflow in the chart options as well as toggling allowChartUpdate and immutable flags on the component itself to no avail.
const ChartView = props => {
const { data } = props;
if(data.highstockData && data.startDate && data.endDate) {
const min = parseInt(moment(data.startDate, 'x').startOf('day').format('x'));
const max = parseInt(moment(data.endDate, 'x').startOf('day').format('x'));
const chartOptions = getChartConfig(data.highstockData, min, max);
return (
<HighchartsReact
highcharts={Highcharts}
options={chartOptions}
/>
)
}
return null;
};
And the parent Component's render return:
return (
<div className="vertical-margin">
{isFetching && !data && <LoadingView/>}
{hasError && !data && <ErrorView/>}
{
data &&
<React.Fragment>
{buttonRow}
<ChartView
data={data}
/>
</React.Fragment>
}
</div>
)
As I said re-rendering for any reason causes the highchart to shrink in height with each re-render. For testing, I call this line:
this.setState({});
I could post the chart config if needed, but it's nothing too fancy.
I haven't been able to find anyone else having this issue and have been pulling my hair out searching for an answer.
It turned out to indeed be a highchart option I was passing into the component. Apparently it was because this option:
scrollbar: {
enabled: true
},
Was not nested under the xAxis section of the options as it should be. It still created a scrollbar correctly but caused this weird, shrinking issue on component render.
chart: {
marginRight: 75,
ignoreHiddenSeries: false,
panning: false,
spacingTop: 10,
height: `${Constants.HIGHCHART_TABLE_HEIGHT}px`,
},
time: {
useUTC: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
align: 'left',
enabled: true,
itemMarginTop: 5,
itemStyle: {
"color": "#333333",
"cursor": "pointer",
"fontSize": "12px",
"fontWeight": "normal",
"width": "240px"
},
layout: 'vertical',
verticalAlign: 'top',
y: 0
},
navigator: {
enabled: false,
xAxis: {
tickPixelInterval: 100
}
},
plotOptions: {
line: {
marker: {
enabled: true,
fillColor: "#ffffff",
lineColor: null,
lineWidth: 1
}
}
},
rangeSelector: {
enabled: false
},
tooltip: {
formatter: function () {
const sortedPoints = this.points.sort((a, b) => {
return a.point.legendOrder - b.point.legendOrder
});
return [
'<b>',
moment(this.x, 'x').format('MM/DD/YYYY HH:mm'),
'</b><br/>',
sortedPoints.map((item) => {
return [
'<br/><span style="color:'+ item.series.color +';">\u258c</span> ',
'<span>' + item.series.name + '</span>: <b>' + item.y + '</b>',
item.comments ? '<p>(' + item.comments + ')</p>' : ''
].join('');
}).join('')
].join('');
},
shared: true,
crosshairs: {
color: '#ddd',
dashStyle: 'solid'
},
},
xAxis: {
type: 'datetime',
labels:{
formatter: function() {
const parsed = moment(this.value, 'x');
return parsed.format('HH:mm') + '<br/>' + parsed.format('MM/DD');
}
},
min,
max,
reversed: true,
scrollbar: {
enabled: true
},
},
yAxis: [{
alignTicks: false,
max: 60,
min: 0,
opposite: false,
tickInterval: 5,
title: {
text: ''
}
}, {
alignTicks: false,
max: 300,
min: 0,
opposite: true,
tickInterval: 25,
title: {
text: ''
}
}],
//The below properties are watched separately for changes.
series: data,
title: {
text: ''
},
loading: false,
};
Also here's the full options file for reference. It wasn't just that scrollbar option causing it. It was a specific combination of options as I discovered by trying to re-create the problem with a new chart.