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' },
}}/>
Related
I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off.
If I leave it as a default it looks like this:
However I want it to be on the left side and the legend to be next to it.
When I change the position of the chart area:
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
It then looks like this:
For whatever reason it thinks there isn't enough space and it cuts the legend text which is really annoying.
Here is the code I am using:
const pieOptions = {
title: '',
pieHole: 0.6,
slices: [
{
color: '#00A3E0',
},
{
color: '#F2A900',
},
{
color: '#43B02A',
},
{
color: '#DF4661',
},
{
color: '#003865',
},
{
color: '#A15A95',
},
{
color: '#FF6A13',
},
],
legend: {
position: 'right',
alignment: 'end',
textStyle: {
color: '#666',
fontSize: 12,
},
},
tooltip: {
showColorCode: true,
},
chartArea: {
left: 0,
right: 400,
top: 0,
bottom: 0,
width: '100%',
height: '80%',
},
fontName: 'inherit',
fontSize: 12,
}
Can anyone advise?
Also if this is not fixable, can you please recommend a chart which supports that and custom colours please?
Thank you in advance!
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.
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.
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
}
I want to display legend in two columns in the pie chart. My JSfiddle: http://jsfiddle.net/Cp73s/2185/
itemStyle: {
width:200,
font: 'Helvetica Neue'
},
Try this
legend: {
borderRadius: 0,
borderColor: 'silver',
enabled: true,
margin: 30,
itemMarginTop: 2,
itemMarginBottom: 2,
width:200,
itemWidth:100,
itemStyle: {
width:100
}
}
fiddle link :)
function renderElements() {
if (this.legend) {
this.legend.destroy();
}
//distance between 2 elements
let itemDistance = this.legend.options.itemDistance;
//the biggest element
let maxItemWidth = this.legend.maxItemWidth;
//make the width of the legend in the size of 2 largest elements +
//distance
let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
//container width
let boxWidth = this.plotBox.width;
//if the length of the 2 largest elements + the distance between them
//is less than the width of container, we make 1 row, else
//set legend width 2 max elements + distance between
if (boxWidth < nextLegendWidth) {
this.legend.options.width = maxItemWidth;
} else {
this.legend.options.width = nextLegendWidth;
}
this.render()
}
chart: {
events: {
load: renderElements,
redraw: renderElements
}
}
https://jsfiddle.net/jecrovb7/38/
You need to set a bunch of things in order to make it look as you expecting.
First you need to change the layout parameter to 'horizontal', enable the floating, setting fixed width of legend for example to 300 and finally - position it by x, y parameters. Here is the code and example:
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'horizontal',
floating: true,
useHTML: true,
symbolWidth: 0,
width: 300,
y: 80,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
width: 200,
font: 'Helvetica Neue'
},
}
Live example: https://jsfiddle.net/9pnru4s7/