@spaced-out/ui-design-system/lib/utils/charts/lineChart.js.flow

Sense UI components library

// @flow strict
import {colorBorderPrimary} from '../../styles/variables/_color.js';
import type {ChartOptions} from '../../types/charts';

import {commonChartOptions} from './charts';
import {
  bottomLegendRow,
  xAxisTitleStyle,
  yAxisLabelStyle,
  yAxisTitleStyle,
} from './helpers';
import {formLabelSmall} from './typography';

/**
 * This function modifies the the common chart behavior to line chart default behavior.
 * It will not take userPassed option into account.
 */

export const getLineChartOptions = (): ChartOptions => ({
  ...commonChartOptions,
  chart: {
    type: 'line',
  },
  legend: {
    ...commonChartOptions.legend,
    ...bottomLegendRow,
    symbolWidth: 18,
  },
  xAxis: {
    ...commonChartOptions.xAxis,
    labels: {
      style: formLabelSmall,
    },
    title: {
      margin: 12,
      style: xAxisTitleStyle,
    },
    lineColor: colorBorderPrimary,
  },
  yAxis: {
    labels: {
      align: 'right',
      distance: 12,
      style: yAxisLabelStyle,
    },
    title: {
      margin: 12,
      style: yAxisTitleStyle,
    },
  },
});