You must be logged in to post your query.
Home › Forums › Chart Support › Remove all paddings and margins
Tagged: full fit chart, remove margin, remove padding
I would like to remove all paddings and margins in charts in order to align the chart with an adjacent grid. You can find the working fiddle below, I removed all the margins that I can find but the chart still has paddings from bottom, top and left.
http://jsfiddle.net/teoj05js/1/
dodo,
As of now the margins for the plot area are automatically calculated and can’t be customized. For removing the extra margin from the bottom and left you can set axisX margin and axisY margin to -10 as shown below:
axisX: { margin: -10 }, axisY: { margin: -10 }
Please take a look at this JSFiddle for a working example with sample code.
__ Anjali Team CanvasJS
Hi Anjali,
I can remove the bottom and the left margins with negative values, but can’t remove the top margin. Is there any way to do that, if not do you have any plans to implement such a feature.
As you are looking to remove margin from all four sides, you can add a dummy dataSeries with no dataPoints and secondary axisX and axisY. Code snippet shared below shows the same:
var chart = new CanvasJS.Chart("chartContainer",{ backgroundColor: "red", axisX: { valueFormatString: " ", lineThickness: 0, gridThickness: 0, tickLength: 0, margin: -10, }, axisY: { valueFormatString: " ", lineThickness: 0, gridThickness: 0, tickLength: 0, margin: -10 }, axisX2: { valueFormatString: " ", lineThickness: 0, gridThickness: 0, tickLength: 0, margin: -10, }, axisY2: { valueFormatString: " ", lineThickness: 0, gridThickness: 0, tickLength: 0, margin: -10 }, data: [ { type: "bar", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55}, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14} ] }, { type: "bar", axisXType: "secondary", axisYType: "secondary", dataPoints: [] } ] }); chart.render();
That doesn’t seem to get rid of all the padding on the right hand side.
@ebrewer,
Removing padding towards secondary x-axis in the given example is not possible as of now. However setting negative margin to all the axes is the nearest solution that you can achieve in the above example.
If you could share JSFiddle with your use-case, we can suggest you possible solution according to the use-case.
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register