With radar charts is it possible to have the order be reversed? For example have 10 being closest to the center and 1 being furthest away from the center for values that are 1 through 10?
To reverse the radar chart as you described:
type: 'radar',
data: {...},
options: {
scale: {
ticks: {
reverse: true,
beginAtZero: false,
min: 1
}
}
}
Refer to the doc Styling and Linear Radial Axis.
Related
I'm using chart.js 3.6.1 with VueJS. These are options for particular data I'm having trouble:
hover: {
mode: 'x',
intersect: false
},
scales: {
y: {
// not relevant
},
x: {
type: 'time',
min: minRangeDate.value,
max: maxRangeDate.value,
time: {
displayFormats: {
day: 'dd.MM.',
hour: 'HH:mm',
minute: 'HH:mm',
second: 'HH:mm:ss'
}
},
grid: {
display: true
},
ticks: {
color: 'white'
}
}
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
modifierKey: 'ctrl'
},
zoom: {
mode: 'x',
wheel: {
enabled: true,
speed: 0.2
},
pinch: {
enabled: true
}
},
limits: {
x: {
min: minRangeDate.value,
max: maxRangeDate.value,
minRange: 20000 // minimum zoom to seconds
}
}
}
}
}
When the graph is zoomed everything looks fine like in the picture below:
but when the graph is zoomed out hover is picking multiple points which is not desired behavior, pic below:
And as far as zoom is, the more points hover is picking.
Any idea how to overcome this. I've tried using 'point' and 'nearest' but then I get only one data in the tooltip as it is the default behavior.
Also, using 'index' is not possible because two datasets are not always the same length and it is not logical and desired to compare values by index.
Ok, here is the solution I came up with, followed by this ChartJS issue on GitHub. I've made a filter for tooltip and it looks like this now:
plugins: {
tooltip: {
mode: 'x',
displayColors: false,
intersect: false,
filter: function (tooltipItem, currentIndex, tooltipItems) {
// On zoomed out graph, hovering mouse picks a lot of data for x-axis and displays them all in tooltip.
// This filter returns only first item from each dataSet from hover picked items passed
// to tooltip, so it can be correctly displayed in tooltip for different line charts(datasets)
return tooltipItems[currentIndex].datasetIndex !== tooltipItems[currentIndex - 1]?.datasetIndex
},
.
.
.
}
Hover still selects multiple data, but the tooltip shows only one for each dataset.
I recently upgraded from Chart.js v2 to v3. I am drawing realtime line charts with a time-based x-axis that scrolls right as time passes.
In Chart.js v3, as my x-axis tick labels begins to approach the left edge of the chart, it resizes the graph to fit the full label. As shown in the attached image, this creates an empty gap on the left-side of my chart. In Chart.js v2, it would not resize the graph, and would instead allow the label to overflow the canvas.
My x-axis options are:
{
type: 'time',
axis: 'x',
min: minDate.getTime(),
max: maxDate.getTime()
time: {},
ticks: {
minRotation: 45,
maxRotation: 45,
source: 'labels'
}
};
Is there any option to restore the old behavior and allow the tick labels to overflow?
You could format the first tick to be empty string, using ticks.callback
{
type: 'time',
ticks: {
callback: (value, index) => index === 0 ? '' : value
}
}
example in codepen
I was eventually able to get the desired behavior using the afterFit callback.
{
type: 'time',
afterFit: (scaleInstance) => {
scaleInstance.paddingLeft = 0;
scaleInstance.paddingRight = 0;
}
}
I'm looking for a way to set specific values on a y-axis. I have five datasets on a scatter chart and I would like to only show max values of three of them on a separate y axis.
Desired effect
My current approach (image):
{
type: 'linear',
id: 'secondary',
position: 'right',
ticks: {
beginAtZero: true,
fontColor: '#466696',
fontSize: 14,
fontStyle: 'bold',
callback: function (val) {
return '$' + val;
}
},
afterBuildTicks: function (scale) {
scale.ticks = [ctrl.statePension, ctrl.statePension + ctrl.pensionSavings, ctrl.statePension + ctrl.pensionSavings + ctrl.insuranceValue];
},
gridLines: {
drawOnChartArea: false,
}
}
It kind of works, but labels close to each other overlap despite autoSkip being enabled. Is there a way to replicate the behavior from the first image?
I am using a bar chart of chart.js in angular 7.This chart shows the relationship between policies and their number of sales. If the maximum number of sales is 2 or 1 or a small number, the chart shows the values along the y-axis in points, starts from 1 and ends on the maximum value.Right now i have maximum 6 policies, hence the values do not have points in them, but when the number of maximum policies reduce to 2, the values are as 1.0, 1.1, 1.2, 1.3....2.0. I want the values to be non-decimal in the y-axis and also they should start from zero up to the maximum number as 0,1,2,3...,. Is it possible?
//component
chartData1 = [
{
label: 'Policies',
data: this.policies
},
];
chartOptions = {
responsive: true // THIS WILL MAKE THE CHART RESPONSIVE (VISIBLE IN ANY DEVICE).
}
//template
<canvas
baseChart
[chartType]="'bar'"
[datasets]="chartData"
[labels]="labels"
[options]="chartOptions"
[legend]="true"
height="80"
width="100"
[colors]="colors"
(chartClick)="onChartClick($event)">
</canvas>
Within your component, try to define chartOptions as follows:
chartOptions = {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
I want to have x, y-axis like the following image.
It is really sample, but the x,y across on (0,0). and I want the negative part always shows whatever there is a point or now.
Thanks
You can get a result close to your example image, but not exactly the same. You would probably need to create a custom axis to align the tick labels to the zero line.
let axisConfig = {
drawBorder: false,
gridLines: {
lineWidth: 0,
zeroLineWidth: 1
},
ticks: {
max: 6,
min: -6
}
};
new Chart(document.getElementById("chart"), {
type: "scatter",
options: {
scales: {
xAxes: [axisConfig],
yAxes: [axisConfig]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>