ApexChart React : impossible to do a stepline + line mixed chart

31 views Asked by At

I'm encountering an issue where I cannot seem to be able to figure out how to do a mixed chart that combines steplines with simple lines

I seem to be able to do steplines on their own or any other combo

  • full stepline by adding a options.stroke.curve = "stepline" value
  • line + column by editing series[x].type = "column"

However, series[x].type = "line" + series[x].stroke.curve = "stepline" does not seem to work

I did notice that the options tend to overwrite the contents of the series when applicable but the series not dot seem to want to do a stepline

Here is a simple example of what I am attempting to do :

import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

function MyChart() {
    const series = [
        {
            name: "Straight Line",
            type: 'line',
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        },
        {
            name: "Step Line",
            type: 'line',
            data: [30, 32, 33, 38, 37, 44, 55, 60, 66],
            stroke: {
                curve: 'stepline'
            }
        }
    ];

    const options: ApexOptions = {
        chart: {
            height: 350,
            type: 'line',
        },
        stroke: {
            width: [4, 4]
        },
        title: {
            text: 'Line and Step Line Chart'
        },
        xaxis: {
            categories: [1, 2, 3, 4, 5, 6, 7, 8, 9]
        },
        yaxis: {
            title: {
                text: 'Values'
            }
        }
    };

    return (
        <ReactApexChart options={options} series={series} type="line" height={350} />
    );
}

export default MyChart;

What am I not doing correctly ? As I am assuming that it should be possible considering that I did not see anything it was not in the documentation

0

There are 0 answers