CODEWITHSUNDEEP
javascriptfusioncharts
sajid sharlemin
sajid sharlemin

Reputation: 162

how to align bullet charts when using fusion chart

I am using fusion chart to render multiple bullet chart. But they don't align properly as the labels of the different charts are of different length. Is there a way to make the charts look consistent?

jsfiddle example

Upvotes: 0

Views: 142

Answers (2)

Tunde Pizzle
Tunde Pizzle

Reputation: 827

A better solution is to adapt the number of character spaces that differ from the list of bullets with a space character \u00A0. for example.

    "caption": "BAU\u00A0>",

    "caption": "A1\u00A0\u00A0\u00A0>",

    "caption": "BAK1>",

this way, you have simply aligned the start of the bullet chart.

JsFiddle

JSFiddle2

Upvotes: 0

Baro
Baro

Reputation: 5520

I tried to find a solution provided by FusionCharts but I found nothing. The only one that I can suggest to you is to try a workaround by setting a fixed width font, and add the same number of characters on any label (not spaces because the captions will be trimmed). This brings many problems, if the caption of the first graph and the sub-caption of the second graph are the longest, will not work, because the font is not the same. The other problem is the need to use the dot char instead of space.

However, this is an example to give you a possible way, not very elegant, but it is a possibility, I hope you help.

http://jsfiddle.net/4af60nrw/1/

var caption1 = "Last Month Revenue";
var subCaption1 = "Actual vs Target";

var caption2 = "Last Month Revenue Test Larger Label";
var subCaption2 = "Actual vs Target";

caption1 = sameChar(caption1, caption2);
caption2 = sameChar(caption2, caption1);

subCaption1 = sameChar(subCaption1, subCaption2);
subCaption2 = sameChar(subCaption2, subCaption1);

function sameChar(txt1, txt2) {
    txt1 = txt1 + '.'.repeat(txt2.length-txt1.length);
  return txt1;
}

...

var revBulletChart = new FusionCharts({
.
.
.
    "caption": caption1,
    "subcaption": subCaption1,
.
.
.
var revBulletChart = new FusionCharts({
.
.
.
    "caption": caption2,
    "subcaption": subCaption2,
.
.
.

Upvotes: 1

Related Questions