For some reasone all graphs are cut off at the highest value.
How can i fix this? I can't use a fixed y-axis
Edit/Update: As mentioned in the comments, the 5px value can more accurately be just half of whatever your line width value is, I belive default is 2px so in that case you would just want padding: { top: 1 }
There a layout.padding attribute you can set either in options or global. I had this same problem and set
options: {
layout: {
padding: {
top: 5
}
},
...
}
worked fine for me to not cut off the line
http://www.chartjs.org/docs/#chart-configuration-layout-configuration
I used hardcode, just wide draw area at top and bottom. This code based on original Chart.canvasHelpers.clipArea.
const WIDE_CLIP = {top: 2, bottom: 4};
Chart.canvasHelpers.clipArea = function(ctx, clipArea) {
ctx.save();
ctx.beginPath();
ctx.rect(
clipArea.left,
clipArea.top - WIDE_CLIP.top,
clipArea.right - clipArea.left,
clipArea.bottom - clipArea.top + WIDE_CLIP.bottom
);
ctx.clip();
};
You can try clip:false option, worked for me.
Example:
options: {
clip: false,
responsive: true,
interaction: {
intersect: false,
mode: 'index',
}
}
I found this while making line graphs that had the legend displayed at the top. The only work around I found was to move the legend to the bottom
options: {
legend: {
position: 'bottom',
},
}
fiddle
I ran into this Chart.js bug, too.
A very recent fix is shown here.
You'd have to manually edit your Chart.js file src/controllers/controller.line.js
(For Angular 2, this file path will be located inside directory node_modules/chart.js/.)
Or just wait for the next Chart.js release which will most likely contain the fix.
An alternative workaround is described in comment 1 of this bug ticket:
https://github.com/chartjs/Chart.js/issues/4202
The options.layout.padding.top solution didn't work for me (just added padding AFTER the line cut), so I extracted the high/low values from my data and used the suggestedMin and suggestedMax config params like this:
var suggestedMin = {MIN};
var suggestedMax = {MAX};
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: suggestedMin - 1,
suggestedMax: suggestedMax + 1,
}
}]
}
}
This issue has been fixed in the Chart.js library. Just update it and you'll be fine.
I had my data values stored in array. So I set my max and min values like this:
var _array = [1,3,2];
var suggestedMax = Math.max.apply(Math,_array); // 3
var suggestedMin = Math.min.apply(Math,_array); // 1
And than you can set
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false,
suggestedMin: suggestedMin - 1,
suggestedMax: suggestedMax + 1,
}
}]
}
}
And it works, thank you.
Related
The Problem:
I am using polar area chart. For slices in this chart, each value after the largest value should appear one level smaller. The level is as follows: for example, if the value after a 38 slice is 6, it should look like 37. Or I should be able to set it to the level I want. My question is all about sizing the slices on the polar area.
What I get:
What I want:
Sorry for my bad drawing. You can think what i want is like:
scaling very small slices close to large slice.
Methods I tried:
I tried changing the scale and ticks parameters from the link chartjs axes settings but without success.
I put the index data after sorting the array as data into the dataset. It worked as I wanted, but this time the values appeared as index values.
Charts.js polar area scales I tried this also but not worked.
A solution can be reached from the two methods I tried, but I could not.
Code example here:
function SetWorkflowChart(labels, datas, labelColors) {
//label colors
// workflow stats chart
const workflowdata = {
labels: labels,
datasets: [{
normalized: true,
data: datas, // example data: [38, 5,3]
backgroundColor: labelColors,
borderColor: "rgba(0, 0, 0, 0.0)"
}]
};
const workflowconfig = {
type: 'polarArea',
data: workflowdata,
options: {
scales: {
r: {
grid: {
display: false
},
ticks: {
display: false //try2 i tried to set ticks for scale
},
suggestedMin: 5, //try1
suggestedMax: 20,//try1
}
},
plugins: {
legend: {
display: false,
position: "right"
},
},
responsive: false
}
};
workflowChart = new Chart(
document.getElementById('WorkFlowStatsChart'),
workflowconfig
);
}
I'll be pleased if you pay attention.
I'm using charts in my react app. I tried using the Scales and gridlines: false option but it is not working from me.
the image shows my code.
Thank you.
You might check a chart.js sample. From there I found some deviations in the object setup of your example
var config = {
type: 'line',
data: {
datasets: [{
// Here starts your snippet
}]
},
options: {
// The options are outside of the datasets property
scales: {
x: {
gridLines: {
display: false
}
},
y: {
gridLines: {
display: false
}
}
}
}
};
Edit 1: updated the scales with the gridLines property
You can use below code to remove gridlines and if you want to enable X and Y axis its useful
gridLines: {
display: true,
zeroLineColor:'white',
color:'transparent'
}
I have chord generated by ChordJS library. Almost everything is great but with some specific data I have problem becouse of tooltip position. I tried to change this with different options but I couldn't handle that - there are two separatet views at my chord. One with columns so every point inside of column is triggering tooltip. Second one is bar char with some points to select and only when mouse is at these points tooltip is shown.
Here You can see tooltip for column - it's covering bar with point to select.
Here is point at barchart:
I think I have to handle that with options parameter so here what I have for that moment ('tooltips' were changed a lot of times)
chartOptions = {
// Set colors on bars when clicked
onClick: function (e, activeElements) {
if (activeElements[0]) {
let barNumber = this.data.datasets[0].backgroundColor.length
var elementIdx = activeElements[0]._index;
let colors = self.fillColorArray(mintColor, yellowColor, yellowColor, elementIdx, barNumber);
this.data.datasets[0].backgroundColor = colors;
self.props.selectCharBar(elementIdx);
}
},
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
id: 'xAxisA',
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
id: 'yAxisA',
type: 'linear',
position: 'left',
ticks: {
min: 0,
callback: function (value, index, values) {
return value.toLocaleString();
}
}
}]
},
legend: {
labels: {
//Workaround for legend color change when first bar selected by user:
generateLabels: function (chart) {
let labels = ChartJs.defaults.global.legend.labels.generateLabels(chart);
if (labels[0]) labels[0].fillStyle = mintColor;
return labels;
}
}
},
tooltips: {
position: 'average',
intersect: true,
}
};
What I want to achieve? Probably position of tooltip to mirror reflection of it can help but I have problems to do that. Or maybe someone has other idea?
So, I think I've figured out your problem! Your tooltip parameters should be inside an options argument!
Like this:
options:{
tooltips: {
custom:function(tooltipModel)
{
tooltipModel.yAlign="bottom";
tooltipModel.y=tooltipModel.y-30;
},
intersect:true
}
}
I would advise that you wouldn't make the tooltip follow the mouse, it can easily block more elements rather than making them visible.
I've prepared a fiddle with random data, and with a custom function I've forced the tooltip to always be on top. You can also console.log(tooltipModel) and mess around with the parameters for the intended styles.
Hope this helps you.
JSFiddle
I've been testing out chart.js for maybe including it in a project. I just have one smallish issue with it. It doesn't scale some datasets properly. I found somewhat similar questions here in SO, but nothing really that would solve my issue.
So this is what my chart looks like with some datasets:
For some reason, the max values (2.2) look ugly as hell. The reason is, that the dataset has a set of three duplicate values in this case (2.2, 2.2, 2.2). I would like there to be some room on top of this series, so that it would look a bit more reasonable.
How do you properly add "padding" on top the the series line? I would like a solution where I could rely on chart.js to find out the max value, and then maybe update that with some padding on the scale(like x + 10). Issue is, that I cant just hard code the min max values, because I can have over 200 different values that can be selected, and they can vary A LOT in scale.
Here is how I render the chart for now:
return new Chart(context, {
type: 'line',
data: {
labels: labels.data,
datasets: dataSets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
ticks: {
beginAtZero: false
},
yAxes: [{
ticks: {
beginAtZero: false
},
id: 'A',
type: 'linear',
position: 'left',
}, {
ticks: {
beginAtZero: false
},
display: displayBAxis,
id: 'B',
type: 'linear',
position: 'right',
}]
}
}
});
This may not be the cleanest way but you can play with it as you see fit.
In short, you need to create a function that finds the max value out of all your dataSets arrays and in yAxes.ticks set max to that functions return value.
More details below
Referencing here first:
data:{
labels: labels.data,
datasets: dataSets //talking about this first
}
Create a function that will go through these arrays and get the max of all arrays. I did it using this but you can do it better I'm sure:
function getMax(){
var max = 0;
dataSets.forEach(function(x, i){
max = Math.max(max, Math.max.apply(null, x.data));
});
return max + 2;
}
Then in your return in yAxes you should be able to have:
ticks: {
beginAtZero: false,
max: getMax()
},
You can find the min and max of your dataset, then add/subtract a percentage of the difference (range).
For example, say you use 1% of the range.
[0.1, 0.2, 0.5] gives (1%)x(0.5-0.1)=0.004, so [min,max]=[0.096,0.504].
[1500, 1800, 3500, 3600] gives (1%)x(3600-1500)=21, so [min,max]=[1479,3621].
Can someone told me how to modify bar width in Chartjs 2 bar charts. There is nothing about it in the documentation.
https://github.com/nnnick/Chart.js/tree/v2.0-dev/docsI don't know what to do.
For version 2.4.0
barThickness - Manually set width of each bar in pixels. If not set, the bars are sized automatically.
options = {
scales: {
xAxes: [{
barThickness : 73
}]
}
}
For me, trying 2.0 beta, what worked was to set the barPercentage on the xAxes scale option.
This is what I used:
var options = {
data: chartData,
type: "bar",
options: {
scales: {
xAxes: [{ barPercentage: 0.5 }]
}
}
};
var chart = new Chart(chartCtx, options);
Note that there seems to be some changes going on. The actual configuration would depend on which v2.0 you are using.
For Version 2.0.0-alpha
Set categorySpacing for the xAxes. You can do this globally
Chart.defaults.bar.scales.xAxes[0].categorySpacing = 0
or you can do it by chart
...
scales: {
xAxes: [{
categorySpacing: 0
}],
...
Fiddle - http://jsfiddle.net/beehe4eg/
For Version 1.0.2
Adjust the options barValueSpacing and barDatasetSpacing to make the bars closer. This will automatically increase their width.