Related
I am using react-chart-2.
When I hover the line graph, the tooltip is displayed, but I want to hide the tooltip when I hover the line graph.
I also want to hide the numbers 0,0.1,0.2 to 1 on the left (y-axis) of the line graph.
How can I implement this to hide the y-axis of the line graph?
Also, how do I hide the tooltip in the line graph?
code
import React from "react";
import { Bar } from "react-chartjs-2";
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Sales",
type: "line",
data: [51, 300, 40, 49, 60, 37, 40],
fill: false,
borderColor: "#555555",
backgroundColor: "#555555",
pointBorderColor: "#000000",
pointBackgroundColor: "#EC932F",
pointHoverBackgroundColor: "#EC932F",
pointHoverBorderColor: "#EC932F",
yAxisID: "y-axis-1"
},
{
type: "bar",
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: "#F7C520",
borderColor: "#F7C520",
hoverBackgroundColor: "#E6B71E",
hoverBorderColor: "#E6B71E",
yAxisID: "y-axis-1"
}
]
};
const options = {
responsive: true,
tooltips: {
mode: "label"
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: true
}
}
],
yAxes: [
{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: true
}
},
{
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
}
}
]
}
};
class MixExample extends React.Component {
render() {
return (
<div>
<h2>Mixed data Example</h2>
<Bar data={data} options={options} />
</div>
);
}
}
export default MixExample;
react-chartjs-2 has 2 major versions relevant to this issue: v2, which has support for chart.js 2.9.4 and below, and v3, which significantly changes a lot of options and configurations, and which supports chart.js 3.0.0 and above.
The original fork of your codesandbox link uses chart.js: 2.9.4 and react-chartjs-2: 2.1.1, which differs from the sandbox link you provided, which uses chart.js: 3.5.1 and react-chartjs-2: 3.0.4. Notably, instead of structuring your options object like
scales: {
x-axes: [ /* array of axis options... */],
y-axes: [ /* array of axis options... */],
}
where each axis has an axisID property, you structure them with the axisID as the key and the rest of the original options object is the value, such as:
scales: {
"x-axis-1": {
display: true,
gridLines: {
display: false
}
},
"y-axis-1": {
type: "linear",
display: false,
position: "left"
}
}
Furthermore, the tooltip can be disabled by moving the tooltip into plugins, as the chart.js docs say that tooltip is a part of plugins:
global options for the chart tooltips is defined in Chart.defaults.plugins.tooltip
Therefore, to disable the tooltip entirely:
plugins: {
tooltip: {
enabled: false
}
}
Since you want to only disable the tooltip for a single dataset, the solutions found here may be of some use, but I haven't tried either for myself. It may also be possible to set the global default for Chart.JS tooltips to false, then enable it on a dataset-by-dataset basis, as displayed here, accessing it via react-chartjs-2's chart ref.
For that level of customization, I would highly suggest starting from the beginning with the most up-to-date version of react-chartjs-2 and the examples therein, rather than your current v2-configured starting point.
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: []
}
]
...
}
I have a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
After setting up a stacked horizontal bar chart using chartjs, the x-axis cannot be hidden. I have tried numerous ways to remove it like using "display:false" and making the text transparent but to no avail. Here is what it looks like and what I want it to look like:
https://imgur.com/a/mKYViUx
Thanks in advance~!
Current Chartjs code:
datasets: [
{
label: 'Example Data One',
data: [10],
backgroundColor: '#C4D156',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Example Two, etc',
data: [25],
backgroundColor: '#68A03F',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Three',
data: [55],
backgroundColor: '#2F9138',
borderColor: "#ffffff",
borderWidth: 1.5
}
]
};
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{stacked: true},
],
xAxes: [
{stacked: true},
{gridLines: {
display:false
}
},
]
}
}
Hiding the label/text on the axis is done with that
options: {
...
scales: {
...
xAxes: [{
ticks: {
display: false //this will remove the label/text
}
}]
}
}
I'm trying to apply some basic style into my tooltip using ApexCharts in React.
This is my configuration:
const options = {
chart: {
foreColor: "#ffffff12",
toolbar: {
show: false
}
},
colors: ["white"],
stroke: {
width: 3
},
grid: {
borderColor: "#ffffff12",
borderWidth: 1,
clipMarkers: false,
yaxis: {
lines: {
show: false
}
},
xaxis: {
lines: {
show: true,
},
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.4,
opacityTo: 0
}
},
markers: {
size: 0
},
tooltip: {
enabled: true,
style: {
fontSize: '20px',
fontFamily: 'Roboto'
},
x: {
show: true,
format:'HH:mm'
},
y: {
formatter:(value) => `${value}$`
},
marker: {
show: false,
},
theme:'dark'
},
...
I'm able to see it with the dark default values (like dark background and white font color etc...), but I'm not able to make it work with my own.
Thanks in advance!
Please add id property to parent of chart element like this.
#chartContainer .apexcharts-tooltip {
color: #000000;
}
#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
background: #ffffff !important;
}
The tooltip in ApexCharts can be targetted directly through CSS as it is just an HTML element.
Change the tooltip style by overriding .apexcharts-tooltip class and any inner elements inside it.
.apexcharts-tooltip.light{
background:red;
color:green;
}