how to align the legend text to center this is what I have now:
as you can see the text is not vertically align to center and I dont find any way to do that
this is my options
options.plugins.legend= {
position: "top",
align: "start",
labels: {
boxWidth: 14,
boxHeight: 14,
color: "black",
usePointStyle: true,
radius: 55,
textAlign: "center",
font: {
size: 11,
family: "Roboto",
},
},
}
so I found a solution that is to change the svgs code
from
<svg width="14" height="14" viewBox="0 0 14 14"...
to
<svg width="16" height="16" viewBox="0 0 16 16"...
and now text aligned
Related
I use Radar ChartJS, I have 5 levels for each position. Here is when my data has 5 levels.
Showing full 5 level
However, when my data does not have all 5 levels, the chart only shows the highest level. I wish that when I don't have 5 levels, 5 levels will also be displayed.
Not Showing full 5 level when data haven't level 5
My setting
scales: {
r: {
angleLines: {
color: '#FFF',
},
pointLabels: {
color: '#FFF', // Color labels
font: {
size: 11,
},
backdropColor: listColor,
backdropPadding: "10",
borderRadius: "15",
padding: 20,
},
grid: {
circular: true,
color: "#FFF",
min: 5,
},
beginAtZero: true,
ticks: {
beginAtZero: true,
max: 5,
min: 0,
stepSize: 1,
display: false,
}
},
Thanks so much.
i have bar chart with "react-chartjs-2", where should i put my font family for labels of chart in xAxes:
this way:(not worked)
<Bar
data={chartData}
options={{ defaults: { global: { defaultFontFamily:"iransans} }}}
/>
this way not worked to:
<Bar
data={chartData}
options={{ font: { family: "iransans" }}}
/>
any body know this????
so after seeing a post in github, this way worked:
first import defaults:
import { defaults } from 'react-chartjs-2';
and then somewhere set font like this:
defaults.font.family = 'font name...';
If you are using chart.js 3.x+, refer the following code in order to change the font of your ticks, tooltip and legend:
// inside data.js(or your own data file)
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
labels: {
color: "rgb(255, 99, 132)",
font: {
family: "Montserrat" // Add your font here to change the font of your legend label
}
},
tooltip: {
bodyFont: {
family: "Montserrat" // Add your font here to change the font of your tooltip body
},
titleFont: {
family: "Montserrat" // Add your font here to change the font of your tooltip title
}
}
}
},
tooltips: {
backgroundColor: "#f5f5f5",
titleFontColor: "#333",
bodyFontColor: "#666",
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
scales: {
yAxes: {
barPercentage: 1.6,
grid: {
display: false,
color: chartLineColor,
zeroLineColor: "transparent"
},
ticks: {
suggestedMin: 0,
suggestedMax: 125000,
padding: 2,
backdropPadding: 2,
backdropColor: "rgba(255,255,255,1)",
color: chartLineColor,
font: {
family: "Montserrat", // Add your font here to change the font of your y axis
size: 12
},
major: {
enable: true
}
}
},
xAxes: {
barPercentage: 1.6,
grid: {
display: false,
zeroLineColor: "transparent"
},
ticks: {
padding: 20,
color: chartLineColor,
font: {
family: "Montserrat", // Add your font here to change the font of your x axis
size: 12
},
major: {
enable: false
}
}
}
}
};
Inside your react component:
import {someData,options} from './data.js'
function SomeComponent{
return(
<>
<Line data={someData} options={options} />
</>
)
}
Hope this was useful. For further reference, refer this article
Defaults are missing in react-chartjs-2 library v4, so it should be imported from chart.js directly:
import { defaults } from 'chart.js';
and then somewhere set font like this:
defaults.font.family = 'font name...';
I'm trying to create a "chart" where I only want to show the x-axis. Basically I'm trying to create visualization of a range (min-max) and a point that sits in between like:
I'm unable to find any resources online on how to make this, or what this type of plot is even called. If anyone could help out, that would be awesome!
This is straightforward to achieve through styling a line chart appropriately and using linear x- & y-axes with points defined via x and y coordinates.
By keeping y at 0 you can assure the points all appear in the same horizontal position.
The example below gets the visual result you want, but you'll probably want to disable tooltips for the 'fake' x-axis line via a callback:
let range = {
min: 0,
max: 100
},
pointVal = 65;
new Chart(document.getElementById("chart"), {
type: "line",
data: {
labels: ["", "", ""],
datasets: [{
pointBackgroundColor: "green",
pointRadius: 10,
pointHoverRadius: 10,
pointStyle: "rectRot",
data: [{
x: pointVal,
y: 0
}]
}, {
// this dataset becomes the 'fake' x-axis line.
pointBackgroundColor: "black",
borderColor: "black",
data: [{
x: range.min,
y: 0
},
{
x: range.max / 2,
y: 0
},
{
x: range.max,
y: 0
}
]
}]
},
options: {
legend: {
display: false
},
hover: {
mode: "point"
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
scales: {
xAxes: [{
type: "linear",
display: false
}],
yAxes: [{
display: false
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:200px">
<canvas id="chart"></canvas>
</div>
I'm use column google-chart with annotations. For annotation set option alwaysOutside: true. But I have one problem.
My annotation label automaticly shifting down for column with max value.
How I can fix this behavior?
My chart options here:
const chartOptions = {
legend: 'none',
width: 750,
height: 285,
bar: { groupWidth: '95%' },
fontName: 'Open Sans',
fontSize: 14,
enableInteractivity: false,
colors: ['#FF2D55', '#4772D1'],
vAxis: {
format: '0',
baseline: 0,
viewWindowMode: 'pretty',
viewWindow: {
min: 0
}
},
annotations: {
alwaysOutside: true,
style: 'point',
stem: {
length: 5,
color: '#FFFFFF'
},
textStyle: {
fontName: 'Open Sans',
fontSize: 16,
bold: true,
color: 'black',
opacity: 1
}
},
tooltip: {
trigger: 'none'
}
};
I found the solution by myself. Maybe someone needs.
After I got the data for my chart, I found max value in series and set option vAxis.minValue dynamically.
Code example:
const maxValue = this.getMaxValueInSeries(chartSeries);
this.chartOptions.vAxis.minValue = maxValue + 1;
It's work for me. Enjoy.
Problem is that when I set my x-axis labels vertical they gets truncated, tried to set more height -> then chart changes size but labels are still truncated.
Is there a way/hack to set x-axis labels to not truncate on overflow.
Also there is strange behavior some of x-axis labels has some padding
-> I put red line below x-axis labels and there u can see that labels has different start positions
Thanks.
ColumnChart properties:
var options = {
title: 'title',
strictFirstColumnType: true,
lineWidth: 1,
isStacked: true,
legend: { position: 'bottom', alignment: 'left', textStyle: { color: 'black', fontSize: 15, italic: false, bold: true }, maxLines: 5 },
vAxes: { 1: { title: 'y1TitleText'e, titleTextStyle: { italic: false, bold: true }, minValue:0, gridlines: { count: 6 } } },
hAxis: {slantedText: true, slantedTextAngle: 90, title: 'titleText'},
fontSize: 15,
colors: colors
};
Diagram output :
Output image