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

up vote
0
down vote

favorite

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.

asked Nov 11 at 19:14

JuniorDev

819

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data.
– enxaneta
Nov 11 at 19:34

@enxaneta i can not remove any market. They should be all included in the chart
– JuniorDev
Nov 11 at 19:39

add a comment |

up vote
0
down vote

favorite

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.

Thank you for your help.

asked Nov 11 at 19:14

JuniorDev

819

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data.
– enxaneta
Nov 11 at 19:34

@enxaneta i can not remove any market. They should be all included in the chart
– JuniorDev
Nov 11 at 19:39

add a comment |

up vote
0
down vote

favorite

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.

Thank you for your help.

asked Nov 11 at 19:14

JuniorDev

819

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.

Thank you for your help.

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>

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>

javascript jquery css charts devextreme

asked Nov 11 at 19:14

JuniorDev

819

asked Nov 11 at 19:14

JuniorDev

819

asked Nov 11 at 19:14

JuniorDev

819

asked Nov 11 at 19:14

JuniorDev

819

asked Nov 11 at 19:14

JuniorDev

819

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data.
– enxaneta
Nov 11 at 19:34

@enxaneta i can not remove any market. They should be all included in the chart
– JuniorDev
Nov 11 at 19:39

add a comment |

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data.
– enxaneta
Nov 11 at 19:34

@enxaneta i can not remove any market. They should be all included in the chart
– JuniorDev
Nov 11 at 19:39

Fun fact: if you eliminate "GAT" your chart will look better. GAT has exceedingly big values compared with the rest of your data.
– enxaneta
Nov 11 at 19:34

@enxaneta i can not remove any market. They should be all included in the chart
– JuniorDev
Nov 11 at 19:39

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

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 at 23:26

Stevangelista

1,6291615

@Thank you very much
– JuniorDev
Nov 12 at 8:11

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53252254%2fhow-to-change-the-size-of-my-chart-in-javascript-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
1
down vote

accepted

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 at 23:26

Stevangelista

1,6291615

@Thank you very much
– JuniorDev
Nov 12 at 8:11

add a comment |

up vote
1
down vote

accepted

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 at 23:26

Stevangelista

1,6291615

@Thank you very much
– JuniorDev
Nov 12 at 8:11

add a comment |

up vote
1
down vote

accepted

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 at 23:26

Stevangelista

1,6291615

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 at 23:26

Stevangelista

1,6291615

answered Nov 11 at 23:26

Stevangelista

1,6291615

answered Nov 11 at 23:26

Stevangelista

1,6291615

answered Nov 11 at 23:26

Stevangelista

1,6291615

@Thank you very much
– JuniorDev
Nov 12 at 8:11

add a comment |

@Thank you very much
– JuniorDev
Nov 12 at 8:11

@Thank you very much
– JuniorDev
Nov 12 at 8:11

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky