Is there anyway to remove the margin between categoryAxis.labels/valueAxis.labels and plotArea

[Robert]

Hi,

We are trying to implement Bar/Line charts for our project. We have a specification to remove all extra margins/paddings between titles, labels and plotArea. So far, we could manage to remove for labels and titles but the plotArea still has margins/paddings.

 

 

var options = {
        valueAxis: {
               background: "red",
               title: { text: _getSeriesName(), font: chartFont, margin: 0, padding: 0, visible: IsTitlesVisible, background: "blue" },
               labels: { font: chartFont, margin: 0, padding: 0, background: "green" },
               line: { visible: false }
        },
        series: _getSeries(),
        categoryAxis: {
               background: "red",
               title: { text: _getCategoriesName(), font: chartFont, margin: 0, padding: 0, visible: IsTitlesVisible, background: "blue },
               labels: { font: chartFont, margin: 0, padding: 0, background: "green" },
               categories: _getCategories(),
               line: { visible: false }
        },
        plotArea: { margin: 0, padding: 0, background: "orange" }
};

Please also see the attached file to visualization.
Thanks

[Vessy]

Hi Martin,

You can achieve the desired layout by passing negative values to the valueAxis.labels.margin.right and categoryAxis.labels.margin.top options. You can see a working sample demonstrating the suggested approach here:

https://dojo.telerik.com/oFAFonOD

 

Regards,
Vessy
Progress Telerik