Question 72928 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Chart JS React loss of quality when stretching graphics – Reactjs

<div
  className="CartLine"
  style={{
    display: "flex",
    position: "relative",
    boxShadow:
      "rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px",
    width: "100%",
    height: "100%",
  }}
>
  <Bar
    options={options}
    data={data}
    style={{
      minWidth: "100%",
      height: "100%",
      marginLeft: "auto",
      marginRight: "auto",
      marginTop: "auto",
      marginBottom: "auto",
    }}
  />
</div>

chart

I tried to set responsive in the options, but the graph loses quality.How to ensure that quality is not lost when resizing a chart?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Aftera more detailed study of the documentation on the advice kikon, it became clear that the dimensions of the wrong solution were being transferred to convas. It is enough to set responsive options: true, support AspectRatio: false and wrap the chart in a class with 100% width


  2. 0

    try to set the width and the height of the canvas

      <Bar
    options={options}
    data={data}
    style={{
      minWidth: "100%",
      height: "100%",
      marginLeft: "auto",
      marginRight: "auto",
      marginTop: "auto",
      marginBottom: "auto",
    }}
    width ={600}
    height={400}
  />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search