How can I move columns to the right in a Highcharts chart? - javascript
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
}
Related
amChart clustered-column-chart labels are not related with columns
I am using amchart5 with React and based on this demo decided to create clustered vertical chart. if I give "500px" as width it would be like width:"500px" if I give "400px" or less it would be like width:"400px" or less as you see place of labels like 2021 or 2021 changed ... so how can I fix this? I want to give differents width and it will work without this problem
Default gradiant size of this chart demo is big that's why labels would be hidden.
Added minGridDistance to my xAxis like this:
const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "x",
renderer: am5xy.AxisRendererX.new(root, {
cellStartLocation: 0.1,
cellEndLocation: 0.9,
minGridDistance: 20,
maxWidth: 150,
}),
tooltip: am5.Tooltip.new(root, {}),
})
);
and it solved!
How can I add more padding to tree chart in echartjs?
For some tools, we use tree chart from echartjs .
Everything works fine but I have one problem and it is the size of padding in tree chart.
As you can see in this image everything is fine, but I can't enable more padding to this chart :
i want this chart for my friend website (امروز چندمه)
And this is my code :
myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
top: '1%',
left: '15%',
bottom: '1%',
right: '7%',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});
Thanks :)
You need to change the values of the top and bottom properties to negative values, and the left and right properties to larger positive values. For example, set top : -10% and bottom: -15%. Then Right: 20% and left:15%. You will have to try different values until you find a combination that suits your situation.The higher the right and left values, and the lower the top and bottom values, the more pronounced the effect. That is, making your chart taller and narrower, thus spacing or padding out the values. You could also reduce the value of the symbolSize property e.g to 1. Here is the link to the JsFiddle
Echart version 4 removed the padding option from the nodes. I also tried to fix this but there is an issue on echart github. You can use other features like mouseOver.
Seems like in Echart version 4 there is no way to define padding for nodes But there is a way to avoid collapsing of nodes. This tree is gonna take as much space (width and height) as you allow it to take. So you can just specify bigger height value for outer div. And then overflow: auto; for next div. <div style="overflow:auto"> <div style="min-height:2000px"> <EchartsSVG/> </div> </div> You can create a formula to count your nodes and calculate min-height
How to add padding in a bar chart between the outer bars and the left/right sides in Chart.js?
When creating a bar chart in Chart.js all bars take up the whole horizontal space. How can I add some padding to the most left and most right bar to achieve what you see in the image below:
Alternativly this may be achieved if the bars are aligned in the center and using a max-width in percentage on the bars itself, so that they will never fill up the whole space. But I can't find any options for that either.
Currently I'm adding two 0 values with blank labels on each side, which works, but it's just a workaround:
var data = {
labels: ['', '', 1, 2, 3, '', ''],
datasets: [{
data: [0, 0, 36500, 59000, 65000, 0, 0],
backgroundColor: [
null,null,
'blue','blue','blue',
null,null
],
}]
};
I'm using Chart.js 2.3.
Data graph labels cut off on c3.js chart
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,
}
}
}
Code works on fiddle but not when I do /show
Everything works on jsfiddle, but when I add /show after the whole address, the code doesn't fully function. For instance, I can adjust the range in jsfiddle, but on /show, I can't select a specific range. I know there are some similar questions like mine, but none of them asked about why /show wouldn't work if my code with jsfiddle works. Here are the links to my code:
code:
$(document).ready(function() {
// $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
// rangeSelector : {
// inputEnabled: $('#container').width() > 2000,
// selected :1
// },
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL Stock Price',
data : [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
lineWidth : 0,
marker : {
enabled : true,
radius : 2
},
tooltip: {
valueDecimals: 2
}
},
{
name : 'AAPL Stock',
data : [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
lineWidth : 0,
marker : {
enabled : true,
radius : 2
},
tooltip: {
valueDecimals: 2
}
}]
});
});
I know this is a very simple, dumb code, I was just testing how much data highStock can handle.
jsfiddle: http://jsfiddle.net/57LJG/3/
/show: http://jsfiddle.net/57LJG/3/show
Set a maximum width for the container to fix this buggy chart like here, apparently something goes wrong with large widths resulting in an error Cannot read property 'r' of undefined, this seems to fix the problem: <div id="container" style="height: 400px; min-width: 310px; max-width:1024px"></div>
Indeed, it looks like a bug in 1.3.10 version (1.3.9 works fine: http://jsfiddle.net/57LJG/14/show/). Workaround is indeed to set max-width, but that will work only for a certain datasets (different number of points == different max width). I have already reported this here: https://github.com/highslide-software/highcharts.com/issues/2834 Thanks!