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