0

I want the axis Y from my react-chart starts from 0, I have been trying many solutions, like beginAtZero: true and min:0 but is doesn't work.

import React, { Component } from 'react';

// Documentation https://www.npmjs.com/package/react-charts
import { Chart } from 'react-charts';

I would like also to add title to axis X title:minutes doesn't work either, here is the code:

MyChart = () => {
    this.componentRef = React.createRef();
    if (this.state.selectedDocumentContent !== undefined) {
        const content = this.state.selectedDocumentContent;
        const firstTimeStamp = this.toTimestampSeconds(content.time);
        const metricKeys = Object.keys(content.metrics);
        var data = [];
        for (var i = 1; i < metricKeys.length-1; i++) {
            const entries = content.metrics[metricKeys[i]];
            var metricData = [];
            for (var j = 0; j < entries.length; j++) {
                let entry = entries[j];
                let timestamp = this.toTimestampSeconds(entry.time);
                metricData.push([timestamp - firstTimeStamp, entry.value]);
            }
            data.push({ label: metricKeys[i], data: metricData })
        }

        const axes = [
            { primary: true, type: 'linear', position: 'bottom', title: 'minutes' }, //x
            { type: 'linear', position: 'left', options: {
                scales: {
                    yAxes: [{
                        display: true,
                        ticks: {
                            beginAtZero: true,
                            min:0
                        }
                    }]
                }} //y
            }
        ];


        const lineChart = (
            // A react-chart hyper-responsively and continuously fills the available
            // space of its parent element automatically
            
            <div
                style={{
                    margin: '30px',
                    width: '600px',
                    height: '400px'
                }}
            >
                <Chart data={data} axes={axes} tooltip/>
            </div>
        )
        return lineChart;
    }
}

I am using this chart: https://www.npmjs.com/package/react-charts "react-charts": "^2.0.0-beta.7".

ouflak
  • 2,458
  • 10
  • 44
  • 49
Anna
  • 33
  • 5

1 Answers1

1

Fixed! I almost got crazy about this, I solved it with base:0.

 const axes = [
            { primary: true, type: 'linear', position: 'bottom'}, //x
            { type: 'linear', position: 'left', base: 0}  //y
        ];

Still did not fix the issue with the title... continuing the investigation.... Does anybody knows about how to set a maximum value? (max: X, does not work)

Anna
  • 33
  • 5