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.
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'
}
Please look into this fiddle
If you resize the output window you will notice that the labels of x-axis becomes slanted. which is fine for me. But if you notice that the end position of label is center of bar. I want the end position of label to be the right-side end of bar. How can achieve this?
My config is
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
datasets: [{
data: [6, 87, 56, 15, 88, 60, 12],
}]
},
options: {
legend: {
"display": false
},
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
display: false,
gridLines: {
display : false
},
ticks: {
display: false,
beginAtZero:true
}
}],
xAxes: [{
gridLines: {
display : false
},
ticks: {
beginAtZero:true
}
}]
}
}
});
It is certainly possible to achieve a 'right' aligned scale tick label instead of the original 'center' aligned scale tick label, but unfortunately it is not very straight forward to implement. Let me walk you through how to do it and then provide an example.
1) First, since there is no configuration option to control this, we have to look at doing some sort of custom implementation. It turns out that the scale tick labels in a bar chart are rendered as part of the Category scale's draw method. Therefore, we must somehow overwrite this draw method to change to a new alignment.
2) According to the API there is a documented way to create new scale types, so we should be able to use a similar approach to extend the Category scale type and overwrite it's draw method.
Since all scales are wrapped up in the ScaleService we have to use the below approach to extend an existing scale type.
var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({});
3) Now its just a matter of figuring out what part of the draw method we need to modify. After looking it over, it looks like we need to change the logic for calculating labelX (the pixel position to render the tick label). Here would be the new logic.
// current logic for getting pixel value of each label (we will use the logic below to
// adjust if necessary)
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;
// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getDatasetMeta(0);
// use the bart chart controller to calculate the bar width
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler());
// if the labels are rotated, then move the pixel location from the middle of the bar
// to the far right of the bar
if (labelRotationRadians != 0) {
labelX += barWidth / 2;
}
4) Now we just need to register our new scale and configure the chart to use it (instead of the bar chart default category scale).
Chart.scaleService.registerScaleType('categoryRightAligned', CategoryRightAligned, {position: 'bottom'});
xAxes: [{
type: 'categoryRightAligned',
gridLines: {
display : false,
offsetGridLines: true
},
ticks: {
beginAtZero:true,
}
}]
Refer to this jsfiddle example to see it in action and to see how everything fits together.
I'm trying to use linear scale on x-axis in my chart.js chart.
I add some code beause stackoverflow makes it obligatory when adding a jsfiddle url, but I don't see the point :
var options={
scales:{
xAxes:[{ type: "linear"}]
}
};
I'm getting a very strange chart (2nd one) : http://jsfiddle.net/t0krmau8/
In the first chart, I'd like to get more space between 2 and 4 (2 times more space than between 1 and 2), that's why I'm using a linear scale.
Am I using the linear scale wrong? Or should I use something else?
Thanks
You're not providing the data in correct format for the scatter line plot.
The correct format to provide the data is described by the following example from Chart.js Docs.
var scatterChart = new Chart(ctx/* your canvas context*/, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
source
I think the x and y should be separable into different arrays, but you can always do a combination step and combine them into objects.
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.