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.

Answer 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