Note that this is in react and using react-chartjs-2.
I have a simple bar graph with 3 datasets which has chartjs-plugin-datalabels enabled so I can see the labels just above the bars.
Turning on a dataset which was already hidden will animate the datalabel correctly along with the bar. But the problem is, when I hide a dataset, the labels do not update so they float statically where the bar height was before I hid that dataset.
What options do I need to set for this to update along with the bars?
<Bar
data={this.state.graphData}
legend={this.state.legendOptions}
options={{
plugins: {
datalabels: {
color: 'black',
padding: '0',
backgroundColor: 'white',
offset: 0,
formatter: value => this.moneyFormat(value),
align: 'end',
anchor: 'end',
display: context => context.dataset.hidden, // this needs to update ??
},
},
}}
/>
Legend options:
{
labels: {
fontSize: 18,
// onClick ??
},
}
Thanks for the help.
Related
I have a question about combining column and staked bar for react highchart,
it is similar to the answer of this link:
Highchart combination chart with stacked column
but I want to change the above column to stacked bar which is horizontal.
When I change the defaultColumnSeries to
var defaultColumnSeries = {
type: 'bar',
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontSize: '9px'
}
},
showInLegend: false,
groupPadding: 0.1,
yAxis: 1,
xAxis: 1
}
then all the columns become horizontal also which is not what I want.
I want to keep the below columns vertical and the above stacked bar horizontal.
What should I do to achieve it?
Using bar series type enables chart.inverted option, which makes it impossible to use column and bar series types on the same chart. As a solution, you can create another chart and place it on top of the other.
Highcharts.chart('container', {
...
});
Highcharts.chart('container2', {
chart: {
height: 100,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
yAxis: {
visible: false
},
xAxis: {
visible: false
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/k3z5opvr/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
Github issue: https://github.com/highcharts/highcharts/issues/13363
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.
How to fix the column on the screen during the scroll? Using the Mui-datatables library, like datatables on doc. doc
In the mui-datatables there is a fixedSelectColumn property, but I was unable to select the column or configure the scroll.
My options :
const options = {
filter: true,
filterType: 'multiselect',
textLabels : TextLabels,
responsive: 'scroll',
fixedHeader: true,
tableBodyHeight: '100%',
selectableRows: false,
fixedSelectColumn: true,
};
The fixedSelectColumn prop is for the "selection" elements, i.e., the check boxes. I don't think the MUI-Datatables, as of this writing has props like this feature that you have linked pertaining to the jQuery datatables.
However, upon looking at this source code, we can see that some of the "fixed" columns utilize the CSS position: sticky property. So, one way to implement fixed columns is to style the cells & header cells as such:
const columns = [
{
name: "Name",
options: {
filter: true,
setCellProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: "0",
background: "white",
zIndex: 100
}
}),
setCellHeaderProps: () => ({
style: {
whiteSpace: "nowrap",
position: "sticky",
left: 0,
background: "white",
zIndex: 101
}
})
}
},
...
I´m using a Linechart from google-chart-react.
The problem is that I can´t change the legend position to the bottom, stays on the right.
I´ve tried:
width={'70%'}
height={'200'}
chartType="Line"
data={dats}
options={{
legend:'bottom',
colors:['#95a0be','#90d6db'],
width: 800,
height: 300,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: { axis: 'Temps' },
},....
if you use react-google-charts,
set chartType = "LineChart" and legend: { position: 'bottom' }
<Chart
...
chartType="LineChart"
options={{
...,
legend: { position: 'bottom' },
}}/>
I am using react-google-charts in my reactjs application to create google line chart. I don't find any detailed document for this plugin.
I have few questions:
a) How to specify scaleStepWidth?
b) How to create pointDot in Line Chart?
To enable pointDot in line chart you have to just set "true" the points property option in configuration i-e
"pointsVisible: true"
Moreover you can find an example of line chart here
https://github.com/RakanNimer/react-google-charts/blob/HEAD/sandboxes/linechart/index.js
Other customization options if required then you can provide it in option property. for example just like below:
var options = {
//title: 'Graph',
//isStacked: true,
//legend: { position: 'top', maxLines: 3 },
width: chartwidth1 / 2 * 2,
height:450,
vAxis: {
gridlines: { count: 15 },
viewWindow: { min: -100000, max: 2000000},
},
//series: series,
chartArea: {
top: '10%', // set this to adjust the legend width
left: '8%', // set this eventually, to adjust the left margin
height: "80%",
width: "93%",
//width: "60%"
},
legend: { position: 'top', alignment: 'start' },
pointsVisible: true
}