How to merge two charts in Chart.js?

Question

Vue.js

Good afternoon, there are two objects in datasets, each in data has the same amount of data. Some data needs to be displayed in Bar, others - in Line. But for one value, measured in tens and hundreds of thousands, and for the other - mostly units, maximum - tens. Those. the usual mixed chart from the documentation provides not quite the desired functionality. Since both charts have the same scale, it turns out that the line chart with its miserable units stupidly stretches as a solid line at the very bottom of the chart, because. tied to a scale with hundreds of thousands. It looks like this:


And it should be like this, with two y-axes, each for its own type of chart:


Since the application is made on vue, I will be especially grateful for a hint on how to do this in the vue context.

Answer 1

We need to define two Y-axes:

options: {
  scales: {
    yAxes: [
      { id: 'y1', position: 'left' },
      { id: 'y2', position: 'right' },
    ],
  },
},

application is made on vue

There is vue-chartjs , which usage for your case might look like .

Answer 2

What is the best way to set a fixed width for the form or elements?

Not worth it if you need adaptive.
Use width: 100%; max-width: 616px
with a height of about the same min-height: 266px;
Wrapping inputs in divs is best for displaying errors.
background of the input itself via rgba to add transparency transparent.
You'll get on with it.
https://jsfiddle.net/webirus/ypukanb2/