Jump to content
JChartFX Community
  • 0

giving margin between bars


sja

Question

9 answers to this question

Recommended Posts

  • 0

To increase the space between series you would use the IntraSeriesGap property as follows

chart1.setGallery(cfx.Gallery.Bar);
chart1.getGalleryAttributes().setIntraSeriesGap(20);

Please note that this space is in pixels, because it is a float we will consider adding a feature in future builds to supply it as a percentage.

Also note that the space shared by all the series in a point results after the Series.Volume property is used so if you see to much space between different points you can decrease that space by increasing the Volume as follows

chart1.getAllSeries().setVolume(85);

In this case volume is a percentage of the total space.

Regards,

JuanC

Attachments.zip

Link to comment
Share on other sites

  • 0

var countryName = "";

var chart1;

$(document).ready(function ($) {

chart1 = new cfx.Chart();

chart1.setGallery(cfx.Gallery.Gantt);

chart1.getView3D().setEnabled(true);

chart1.getLegendBox().setVisible(false);

var i = 0;

var j = 0;

var data = chart1.getData();

data.setSeries(1);

data.setPoints(3);

var items1 = [{

"type": "Internal",

"number": 5

}, {

"type": "Outgoing",

"number": 7

}, {

"type": "Incoming",

"number": 10

}];

chart1.setDataSource(items1);

chart1.getAllSeries().getBorder().setEffect(cfx.BorderEffect.Raised);

chart1.getAxisX().getGrids().getMajor().setVisible(false);

chart1.getAxisY().getGrids().getMajor().setVisible(false);

chart1.getAxisY().getGrids().getMinor().setVisible(false);

chart1.getAxisX().getGrids().getMinor().setVisible(false);

chart1.getAxisY().setVisible(false);

chart1.getAllSeries().getPointLabels().setVisible(true);

chart1.getView3D().setEnabled(false);

chart1.getAllSeries().setVolume(70);

chart1.getGalleryAttributes().setIntraSeriesGap(60);

chart1.create(document.getElementById('ChartDiv'));

Link to comment
Share on other sites

  • 0

The data you posted in this sample only has 1 series (called number) so the intraSeriesGap property will not apply, try setting data with 2 series, e.g.

[{"type":"Internal", "number1":5, "number2":8}, ...

To see how the intraSeriesGap is applied, note that this property is in pixels.

JuanC

Link to comment
Share on other sites

  • 0

In a single series chart you can increase the empty space between bars (making the bars thinner) by decreasing the volume property in the all series object, e.g.

chart.getAllSeries().setVolume(40);

This number is a percentage. 100 would give you no empty space between bars. Please note that the distance between the middle of a bar and the next will not change, only the empty space.

JuanC

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...