Scatter fusion chart – X Axis lable data is not getting displayed completely – PHP

I am plotting a Scatter fusion chart (not evaluation version) but I have an issue here with X-axis label data.

I have less width for my chart, so all x-axis data values are not getting displayed; However, I want to display all the x-axis data values with no change in width.

Below is the sample code:

FusionCharts.ready(function(){
      var chartObj = new FusionCharts({
   type: "selectscatter",

// Disable credit label
        creditLabel: false,
        renderAt: "chart-container",
        width: "350",
        height: "350",
        dataFormat: "xml",
        dataSource: xmldata
   
});
      chartObj.render();
    });

var xmldata = '<chart theme="fusion" caption="Products Sold vs. Price points" subcaption="Harry's SuperMart - Last Week" yaxisname="Quantity Sold" xaxisname="Price(In US $)" xaxismaxvalue="1000" xaxisminvalue="100" yaxismaxvalue="200" xnumberprefix="$" ynumbersuffix=" units" showcanvasborder="1" canvasborderthickness="0.4" canvasborderalpha="50" showxaxisline="0" showformbtn="1" formaction="#" submitdataasxml="1"><categories verticallinecolor="666666" verticallinethickness="1" alpha="40"> <category label="$100" x="100" showverticalline="0" />        <category label="$200" x="200" showverticalline="1" /> <category label="$300" x="300" showverticalline="1" />        <category label="$400" x="400" showverticalline="1" />        <category label="$500" x="500" showverticalline="1" />        <category label="$600" x="600" showverticalline="1" />        <category label="$700" x="700" showverticalline="1" />        <category label="$800" x="800" showverticalline="1" />        <category label="$900" x="900" showverticalline="1" />        <category label="$1000" x="1000" showverticalline="0" />    </categories>    <dataset drawline="0" seriesname="Televisions" color="#6baa01" anchorsides="3" anchorradius="4" anchorbgcolor="#6baa01" anchorbordercolor="#6baa01">        <set id="TV_1" y="559" x="714" />       <set id="TV_2" y="293" x="988" />        <set id="TV_3" y="231" x="970" />        <set id="TV_4" y="528" x="142" />        <set id="TV_5" y="95" x="800" />        <set id="TV_6" y="515" x="813" />        <set id="TV_7" y="444" x="928" />        <set id="TV_8" y="592" x="238" />        <set id="TV_9" y="229" x="959" />        <set id="TV_10" y="238" x="521" />        <set id="TV_11" y="285" x="222" />        <set id="TV_12" y="524" x="863" />        <set id="TV_13" y="422" x="820" />        <set id="TV_14" y="344" x="894" />        <set id="TV_15" y="510" x="800" />        <set id="TV_16" y="132" x="785" />        <set id="TV_17" y="381" x="214" />        <set id="TV_18" y="210" x="961" />        <set id="TV_19" y="496" x="575" />        <set id="TV_20" y="330" x="847" />        <set id="TV_21" y="436" x="893" />        <set id="TV_22" y="406" x="157" />        <set id="TV_23" y="125" x="349" />        <set id="TV_24" y="450" x="818" />        <set id="TV_25" y="455" x="615" />        <set id="TV_26" y="328" x="256" />        <set id="TV_27" y="188" x="460" />        <set id="TV_28" y="565" x="350" />        <set id="TV_29" y="149" x="582" />        <set id="TV_30" y="425" x="970" />    </dataset>    <dataset seriesname="Cell Phones" color="#f8bd19" anchorsides="4" anchorradius="4" anchorbgcolor="#f8bd19" anchorbordercolor="#f8bd19">        <set id="Mob_1" y="335" x="156" />        <set id="Mob_2" y="339" x="927" />        <set id="Mob_3" y="328" x="847" />        <set id="Mob_4" y="1" x="177" />        <set id="Mob_5" y="246" x="175" />        <set id="Mob_6" y="368" x="441" />        <set id="Mob_7" y="146" x="200" />        <set id="Mob_8" y="347" x="482" />        <set id="Mob_9" y="1" x="463" />        <set id="Mob_10" y="63" x="440" />        <set id="Mob_11" y="77" x="211" />        <set id="Mob_12" y="108" x="824" />        <set id="Mob_13" y="44" x="850" />        <set id="Mob_14" y="77" x="712" />        <set id="Mob_15" y="15" x="199" />        <set id="Mob_16" y="333" x="836" />        <set id="Mob_17" y="31" x="482" />        <set id="Mob_18" y="90" x="604" />        <set id="Mob_19" y="294" x="716" />        <set id="Mob_20" y="241" x="870" />        <set id="Mob_21" y="258" x="421" />        <set id="Mob_22" y="186" x="456" />        <set id="Mob_23" y="255" x="327" />        <set id="Mob_24" y="203" x="995" />        <set id="Mob_25" y="35" x="792" />    </dataset></chart>';

Answer

You can configure the arrangement and display properties for x-axis data labels using the labelDisplay attribute. To display all the x-axis data labels with no change in your chart width you can try the rotate mode with or without enabling the slantLabel attribute as per your requirement.

Please check the implementation here: http://jsfiddle.net/eaqzL5hs/

Advertisement

Answer