I am using ChartJS to generate a radar chart.
I wish for the last gridLine (the outermost) to remain solid, while all the others are dashed.
Picture example:
I've seen that it is possible to have varying borderDash in this pull request which also shows an image of it in action but have yet to find a way to script it. (edit: it seems that the linked pull request has made it onto master, planned for release with V3.0 - meaning it is not yet available(?))
Quick example code of a script:
scale: {
gridLines: {
borderDash: function(context) {
return context.index % 2 === 0 ? [2, 3] : [10, 10];
},
},
You can already use Chart.js version 3, it's available as Chart.js 3.0.0-beta.
Simply add the following script tag to your HTML page.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
Please take a look at the following code snippet and see how it works.
new Chart("radar-chart", {
type: 'radar',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
data: [25.48, 54.16, 7.61, 8.06, 4.45],
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)"
}]
},
options: {
legend: {
display: false
},
scale: {
ticks: {
min: 0,
max: 60,
stepSize: 10
},
gridLines: {
lineWidth: 2,
color: "lightgreen",
borderDash: context => context.index == 6 ? [] : [6, 4]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="radar-chart" height="120"></canvas>
Related
Im using react-chartjs-2 and trying to create dashed gridlines on the y-axis
I tried to look on Chart Config Web: https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
But cant find the trick
Here is my code:
import { Chart } from 'react-chartjs-2';
import {Chart as ChartJS, registerables} from 'chart.js';
ChartJS.register(...registerables);
const data = {
labels: ["Label1", "Label2", "Label3"],
datasets: [{
label: 'legend1',
data: [12, 19, 3],
},{
label: 'legend2',
data: [22, 9, 13],
}]
};
const options = {
scales: {
y: {
grid: {
tickBorderDash: [4, 4],
tickColor: '#000',
tickWidth: 2,
offset: true,
drawTicks: true,
drawOnChartArea: true
},
beginAtZero: true,
},
x: {
display: false
}
},
};
const BarChart = (props : Props) => {
return (
<Chart type='bar' data={data} options={options} />
);
};
Thank you!
By looking at the source code, I gathered that for some reason y.grid.tickBorderDash option only applies to the tick marks, not for the grid lines. Actually, the option is applied only for lines that are not affected by drawOnChartArea: true.
To make y axis gridlines dashed, one has to set y.border.dash option. This doesn't seem very consistent to me, but that's the way the code currently functions.
So this should work:
const options = {
scales: {
y: {
border:{dash: [4, 4]}, // for the grid lines
grid: {
color: '#aaa', // for the grid lines
tickColor: '#000', // for the tick mark
tickBorderDash: [2, 3], // also for the tick, if long enough
tickLength: 10, // just to see the dotted line
tickWidth: 2,
offset: true,
drawTicks: true, // true is default
drawOnChartArea: true // true is default
},
beginAtZero: true,
},
x: {
display: false
}
},
};
Note: I tested with charts.js 4.2.0 (latest at the time of posting).
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
I am looking to achieve the following with ChartJS but not sure if its actually possible? I need the graph to start at 0 but in effect my bars won't always start at the bottom of the chart (they may but in effect I need a BarStart and a BarEnd). Is it possible to offset them to achieve the below?
This can be accomplished since Chart.js v2.9.0, which supports floating bars. Individual bars can since be specified with the syntax [min, max].
new Chart(document.getElementById('myChart'), {
type: 'bar',
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
type: 'bar',
label: 'Green Bars',
backgroundColor: 'green',
data: [[3, 9.5],[2, 8.5],[4, 7],[1.5, 5.5],[3, 6.5],[3, 8.5],[4, 9]],
}]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
yAxes: [{
type: 'linear',
ticks: {
min: 0,
max: 10,
stepSize: 1
}
}],
}
}
});
canvas {
max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="10" height="10"></canvas>
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 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
}
}
},