CODEWITHSUNDEEP
javascriptcharts
Anders Pedersen
Anders Pedersen

Reputation: 2385

custom bar at specific position chart js

I'm drawing a chart with 'chart.js'

http://jsfiddle.net/6bjy9nxh/311/

var barData = {
  labels: ['Italy' ,'UK', 'USA', 'Germany', 'France', 'Japan'],
  datasets: [
  {
    label: '2010 customers #',
    fillColor: '#382765',
    data: [2500,50, 1902, 1041, 610, 1245, 952]
  }
]
};

var context = document.getElementById('clients').getContext('2d'); 
var clientsChart = new Chart(context).Bar(barData);

I then want to add a 'custom' bar that start on second label and 1000 height (goes on top of another bar (blocks some of it))

example:

enter image description here

is there any simple approach to accomplish this without rewriting a 3rd of the chartjs plugin ?

maybe split the bar color into two ?

Upvotes: 2

Views: 1445

Answers (1)

woody
woody

Reputation: 96

With Chart.js 2.x you can use stacked charts which would solve your problem.

Have a look at the documentation or the updated code snipped for more details.

var barData = {
  type: 'bar',
  data: {
    labels: ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
    datasets: [{
      label: '2010 customers #',
      backgroundColor: '#382765',
      data: [2500, 1000, 1041, 610, 1245, 952]
    }, {
      label: 'Dataset 2',
      backgroundColor: '#000',
      data: [0, 1248, 0, 0, 0, 0]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }]
    }
  }
}

var ctx = document.getElementById("clients").getContext("2d");
new Chart(ctx, barData);
<canvas id="clients" width="500" height="350"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>

Upvotes: 1

Related Questions