CODEWITHSUNDEEP
javascriptnode.jsreactjscanvasjs
user16304829
user16304829

Reputation:

display problems in canvas js

Now in the following code, I set the title as a very long string. I want it can go to the next line after some part the solution that I found is to set the width like max width = 1000. When it is displayed on the computer screen, it successfully enters the next line after a certain part, but if it is displayed on phone, a certain part of the title can not be displayed (because the maximum width is 1000). The second problem is that the label displayed on the mobile phone screen is too big, and the size on the computer screen is fine. What should I do?

class BarChart extends Component {
constructor() {
    super();
    this.chart = React.createRef();
}
render() {
        const options3 = {
        animationEnabled: true,
        theme: "light2",
        height:600,
        title:{
            text: this.props.t3,
            fontSize: 24,
            margin: 40,
            
        },
        axisX: {
            labelMaxWidth: 200,
            labelFontSize: 20,
            
        },
        axisY: {
            maximum: 100,
            minimum: 0,
            labelFontSize: 20,
            
            // title: "Number of votes",
            // interval: 5,
        },
        data: [{
            type: "column",
            indexLabelPlacement: "inside",
            dataPoints: this.props.arr3
    
        }]
    }
    
    return (
    <div>
        
          <CanvasJSChart options = {options3} 
            onRef={ref => this.chart = ref} 
            
        />
        
        {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
    </div>
    );
}}export default BarChart;

Upvotes: 1

Views: 110

Answers (1)

Adithya Menon
Adithya Menon

Reputation: 61

You can use window.innerWith to find the pixel width of the screen and use states to update the necessary properties like labelFontSize, fontSize and maxWidth for title. Take a look at this stackBlitz for an example.

Upvotes: 2

Related Questions