CODEWITHSUNDEEP
javascriptchart.js
Dev Dev
Dev Dev

Reputation: 387

ChatJS 2.8.0 min/max axis issue and labels on the top

I'm using ChartJS 2.8.0 and I have the code below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<div class="reportGraph">
    <canvas id="chartJSContainer"></canvas>
</div>
    <script>
        const labels = ["stable","happy","composed","certainty","active","aggressive",["responsible","causativ"],["correct","estimation"],"appreciative",["communication","level"]];
        const labels2 = [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"];
        const data = {
            labels: labels,
            datasets: [
                {
                    label: "",
                    data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
                    borderColor: "black",
                    backgroundColor: "transparent",
                    type: "line",
                    borderWidth: 2,
                    order: 0,
                    lineTension: 0,
                    fill: false
                },
                {
                    label: "Urgently needs attention",
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    borderColor: "rgb(221, 221, 221)",
                    backgroundColor: "rgb(221, 221, 221)",
                    order: 2
                },
                {
                    label: "Requires attention",
                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    borderColor: "rgb(136, 136, 136)",
                    backgroundColor: "rgb(136, 136, 136)",
                    order: 1
                },
                {
                    label: "Acceptable under perfect condition",
                    data: [0, 0, 0, 0, 0, , 0, 0, 0, 0],
                    borderColor: "rgb(228, 185, 192)",
                    backgroundColor: "rgb(228, 185, 192)",
                    order: 3,
                    type: "bar"
                }
            ]
        };
        const config = {
            type: "bar",
            data: data,
            options: {
                responsive: true,
                legend: {
                    display: true,
                    position: 'right',
                    labels: {
                        fontColor: 'black',
                        filter: function(item, chart) {
                            return item.datasetIndex !== 0;
                        }
                    }
                },
            },
            scales: {
                y: {
                    ticks: {
                        suggestedMin: -100,
                        suggestedMax: 100
                    }
                },
                x: {
                    position: "bottom",
                    grid: {
                        offset: true
                    }
                },
                x2: {
                    position: "top",
                    grid: {
                        offset: true
                    },
                    labels: labels2
                }
            }
        };
        var chart = new Chart(document.getElementById("chartJSContainer"), config);
    </script>
</body>
</html>

I am unable to have the Y axis to start from -100 to 100 even though I added a code for it. Also, I want to have the same X-axis labels displayed on the top of the graph too. Any help on the issues I have on this code please? Thanks.

Note: Please do not change the library version 2.8.0 when you suggest a code.

Upvotes: 0

Views: 122

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31421

You are using V3 syntax for the scales, version 2 used a different syntax, please look at this link for the documentation for the version you are using

Live example with scale min-max:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }],
      xAxes: [{offset: true},
      {
        position: 'top',
        offset: true,
        labels: [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"]
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>

Upvotes: 1

Related Questions