CODEWITHSUNDEEP
reactjschart.jsreact-chartjs
webcoder
webcoder

Reputation: 1527

How to make bar charts and scatter dots appear underneath each other?

In chart js is it possible to have each bar exactly under each scatter dot? in below images the first one correct and second one is not.

enter image description here

enter image description here

You can check demo here demo

any help please?

Upvotes: 0

Views: 583

Answers (1)

uminder
uminder

Reputation: 26190

You can do it on a per-case basis. The problem is that both charts have different xAxis type (linear and category). Also the yAxis labels are of different length.

To solve the problem on the chart from your demo, you can change the options from your scatter chart as follows.

  1. Define option scales.xAxes.offset: true to make it correspond to the default value defined for bar charts.
  2. Add min and max to scales.xAxes.ticks to horizontally adjust the points with the bars. 
scales: {
   xAxes: [{
       offset: true, 
       gridLines: {
         display: false
       },
       ticks: {
         min: -0.2, 
         max: 3.3,

Please have a look at your amended Demo.

Upvotes: 1

Related Questions