1

I have a chart component and i use it in a view. I want to make it smaller but max-width doesn't work.

Here is the codes:

<div id="chart">
    <ChanceChart :chartData="state.chartData" :chartOptions="state.chartOptions"/>
</div>

And:

  #chart {
    position: absolute;
    left: 0;
    top: 20px;
    display: block;
    width: 100%;
    max-width: 100px;
  }

My ChanceChart.vue :

<script>
import { defineComponent } from 'vue'
import { Line } from 'vue3-chart-v2'

export default defineComponent({
  name: 'ChanceChart',
  extends: Line,
  props: {
    chartData: {
      type: Object,
      required: true
    },
    chartOptions: {
      type: Object,
      required: false
    },
  },
  mounted () {
    this.renderChart(this.chartData, this.chartOptions)
  }
})
</script>

And maybe it can help, when my datas were in the ChanceChart.vue i could set the width. Now, when my data is in my main component and i use props, and v-binding it, it doesn't work.

And here is my data:

state: {
        chartData: {
          datasets: [
            {
              label: "Enemy's Chance",
              borderColor: '#1161ed',
              data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 41, 190]
            },
            {
              label: 'My Chance',
              borderColor: '#f87979',
              color: '#fff',
              data: [60,60,60,60,60,60,60,60,60,60,60,60, 60]
            }
          ],
          labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
        },
        chartOptions: {
          responsive: false
        }
      }

Can anyone know what is the problem?

Laboda Dániel
  • 73
  • 1
  • 5

2 Answers2

0

You should override the style width !important. There is the same question that can help you Setting width and height

Bayan Saedi
  • 13
  • 1
  • 4
0

Check out the link below in SandBox that i made based on your question. It contains a working example for your case in vue.

(Link to the example in Sandbox)

<template>
  <div>
    <div id="chart">
      Your ChanceChart placeholder!
      <img alt="Vue logo" src="../assets/logo.png" width="100%">
    </div>
    <p>◄ width: 100% & max-width: 100px</p>
    <img alt="Vue logo" src="../assets/logo.png" width="50%">
    <a
      href="https://stackoverflow.com/questions/70448373/max-width-doesnt-work-with-a-components-div/70449079#70449079"
      target="_blank"
      >Ref</a
    >
  </div>
</template>


<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>

<!--Add "scoped" attribute to limit CSS to this component only-- >
    <style scoped>
        #chart {
            background: beige;
        margin: 10px;
        padding: 10px;
        font-weight: bold;

        position: absolute;
        left: 0;
        top: 20px;
        display: block;
        width: 100%;
        max-width: 100px;
}
    </style>

enter image description here

Update

Keep the same settings and change the responsive property of your chartOptions to true. Then your chart extends to the maximum width that you have already set for.

 chartOptions: {
      responsive: true,
    },

Check the solution here in sandbox. enter image description here

Ali Safari
  • 1,535
  • 10
  • 19
  • Now the div 100px but my chart is overhang the div. Maybe this is the problem. Do you have any solution? – Laboda Dániel Dec 22 '21 at 14:19
  • I have updated the example code. As you haven't included a sample code of your problem then i just used an image in place of your chart. I used the image with and without max-width restriction. In `
    `, although the width is set to 100%, but it is still controlled by the max-width css property. So if your chart is an image, iit should work with the example code, otherwise you need to share a demo of your problem before i say something about it.
     – Ali Safari Dec 22 '21 at 16:54
  • i updated my question :D – Laboda Dániel Dec 22 '21 at 17:51
  • can you share your code in sandbox. It takes time debugging like this, unfortunately. – Ali Safari Dec 22 '21 at 22:26
  • Yes, here is my code: https://codesandbox.io/s/agitated-leakey-pfbzm?file=/src/App.vue – Laboda Dániel Dec 23 '21 at 12:27
  • Please check my updated answer. Hope this can be of use for you. – Ali Safari Dec 23 '21 at 16:35
  • Glad to be of help to you @LabodaDániel – Ali Safari Dec 24 '21 at 12:18