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
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'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed.
I have achieved this functionality by adding this to my Line graph config;
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
borderDash: [2],
borderDashOffset: [2],
color: 'rgba(0, 0, 0, 0.04)',
drawBorder: false,
drawTicks: false,
}
}]
}
However, when I do this, it randomly adds another axis to my chart with completely bogus values. I want to remove this axis and keep the original but also keep the gridLines config.
You can set the defaults for this. You can set it in the scale default so it does it for all the chart types and scales. If you specifically want to hide the X axis gridLines only you need to set it on chart type level.
Chart.defaults.scale.gridLines.display = false // hides all the gridLines in all charts for all axes
Chart.defaults.line.scales.xAxes[0].gridLines = {
display: false
} // Hides only the X axes gridLines in all line charts
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
//radar-chart
const data = {
labels: [
'Stick Slip',
'Whirl',
'Bit Balling',
'Bit Bounce',
'test'
],
datasets: [{
label: 'My First Dataset',
data: [0.2, 0.5, 0, 0, 1],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
},]
};
const config = {
maintainAspectRatio: false,
elements: {
line: {
borderWidth: 3,
}
},
scales: {
r: {
suggestedMin: 0,
suggestedMax: 1,
angleLines: {
color: 'red'
}
},
},
}
var ctx = document.getElementById('radar-chart-dysfunctions');
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: config,
});
How can I change the grey gridlines to another color?
This is my code: https://codepen.io/bahrikutlu/pen/QWdaEMp
I have found various solutions on Stack Overflow such as following but it does not work with version 3.0
With Chartjs Radar - how to modify the gray gridlines?
Thanks
You will have to edit the color of the grid in the scale option like the example below
var options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
r: {
grid: {
color: 'red'
}
}
}
}
}
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.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>
Due to very poor documentation (https://www.chartjs.org/docs/latest/) I decided to ask Chart.js community this question.
How can I change the angle of the scale label?
This is my actual view
I would like to make those labels horizontal (see red labels how it should be).
The config is:
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: [this.label, this.valueUnit],
fontSize: 14,
},
afterFit: function(scaleInstance) {
scaleInstance.width = 120;
}
}]
You can define a second y-axis that is responsible for drawing the scale label horizontally.
The single yAxis.ticks label can be left aligned by defining mirror: true together with some padding.
ticks: {
mirror: true,
padding: 60,
...
To make the tick label visible on the chart area, the same padding needs to be defined left of the chart layout.
layout: {
padding: {
left: 60
}
},
Please take a look on the runnable code below and see hot it works.
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
fill: false
}]
},
options: {
layout: {
padding: {
left: 60
}
},
legend: {
display: false
},
scales: {
yAxes: [{
},
{
ticks: {
stepSize: 0.5,
mirror: true,
padding: 60,
fontColor: 'red',
callback: v => v == 0.5 ? ['Horizontal', 'Label'] : undefined
},
gridLines: {
display: false
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the scale label yourself directly on the canvas using CanvasRenderingContext2D.fillText().
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales['y-axis-0'];
let y = yAxis.bottom / 2;
ctx.textAlign = 'left';
ctx.font = "14px Arial";
ctx.fillStyle = "gray";
ctx.fillText('Horizontal', 0, y - 8);
ctx.fillText('Label', 0, y + 8);
ctx.restore();
}
You'll also have to define some extra padding at the left of the chart to make sure, the scale label does not overlap the chart area.
options: {
layout: {
padding: {
left: 70
}
},
Please take a look at the following runnable code and see how it works.
new Chart(document.getElementById('myChart'), {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales['y-axis-0'];
let y = yAxis.bottom / 2;
ctx.textAlign = 'left';
ctx.font = "14px Arial";
ctx.fillStyle = "gray";
ctx.fillText('Horizontal', 0, y - 8);
ctx.fillText('Label', 0, y + 8);
ctx.restore();
}
}],
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 12, 8, 6],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1,
fill: false
}]
},
options: {
layout: {
padding: {
left: 70
}
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>
There is no build in way to do this. If you want to achieve this behaviour you will have to draw it on the canvas yourself with an custom plugin
I am creating line charts with 2 y-axes. one of those axes has two datasets but both run from the range of 0-100. The higher number being the better one. The second y-axis is usually lower in range (often in the single digits) and the best result is 1.
How can I invert the second y-axis so that 1 is at the top of the chart?
(I will try to find a solution myself, but at 5k+ lines in chart.js, it might take a while )
Thanks ^_^
Dev 2.0 of chart js supports an option to reverse the ticks when setting up the axis so your declaration of the second axis would become
{
type: "invertedLinear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "right",
id: "y-axis-2",
ticks: {
reverse: true
},
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
Here it is in action https://jsfiddle.net/nwc8ys34/15/
Using v 2.7.0, and the following seems to work:
options: {
scales: {
yAxes: [{
ticks: {
reverse: true,
}
}]
}
}
In v3 the scale configs have been changed so the desired behaviour can be accomplished like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [40, 80, 100, 70, 60, 80],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'y2'
}
]
},
options: {
scales: {
y: {},
y2: {
position: 'right',
reverse: true
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = 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>
Chart.js 4:
datasets: [{
label: "Strength",
yAxisID: "y1",
data: mappedData.sigStrength
}, {
label: "Bars",
yAxisID: "y2",
data: mappedData.sigBars
}]
scales: {
y1: {
type: "linear",
display: true,
position: "left",
reverse: true
},
y2: {
type: "linear",
display: true,
position: "right",
ticks: {
stepSize: 1
}
}
},