style issues

[kuriban]

Hi. I have some style issues with my column chart.
https://jsfiddle.net/Kuriban/qf5ypvjs/12/

I show problems on screen.

And the second issue is i don't see columns with small values

Could you pls help me?

[kuriban]

Actually, i found a solution - https://jsfiddle.net/Kuriban/5rhysz1w/

But it doesn't work for me

Code: Select all

import React, { useMemo } from 'react';
import moment from 'moment';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

import { Props } from './types';
import { persianGreen, salmonapprox } from '../../../../theme/colors';


Highcharts.setOptions({
  lang: {
    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Abr', 'Maio', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
  },
});

Highcharts.addEvent(Highcharts.Axis, 'afterInit', function () {
  if (this.options?.custom?.allowNegativeLog) {
    Highcharts.Axis.prototype.log2lin = num => {
      const isNegative = num < 0;

      let adjustedNum = Math.abs(num);

      if (adjustedNum < 10) {
        adjustedNum += (10 - adjustedNum) / 10;
      }

      const result = Math.log(adjustedNum) / Math.LN10;
      return isNegative ? -result : result;
    };

    Highcharts.Axis.prototype.lin2log = num => {
      const isNegative = num < 0;

      let result = Math.pow(10, Math.abs(num));
      if (result < 10) {
        result = (10 * (result - 1)) / (10 - 1);
      }
      return isNegative ? -result : result;
    };
  }
});

const initialChartOptions = {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  yAxis: {
    title: {
      text: ''
    },
    type: 'logarithmic',
    custom: {
      allowNegativeLog: true
    },
  },
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%e.%m}'
    },
    tickInterval: 24 * 3600 * 1000
  },
  plotOptions: {
    series: {
      pointWidth: 27,
    },
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  }
};

function CalendarChart(props: Props) {
  const { data, currentDate } = props;

  const chartData = useMemo(() => data.reduce((acc: any, item) => {
    if (moment(item.date).isSame(currentDate, 'month')) {
      return [
        ...acc,
        {
          y: item.balance,
          x: moment.utc(item.date).unix() * 1000
        }]
    }

    return acc;
  }, []), [currentDate, data]);

  const chartOptions = useMemo(() => ({
    ...initialChartOptions,
    series: [{
      data: chartData,
      color: persianGreen,
      negativeColor: salmonapprox,
    }],
  }), [chartData]);

  return (
    <HighchartsReact
      highcharts={Highcharts}
      constructorType="chart"
      // @ts-ignore
      options={chartOptions}
    />
  );
}

export default React.memo(CalendarChart);

[dominik.c]

Hi kuriban!

We appreciate you reaching out to us!

I think that there's no need to use wrap to solve your problem. We can simply use minPointLength property to make sure that the columns with 0 or small values are shown.

API references:
https://api.highcharts.com/highcharts/s ... ointLength

Demo:
https://jsfiddle.net/gh/get/library/pur ... intlength/

If it doesn't help you, please provide me a demo with your issue and ask me a specific question about your problem.
Best regards!