X axis annotations not working with custom xaxis categories #3571
Replies: 4 comments
-
|
It looks like you are trying to show the annotation at x position 9, but the x axis categories only go up to 18. You should change the x position of the annotation to one of the values in the categories array, such as 6, 8, 13, or 18. Additionally, it appears that you are using the type: "category" property for the x axis, but you are also specifying xaxis: { type: "numeric" } earlier in the options object. You should remove the type: "numeric" property to avoid any conflicts. Here is the modified version of your code:
Your question was also shared on AnswerDeveloper. |
Beta Was this translation helpful? Give feedback.
-
My use case is having annotation to show on the x axis at point 9 and not on point 8 |
Beta Was this translation helpful? Give feedback.
-
|
@DhrunitSixberries I submitted your problem and got a reply like this from AnswerDeveloper If you want to show the annotation at point 9 on the x-axis, you need to set the x value of the annotation to 9. Currently, the x value is set to 9 but the x-axis is using categories with values 6, 8, 13, and 18. To fix this, you can either change the x value of the annotation to one of the categories or you can change the x-axis to use numeric values instead of categories. To change the x value of the annotation to one of the categories, you can set it to the index of the category in the array. For example, to show the annotation at the third category (13), you can set x to 2: annotations: { To change the x-axis to use numeric values, you can remove the type: "category" option and set the type: "numeric": xaxis: { Then you can set the x value of the annotation to the numeric value you want to show it at: |
Beta Was this translation helpful? Give feedback.
-
|
@Yalcingezsat Thank you for your reply I tried your approach this is what i have as an output |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I am trying to show an xaxis annotation with custom x axis categories
my x axis categories are
xaxis: { type: "numeric", categories: [6, 8, 13, 18] }and my component is as below it is a line chart component
import "./styles.css";
import Chart from "react-apexcharts";
import { TextField, MenuItem } from "@material-ui/core";
export default function App() {
return (
<div className="App" style={{ position: "relative", maxWidth: "500px" }}>
<Chart
options={{
chart: {
height: 350,
type: "line",
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
markers: {
size: 5,
colors: undefined,
strokeColors: "#fff",
strokeWidth: 1,
strokeOpacity: 0.5,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: "circle",
radius: 6,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: undefined,
sizeOffset: 3
}
},
stroke: {
curve: "straight"
},
title: {
text: "Product Trends by Month",
align: "left"
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5
}
},
annotations: {
xaxis: [
{
x: 9,
strokeDashArray: 5,
borderColor: "red",
borderWidth: 2,
label: {
borderColor: "red",
style: {
color: "#fff",
background: "red"
}
}
}
]
},
xaxis: {
type: "category",
tickAmount: "dataPoints",
categories: [6, 8, 13, 18]
}
}}
series={[
{
name: "Desktops",
data: [10, 8, 10, 10]
}
]}
type="line"
width="500"
/>
{/* <div style={{ position: "absolute", left: "50%" }}>12% incidence */}
);
}
annotations: { xaxis: [ { x: 9, strokeDashArray: 5, borderColor: "red", borderWidth: 2, label: { borderColor: "red", style: { color: "#fff", background: "red" } } } ] },As you can see above I am trying to have the annotation at the point 9 on the x axis but I am not getting the annotation at the right place
see output below
here is the code sandbox link
(Sorry I am not good at formatting code)
Beta Was this translation helpful? Give feedback.
All reactions