[Chartjs]-What kind of graph could I use to achieve this with ChartJS (or similar)?

by

1👍

✅

No way to create “range” only by one value.

For example, the data for the red bar in your example is not only 20 -or- -180 but -180 to 20 = nested array (Multidimensional Array)

data = [[-180,20]];

snippet:

labels1 = ["a","b","c","d"];
data = [[20,-180],[40,-160],[20,-120]];

var data = {
  labels: labels1,
  datasets: [
    {
      label: "hello",
      data: data,
      backgroundColor: ["yellow", "blue", "orange"],
      borderWidth: 5
    } 
  ]
}

var options = {
  responsive: true,
  scales: {
    xAxes: [{ 
      stacked: false,
    }],
    yAxes: [{ 
      stacked: false,
      ticks: {
        gridLines: {
          drawOnChartArea: true
        },
        max: 100,
        min: -180,
      }
    }]
  },
  title: {
    display: true,
    text: name
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
};


/*for(let i = 0; i<10; i++)
{
	let labels2 = [];
	let datos2 = [];
	labels2.push(i);
	datos2.push(-120);
}*/



var ctx = document.getElementById("myChart");

var chartInstance = new Chart(ctx, {
  type: 'bar',
  data: data,
  options:options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<h2>
Hello World!
</h2>
<canvas  id='myChart'/>

Leave a comment