apexcharts / react-apexcharts

📊 React Component for ApexCharts
https://apexcharts.com
MIT License
1.31k stars 158 forks source link

Issue with multi graphes rangeBar and line #554

Closed HadjerSahariYassir closed 3 months ago

HadjerSahariYassir commented 1 year ago

Hi, i'm using react-appext chart , i want to draw a graph with bar ranges and also i want to make a line chart in same chart. i succeded to draw the rangeBar graph but i found issue to add the line , something similar to the following picture :

image

here is my code : export default function GraphDiffusion3({ allData, min, max, moy }) { const [data, setData] = useState([]); useEffect(() => { allData.map(elm => { if (elm < moy) { } else { } }); }); const state = { options: { chart: { type: "rangeBar", height: 350, }, tooltip: { enabled: false, enabledOnSeries: false, }, plotOptions: { bar: { horizontal: false, }, }, dataLabels: { enabled: true, formatter: function (val, opts) { console.log("value on label ", val); return val; }, }, annotations: { yaxis: [ { y: 50, borderColor: "#00E396", label: { borderColor: "#00E396", style: { color: "#fff", background: "#00E396", }, text: "moyenne = 50%", }, }, { y: 20, borderColor: "#00E396", label: { borderColor: "#00E396", style: { color: "#fff", background: "#00E396", }, text: "minimaum = 20%", }, }, { y: 95, borderColor: "#00E396", label: { borderColor: "#00E396", style: { color: "#fff", background: "#00E396", }, text: "maximaum = 95%", }, }, ], }, }, series: [ { data: [ { x: "Team A", y: [50, 95], }, { x: "Team B", y: [50, 80], }, { x: "Team C", y: [50, 40], }, { x: "Team D", y: [50, 30], }, ], }, ], }; return (

</div>

); } Thanks in advance

Dmarcotrigiano commented 11 months ago

Your code doesn't work.

github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.