how to change the size of my chart in Javascript / Jquery

Question

I am using DevExtreme widgets to create a line chart in JQuery as below

var dataSource = [{"Date Range": "August-2018",
Benelux: 194,
Czech_Slovakia: 128,
EECA: 23,
France: 406,
GAT: 1212,
Iberia: 213,
Israel: 116,
Italy: 498,
MEA: 159,
Nordics: 356,
Poland: 143,
Russia: 224,
SEE: 183,
Switzerland: 163,
Turkey: 36,
UKI: 259},
{"Date Range": "September-2018",
Benelux: 177,
Czech_Slovakia: 117,
EECA: 26,
France: 511,
GAT: 1277,
Iberia: 254,
Israel: 97,
Italy: 649,
MEA: 153,
Nordics: 322,
Poland: 170,
Russia: 283,
SEE: 217,
Switzerland: 170,
Turkey: 18,
UKI: 247},
{"Date Range": "October-2018",
Benelux: 193,
Czech_Slovakia: 146,
EECA: 45,
France: 568,
GAT: 1280,
Iberia: 282,
Israel: 128,
Italy: 828,
MEA: 164,
Nordics: 387,
Poland: 170,
Russia: 337,
SEE: 200,
Switzerland: 151,
Turkey: 40,
UKI: 249}];

           var chart = $("#chart").dxChart({
        palette: "Soft Blue",
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: "Date Range",
            type: "line"
        },
        margin: {
            bottom: 20
        },
        valueAxis: [{
            tickInterval: 100
        }],
        argumentAxis: {
            valueMarginsEnabled: false,
            discreteAxisDivisionMode: "crossLabels",
            grid: {
                visible: true
            }
        },
        series: [
            { valueField: "Benelux", name: "Benelux" },
            { valueField: "Czech_Slovakia", name: "Czech_Slovakia" },
            { valueField: "EECA", name: "EECA" },
            { valueField: "France", name: "France" },
            { valueField: "GAT", name: "GAT" },
            { valueField: "Iberia", name: "Iberia" },
            { valueField: "Israel", name: "Israel" },
            { valueField: "Italy", name: "Italy" },
            { valueField: "MEA", name: "MEA" },
            { valueField: "Nordics", name: "Nordics" },
            { valueField: "Poland", name: "Poland" },
            { valueField: "Russia", name: "Russia" },
            { valueField: "SEE", name: "SEE" },
            { valueField: "Switzerland", name: "Switzerland" },
            { valueField: "Turkey", name: "Turkey" },
            { valueField: "UKI", name: "UKI" }         
        ],
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center",
            itemTextPosition: "bottom"
        },
        title: { 
            text: "Order Trend Volume",
            subtitle: {
                text: "by Market / Month"
            }
        },
        "export": {
            enabled: true
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (arg) {
                return {
                    text: arg.valueText
                };
            }
        }
    }).dxChart("instance");

<link href="https://cdn3.devexpress.com/jslib/18.1.7/css/dx.common.css" rel="stylesheet"/>
<link href="https://cdn3.devexpress.com/jslib/18.1.7/css/dx.light.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/18.2.3/js/dx.all.js"></script>
<div id="chart"></div>

Everything is working fine, just want to make the chart bigger and more visible to read in the Y axis as I have many inputs within the same range.

I tried to set up $("#chart").height("1800px"); in Jquery also in css but it didn't override the default values.

I think I should use tick option to change the scale of my Y axis, in my case 0,200,400... to for example 0,50,100... but I didn't know how to add it. when I affect a value to it I don't see any changes.

Thank you for your help.

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data. — enxaneta
– enxaneta, Commented Nov 11, 2018 at 19:34
@enxaneta i can not remove any market. They should be all included in the chart — JuniorDev
– JuniorDev, Commented Nov 11, 2018 at 19:39

Stevangelista · Accepted Answer · 2018-11-11 23:26:23Z

1

Both options you're looking for are documented in the DevExtreme source you point to.

To change the axis interval size, you've got valueAxis as an array of objects, but it's simply an object:

valueAxis: { tickInterval: 50}

Source: https://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/valueAxis/tickInterval/

To set/change the chart size, there's a comparable size object that accepts properties for height & width:

size: { height:1800}

https://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/size/

I've wired up an example from your code but with the desired axis increment of 50 and a height of 1800px here: https://codepen.io/anon/pen/mQrQOr

answered Nov 11, 2018 at 23:26

Stevangelista

1,8291 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JuniorDev Over a year ago

@Thank you very much

Collectives™ on Stack Overflow

how to change the size of my chart in Javascript / Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related