I am using react-chart js in my graph I am drawing a multi-vertical line using annotation this my sample code i had used to draw line
const testValue = ['0.019', '0.033', '0.305', '0.428', '0.582', '0.826'];
const splitArrayPopup = map(testValue, el => ({
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: parseFloat(el),
borderColor: '#e0e2e2',
borderWidth: 1,
borderDash: [3, 3],
label: {
content: parseFloat(el),
position: 'bottom',
enabled: true,
backgroundColor: 'transparent',
fontColor: '#e0e2e2',
fontStyle: 'normal',
yPadding: 0,
yAdjust: -10,
},
}));
i need to show my label text at bottom of the graph i mean outside the graph, right now for me going inside the graph.
Related
I have the following chart:
How can I make sure that the the blue line isn't filled, but at the same time, stays on top of the filled red line?
Taking the line chart example from the documentation, I have tried playing around with the drawTime property, but as you can see, the blue line is on the foreground of the red one, but it is filled (I expect the blue line to be on the foreground, but not filled).
Here's what I have so far:
Data:
const data = {
labels: generateLabels(),
datasets: [
{
label: 'Dataset 1',
data: generateData(),
borderColor: Utils.CHART_COLORS.red,
backgroundColor: Utils.CHART_COLORS.red,
fill: true
},
{
label: 'Dataset 2',
data: generateData(),
borderColor: Utils.CHART_COLORS.blue,
backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
// changed `fill` propery from `true` to `false`
fill: false
}
]
};
Config:
const config = {
type: 'line',
data: data,
options: {
plugins: {
filler: {
propagate: false,
// added `drawTime` property here
drawTime: "beforeDraw",
},
title: {
display: true,
text: (ctx) => 'drawTime: ' + ctx.chart.options.plugins.filler.drawTime
}
},
pointBackgroundColor: '#fff',
radius: 10,
interaction: {
intersect: false,
}
},
};
Setup:
const inputs = {
min: -100,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
const generateLabels = () => {
return Utils.months({count: inputs.count});
};
Utils.srand(3);
const generateData = () => (Utils.numbers(inputs));
This seems like a bug in chart.js itself.
You have 3 options:
wait until it is fixed within chart.js itself
write your own custom plugin that does the filling
make use of the order property so the blue line gets drawn on the canvas after the red one like so:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red',
borderColor: 'red',
fill: true,
order: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'blue',
order: 0
}
]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
EDIT:
After looking at the source code it seems indeed like its a bug in chart.js, it does not check if fill has been set to false so it will always fill with the non default modes. Will put in a fix for this so it will be fixed in version 3.8.1
I am setting the startAngle on my polar chart so the first category starts on the -180 degrees.
But I can't figure out why the data point labels don't correspondingly adjust and rotate. As a result, they show up incorrectly against the wrong data. As you can see in the image, Question 6 still appears where Question 1 should be. The tooltips on each section do appear correctly.
Note: When I use the datalabels plugin, it does show the label correctly. But I am not using it because it does not wrap the labels and also it cuts off the labels if they become too big. In addition I had responsiveness problems with it.
So please suggest a solution without that plugin if possible.
Thank you very much for helping me out.
const mydata = {
labels: [
'Question1',
'Question2',
'Question3',
'Question4',
'Question5',
'Question6'
],
datasets: [{
label: 'Data labels don't move',
data: [5, 8, 6, 6, 7, 8],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(255, 99, 132)',
'rgb(201, 203, 207)'
]
}]
};
var myChart = new Chart('mychartId'),
{
type: "polarArea",
data: mydata,
options:
{
responsive: true,
cutoutPercentage: 20,
startAngle: -1 * Math.PI,
legend: {
display: false
},
layout: {
padding: 20
},
scale: {
ticks: {
max: 10,
beginAtZero: true,
min: 1,
stepSize: 1,
display: false
},
angleLines: {
display: false
},
pointLabels: {
display: true
}
}
}
}
sample image showing the problem
Update to V3, there they do turn with the chart if you adjust the startAngle
var options = {
type: 'polarArea',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [2, 9, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
r: {
startAngle: 180,
ticks: {
display: false
},
pointLabels: {
display: true
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
V3 has some breaking changes over V2, for all of them you can read the migration guide
Good evening,
There's any way to alternate the chart's backgroud color for each dataSet of a result?
That's how I wish it.
enter image description here
Alternate background may be created with the use of chartjs-plugin-annotation.
Please have a look at the code snippet below that has been derived from the example code provided by the contributors of chartjs-plugin-annotation.
This code works with Chart.js 2.6.0 and it still produces a script error that may be ignored. Unfortunately I couldn't make it work with the newest version of Chart.js (currently 2.9.3) yet and I don't have time now to further investigate.
const labels = ["January", "February", "March", "April", "May", "June", "July"];
const annotations = [];
for (let i = 0; i < labels.length; i++) {
if (i % 2 == 0) {
annotations.push({
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: labels[i],
xMax: labels[i + 1],
backgroundColor: "rgba(128, 128, 128, 0.5)",
borderColor: "rgb(128, 128, 128)",
borderWidth: 1
});
}
};
new Chart('chart', {
type: "bar",
data: {
labels: labels,
datasets: [{
label: "Dataset 1",
backgroundColor: 'red',
data: [95, 70, 55, -88, -64, 34, -55],
categoryPercentage: 1,
barPercentage: 0.8
},
{
label: "Dataset 2",
backgroundColor: 'green',
data: [81, 58, 30, -91, -74, 20, -40],
categoryPercentage: 1,
barPercentage: 0.9
}
]
},
options: {
responsive: true,
tooltips: {
mode: "index",
intersect: true
},
annotation: {
annotations: annotations
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="90"></canvas>
we can use annotation plugin to do this
import annotationPlugin from "chartjs-plugin-annotation";
import {Chart} from 'chart.js';
Chart.register(annotationPlugin);
this code will add a box to our chart
{
type: 'box', #type of draw
drawTime: 'beforeDraw', #this will decide background or foreground
yMin: 5, #value min on y axis
yMax: 10, #value max on y axis
borderColor: 'rgb(242, 244, 248, 0.9)', #border color of the box
borderWidth: 1, #boarder width for box
backgroundColor: '#F2F4F8', #colour of the box
}
Out of this code
refer to this post here on how to do this: https://medium.com/#omi10859/alternative-background-lines-in-chartjs-a626ce4d3bcb
I have a chart i need to draw that, in addition to the data points, i want an icon permanently above (some) data points with a custom text string.
I don't need the default value popover as i can make do with a custom legend, but i need to add an icon above one or two points, and on hover of the icon, display a popover. i need to build the popover text string from non-chart related data.
The custom data labels don't appear to be flexible enough to allow different icons/popovers on different data points, i may be wrong though.
Another possibility is chartjs-plugin-datalabels, but I'm not sure about that.
In case your chart (canvas) is of fixed size, you can easily solve this problem by adding an additional dataset that specifies nothing but the icons to be shown in the chart.
{
data: data2.map((v, i) => imageIndexes.includes(i) ? v + 1.2 : null),
fill: false,
pointStyle: icon,
pointRadius: 22,
pointHoverRadius: 22
}
Given the data array data2 and the array imageIndexes, the data of the icons dataset can be built using Array.map. Note that the values - where any - are derived from corresponding values in data2 but slightly increased to make the images appear on top of them.
data2.map((v, i) => imageIndexes.includes(i) ? v + 1.2 : null)
Further you'll need to define a tooltips object inside the chart options in order to style the popup and to make sure, tooltips are only displayed when the mouse hovers over the icons.
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 2,
titleFontSize: 16,
titleAlign: 'center',
callbacks: {
title: (tooltipItem) => tooltipItem.length == 0 ? null : tooltipText,
label: () => null
}
},
Please have a look at the runnable code snipped below.
const labels = ['A', 'B', 'C', 'D', 'E', 'F'];
const alerts = ['B', 'D'];
const data1 = [0, 2, 1, 3, 2, 1];
const data2 = [1, 3, 3, 4, 3, 2];
const imageIndexes = [1, 3];
const tooltipText = 'Efficiency of Standard Curve\nnot opimal';
var icon = new Image();
icon.src = 'https://i.stack.imgur.com/YvlWY.png';
const chart = new Chart(document.getElementById("myChart"), {
type: "line",
data: {
labels: labels,
datasets: [{
data: data1,
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
lineTension: 0,
pointRadius: 5,
pointHoverRadius: 5,
pointBorderWidth: 3,
pointHoverBorderWidth: 3,
pointBorderColor: 'white',
pointHoverBorderColor: 'white'
},
{
data: data2,
fill: false,
showLine: false,
backgroundColor: 'orange',
pointRadius: 4,
pointHoverRadius: 4
},
{
data: data2.map((v, i) => imageIndexes.includes(i) ? v + 1.2 : null),
fill: false,
pointStyle: icon,
pointRadius: 22,
pointHoverRadius: 22
}
]
},
options: {
responsive: false,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 2,
titleFontSize: 16,
titleAlign: 'center',
callbacks: {
title: (tooltipItem) => tooltipItem.length == 0 ? null : tooltipText,
label: () => null
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 6,
stepSize: 1
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" style="width: 500px; height: 200px"></canvas>
How scale sector in doughnut chartjs on hover?
Example:
The simplest solution would be to define different borderWidth and hoverBorderWidth on your dataset as follows.
new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
labels: ['red', 'green', 'gray', 'blue'],
datasets: [{
label: 'My First dataset',
backgroundColor: ['red', 'green', 'gray', 'blue'],
borderColor: 'white',
data: [3, 4, 5, 3],
borderWidth: 4,
hoverBorderWidth: 0,
borderAlign: 'center'
}]
},
options: {
responsive:true,
cutoutPercentage: 65
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>