I'm graphing some lines on a c3.js line chart, but the data label of the leftmost point is being cut off:
I've tried adding padding to the chart, but this just adds padding to the overall chart. What I need is some way to add some sort of padding to just the bar graph ticks.
Something that I've considered:
I've considered using the "transform" property:
.c3-texts .c3-text text {
transform: translate(10px, 0);
}
But moving the position of all the data labels to the right would end up causing the data labels on the right-hand side of the graph to get cut off.
Here's a simple example of labels getting cut off:
fiddle
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
],
labels: {
format: function(x){
return "Test Label"
}
}
}
});
Any help would be appreciated. Thanks!
#ksav pointed me in the right direction. I remember trying this before, but foolishly, I didn't think of putting decimal numbers. I had tried putting in the value 1, and it gave way too much padding, but doing the following worked perfectly:
axis: {
x: {
padding: {
left: 0,
right: 0,
}
}
}
Related
What I have
I've created 2 graphs like shown in the first image below. I need these 2 graphs to be perfectly aligned on the 0 axis (which is shown in the section below).
Wanted result
In the image below, the graphs are perfectly aligned and should therefore contain 2 different datasets. One should be placed on the left grid and the other one on the right grid.
The options I thought of
I have not seen a way to implement this in ChartJS. Therefore, I thought of some possible solutions that could solve this issue in a different way.
Because both datasets don't have negative values, I could convert the left dataset to negative values (on the x-axis). The downside is that the range would be incorrect. Also, this would give issues with the popup message if you hover your mouse on a value.
Maybe, two canvas objects can be combined that could result in the wanted result
Question
Is there a way to achieve the wanted result within ChartJS? Or can I perform some wizardry to combine two charts nicely into one? Or should I move to the D3.js library for this particular graph?
I did not find a way to "nicely" implement this. I've changed the source code of the ChartJS library to implement this.
This method uses 2 different graphs that render in 2 different canvas objects. These canvas objects are placed side-by-side to let it look like one graph.
This is my result (The code in here is not exactly like the graph in the picture because I changed it to my specific needs).
I've added a custom variable in the options.layout category named sidePadding.
The code of creating the graph:
new Chart(document.getElementById(this.element), {
type: 'scatter',
data: {
datasets: [{
borderColor: this.lineColor,
borderWidth: 1,
pointBackgroundColor: '#000',
pointBorderColor: '#000',
pointRadius: 0,
fill: false,
tension: 0,
showLine: true,
data: [],
}],
},
options: {
aspectRatio: 0.3,
maintainAspectRatio: false,
responsive: true,
layout: {
sidePadding: {
left: 3,
right: -3,
}
}
}
});
The padding on the sides is by default 3 so it does not touch the border of the canvas. I wanted it to touch the border of the canvas, and therefore set it to -3.
Two different graphs need to be created, one for the left side and one for the right side.
The left graph should have the sidePadding.right set to -3. The right graph should have the sidePadding.left set to -3.
Changes in the ChartJS library
I've worked with ChartJS version v2.9.3. This method will possibly not work anymore in a new version.
I've changed the following in the Chart.js file:
Replace (line number around 11800):
// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + 3;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + 3;
to:
// Adjust padding taking into account changes in offsets
// and add 3 px to move away from canvas edges
var layoutOptions = chart.options.layout || {};
var sidePadding = helpers$1.options.toPadding(layoutOptions.sidePadding);
me.paddingLeft = Math.max((paddingLeft - offsetLeft) * me.width / (me.width - offsetLeft), 0) + sidePadding.left;
me.paddingRight = Math.max((paddingRight - offsetRight) * me.width / (me.width - offsetRight), 0) + sidePadding.right;
Also you must add the sidePadding.left and sidePadding.right parameter to ChartJS.
This can be done by changing (line number around 7180):
core_defaults._set('global', {
layout: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// Custom added parameter
sidePadding: {
left: 3,
right: 3,
}
}
});
to:
core_defaults._set('global', {
layout: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// Custom added parameter
sidePadding: {
left: 3,
right: 3,
}
}
});
Note
This is probably not the best way to achieve this. Changing the ChartJS library is bad-practice and updating the library could revert these changes.
If someone has a better way to achieve this, please post your methods or comment below.
If you take a normal bar chart from c3js, the bars will be centered at the x-tick position. I have a chart which goes hourly, so any timespan between 00-24 (usually like 8-16). If I have a line-chart or scatter plot it will align it self exactly on the x-tick nicely, but not as a step-chart or a bar chart.
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 8, 9, 10, 11, 12, 13, 14, 15, 16],
['data1', 1, 1, 0, 1, 0, 0, 1, 1, 1],
],
type: "bar"
},
axis: {
x: {
type: "category",
categories: [],
}
}
});
See this fiddle: https://jsfiddle.net/jvcarphe/1/
I've been trying with all sorts of culling / tick values / time series etc. but I can't for the love of god figure out how to do it. If the type in the fiddle is changed to "line" it does exactly what I want, beside it's not a bar.
I've had to do this before and there doesn't seem to be a simple setting that does it, but a bit of d3 manipulation works. I came to the conclusion it's easier to move the ticks than the bars:
If you know the width of your bar, you can set a css rule to offset the ticks, just change the -10px to whatever is necessary -->
.c3-axis-x .tick line, .c3-axis-x .tick text {
transform: translate(-10px,0);
}
(can't just apply the rule to .tick as c3 overrides its transform style)
If you don't know the width then you need to find it out by querying one of the bars and applying the same style rule dynamically in c3's onrendered callback:
onrendered: function () {
var thisChart = d3.select(this.config.bindto);
var barWidth = thisChart.select(".c3-bar-0").node().getBoundingClientRect().width / 2;
thisChart.selectAll(".c3-axis-x .tick line,.c3-axis-x .tick text").style("transform", "translate(-"+barWidth+"px,0)");
}
Fiddle edited as newer version of c3 didn't work in the fiddle:
https://jsfiddle.net/15w50f06/4/
I started to learn C3.js. It is pretty good to work with.
I got stuck in this part, I hope anyone can help me to go forward .
How to create circle in outer of circle in line chart using c3.js .
This is my example code
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 150, 150, 250],
['data12', 30, 200, 100, 150, 150, 250]
],
type: 'line'
},
});
It is giving one small circle ( Dot kind of ) but I want to create one more circle with different color and inside of that circle I need to show this small circle (Dot Kind of ) .
How to do that?
I have tried to select all circle and apply border for that .I have tried like this
d3.selectAll('circle').each(function(){
this.style('border-radius: 20px;');
});
this is wrong way, also this is not working. How to do that ?
Is it possible in c3.js?
You can set the size of your point using chart options
...
point: {
r: 20
}
...
and you can draw a border by using CSS
#chart .c3-circle {
stroke: black;
stroke-width: 4;
}
(assuming you are drawing the chart in a container with ID chart)
Fiddle - http://jsfiddle.net/yhz8k5k9/
I have a column chart with Highcharts library, something like this:
If you see the red lines maybe you notice what I want achieve. I need to reduce the space between columns and move them to the right, so the chart will have more space between the y-labels and the first column.
Notice that I need a fixed width of 48px for every column. I tried with with groupPadding : 0 and pointPadding : 0 with no luck.
plotOptions : {
series : {
colorByPoint : true,
pointWidth : 48,
borderWidth : 0,
}
},
All the sample code is on jsFiddle.
How can I move all the columns to the right and reduce the space between columns?
UPDATE: As an answer says, a solution is to change the container width to a smaller one. But I need that the grid lines (the grey ones) fill all the page (actually, fill the parent div that would have more width than the chart container). Is it possible to draw the grey lines (the grid lines) outside the chart?
Finally I've done what #HristoIvanov told me in a comment. They suggest that I should put NULL columns at the begining.
Setting the first categorie as NULL and not showing it, is what I need because highcharts left the space for the first column.
That's the code that I needed:
xAxis : {
showFirstLabel: false,
categories : [ null, 'A', 'B', 'C', 'D', 'E', 'F', 'G' ],
[ ... ]
And don't forget the data:
series : [
{ data : [null, 11, 22, 53, 74, 65, 46, 37] }
You can view the result in jsFiddle.
Your code was with a ","
Try this:
plotOptions : {
series : {
colorByPoint : true,
pointPadding : 0,
groupPadding : 0
}
},
Here is your demo: http://jsfiddle.net/zgypy32h/5/
http://jsfiddle.net/zgypy32h/4/
This looks more like what you were going for: JSFiddle
There were a couple things that were giving you trouble. The chart by default wants to fill out the div it's in as much as possible because of Highcharts default settings (check out the reflow option). So to keep the columns close together you have set a max-width or width on the container that you feel satisfies the spacing between columns.
<div id="container" style="max-width: 650px; height: 520px; margin: 0 auto"></div>
And give yourself a little more margin on the left of the chart to compensate.
chart : {
renderTo : 'container',
type : 'column',
showAxes : true,
marginRight : 0,
marginLeft : 50,
spacingLeft : 20,
spacingRight : 0
},
The second is the offset of the y-axis labels to give some spacing between them and the first column. Highcharts doesn't seem to have an initial offset for the first x point, but offset should suffice.
yAxis: {
offset: 60
}
I am trying to put together a bar chart in C3.
http://jsfiddle.net/michaelkuzmin/Lcxe0frw/9/
var chart = c3.generate({
data: {
columns: [
['% Women CS', 0.036, 0.095, 0.105, 0.182, 0.121],
['% Women Math', 0.182, 0.077, 0.182, 0.026, 0.097],
['% Women Comp Eng /EE', 0.039, 0.074, 0.032, 0.095, 0.087]
],
type: 'bar',
labels: true
},
axis : {
y : {
tick: {
max: 0.50,
min: 0,
// padding: {top: 0, bottom: 0}
}
},
x: {
type: 'category',
categories: ['Carleton', 'Alberta', 'Sherbrooke', 'McGill', 'Laval']
}
}
});
1) When I enable value labels the Y axis immediately breaks by setting the max range to 14
2) When I try to set it manually it ignores the Y: max min parameters.
What am I missing?
P/S Somebody posted a very similar question here c3.js y axis min/max not working
but the solution they posted does not work for me. The solution was to use padding = 0. You can uncomment it in the fiddle and see that it makes no difference.
The documentation on c3.js is pretty poor, but it seems that the max and min don't belong in the y.tick object, but directly in the y. Moving them, and then applying the padding to the y as well, seems to resolve the issue. See updated fiddle here.