This topic contains 19 replies, has 3 voices, and was last updated by Sean Sean 2 months, 4 weeks ago.

Negative on bar charts

  • Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17604

    Hi,

    Can we try following steps:

    1) Please get the code that Metronic uses(according to the chartjs documentation) and use the exactly same code outside Metronic.

    2) Please provide us your code that negative values work and we will test it with Metronic.

    We do not have any code that interacts with chartjs plugin in background. We got the code from the chartjs documentation and just used it as it is.  We will check it further if there is anything hidden can cause this.

    Thanks.

     


    brian@editorr.com
    Participant

    Posts: 18
    Member Reply #17616

    Below is the  code which is used by chartjs and is using negative values.

     

    <script src=”../../../dist/Chart.bundle.js'</script>

     

    <script>

     

    var barChartData = {

    labels: [“Label 1”, “Label 2”, “Label 3”, “Label 4”, “Label 5”, “Label 6”, “Label 7”, “Label 8”, “Label 9”, “Label 10”, “Label 11”, “Label 12”, “Label 13”, “Label 14”, “Label 15”, “Label 16”],

    datasets: [{

     

    backgroundColor: ‘#34bfa3’,

    data: [

    15, “-20”, 25, 30, -25, 20, 15, 20, 25, 30, 25, 20, 15, 10, 15, 20

    ]

    }]

    };

     

     

    window.onload = function() {

    var ctx = document.getElementById(‘canvas’).getContext(‘2d’);

    window.myBar = new Chart(ctx, {

    type: ‘bar’,

    data: barChartData,

    options: {

    title: {

    display: false,

    },

    tooltips: {

    intersect: false,

    mode: ‘nearest’,

    xPadding: 10,

    yPadding: 10,

    caretPadding: 10

    },

    legend: {

    display: false

    },

    responsive: true,

    maintainAspectRatio: false,

    barRadius: 4,

    scales: {

    xAxes: [{

    display: false,

    gridLines: false,

    stacked: true

    }],

    yAxes: [{

    display: false,

    stacked: true,

    gridLines: false

    }]

    },

    layout: {

    padding: {

    left: 0,

    right: 0,

    top: 0,

    bottom: 0

    }

    }

    }

    });

     

    };

     

    Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17635

    Hi,

    Thanks for the provided details. It helped us to find the core of the issue. To make the bars rounded we used a chartjs extension from a 3rd party author that is located in “src/js/framework/components/plugins/charts/chart.init.js”  and included in the bundle using below record in the bundle config file: “default\tools\conf\default.json”:

    “chart.js”: {

    “scripts”: [

    “{$config.path.node_modules}/chart.js/dist/Chart.bundle.js”,

    “{$config.path.src}/js/framework/components/plugins/charts/chart.init.js”

    ]

    }

    The issue seems to be in the round extension and as a workaround you can remove it and consider using the chart without rounded bar style. After the change please recompile the theme then the bar chart works fine with negative values:

    “chart.js”: {

    “scripts”: [

    “{$config.path.node_modules}/chart.js/dist/Chart.bundle.js”

    ]

    }

    You are right, the issue is not related to the chartjs plugin itself. The issue was in the 3rd party round extension that we used and it seems we missed to check it . We apologize for the inconvenience and we will try to find a workaround(the extension is quite complex and as a non author it will be hard to figure the issue out, but we will try) for this issue if possible. Next time we will be more careful on cross checking the issues before escalation. We hope for your understanding.

    Thanks.


    brian@editorr.com
    Participant

    Posts: 18
    Member Reply #17639

    Thanks for the reply.  I will try this and see how it works. I am not as concerned about having rounded edges than I am having negative values.

    Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17679

    Great. Thanks for your understanding. All the best with your project 🙂

Tagged: 

You must be logged in to reply to this topic.