Add min Y axis value and change X axis ticks

Vizzuality · Oct 30, 2023 · 395ae05 · 395ae05
1 parent 8dea066
commit 395ae05
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/app/javascript/components/tpi/charts/ascor-emissions/Chart.js b/app/javascript/components/tpi/charts/ascor-emissions/Chart.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
@@ -10,6 +10,13 @@ import { options } from './options';
 const EmissionsChart = ({ chartData }) => {
   const { data, metadata } = chartData;
 
+  const hasNegative = useMemo(
+    () => data.some((series) => series.data?.some((point) => point?.y < 0)),
+    [data]
+  );
+
+  const minTickInterval = useMemo(() => data?.[0]?.data?.[0]?.x, [data]);
+
   return (
     <div className="emissions__chart">
       <HighchartsReact
@@ -18,8 +25,13 @@ const EmissionsChart = ({ chartData }) => {
           ...options,
           yAxis: {
             ...options.yAxis,
+            min: hasNegative ? null : 0,
             title: { ...options.yAxis.title, text: metadata.unit }
           },
+          xAxis: {
+            ...options.xAxis,
+            min: minTickInterval
+          },
           series: data,
           title: { text: '' }
         }}

diff --git a/app/javascript/components/tpi/charts/ascor-emissions/options.js b/app/javascript/components/tpi/charts/ascor-emissions/options.js
@@ -49,6 +49,7 @@ export const options = {
     lineWidth: 1,
     tickColor: '#595B5D',
     tickInterval: 5,
+    startOnTick: true,
     labels: {
       style: {
         color: '#0A4BDC',