reaviz icon indicating copy to clipboard operation
reaviz copied to clipboard

Ability to Add Markers for Charts

Open amcdnl opened this issue 2 years ago • 0 comments

Requirement

Add the ability to put a 'marker' in charts.

Let's add the following charts ( Linear only ) :

  • Line
  • Area
  • Bar ( Horz/Vertial )
  • Scatter

NOTE: There is already a MarkLine ( https://github.com/reaviz/reaviz/tree/master/src/common/MarkLine ) which is different front this. Its more of a marker that follows the cursor so perhaps in this change we should rename that or consolidate these? Also MarkLine isn't great name since it includes Line which it could potentially be something else. Maybe CursorMarker?

Example API

<AreaChart
  series={
    <AreaSeries
      markers={[
        <Marker
          value={50}
          color="blue"
          label={
            <MarkerLabel
              color="white"
              position="center"
              text="Goal 900k"
            />
        }
      />
    ]}
  />}
/>

I realize the label API is a bit overkill but its needed to add more complex options. It also needs to account for the direction/scale.

Example UI

image

amcdnl avatar May 19 '22 14:05 amcdnl