react-light-chart v0.1.0

Info

Install

To install, use below code

npm install react-light-chart

Or

yarn add react-light-chart

Images

You can clone code and run npm start to see below examples in src/_dev folder.

How to Use

import {LineChart} from 'react-light-chart';

const style = {width: 500, height: 400};
const data = [11, 12, 5, 3, 6, 9, 8, 7, 5, 2, 1, undefined, 4, undefined, 6, 5, 3, 2, 5]

return <LineChart data={data}
                  style={style}
                  className="foo"/>

In this example you see some undefined, they are regarded as weight average of previous and next values in the data. Also you can use style and className props just as a simple html element style and className.

Multiple lines

You can use array of objects as data, but you should set valueSelector to get value(s) from each object.

import {LineChart} from 'react-light-chart';

const style={width: 500, height: 400};
const data = [
    {v1: 1, v2: 4, v3: 11, v4: 2, v5: 9, v6: 0, v7: 3, v8: 3, extraData: 'one'},
    {v1: 3, v2: 4, v3: 13, v4: 3, v5: 5, v6: undefined, v7: 5, v8: 6, extraData: 'two'},
    {v1: 5, v2: 3, v3: 15, v4: 4, v5: 6, v6: undefined, v7: 3, v8: 8, extraData: 'three'},
    {v1: 8, v2: 4, v3: 18, v4: 5, v5: 7, v6: undefined, v7: 10, v8: 14, extraData: 'four'},
    {v1: 4, v2: 8, v3: 14, v4: 2, v5: 4, v6: undefined, v7: 6, v8: 9, extraData: 'five'},
    {v1: 6, v2: 9, v3: 16, v4: 1, v5: 4, v6: undefined, v7: 4, v8: 4, extraData: 'six'},
    {v1: 2, v2: 3, v3: 12, v4: 11, v5: 8, v6: undefined, v7: 7, v8: 2, extraData: 'seven'},
    {v1: 1, v2: 2, v3: 11, v4: 4, v5: 9, v6: 21, v7: 8, v8: 6, extraData: 'eight'}
]

return <LineChart data={data}
                  valueSelector={ e => [e.v1, e.v2]}
                  style={style}/>

Parameters

Labels

Label type is as follows ↓

type Label = {
    stroke?: string | ((params: LinePointParameters<TData>) => string); // line color
    area?: LineChartAreaColor | ((params: LinePointParameters<TData>) => LineChartAreaColor); // show gradient color below of the line 
    hoverColor?: string; // just for the color of `default hover line`.

    comparativeLabelIndex?: number; // if you add label index, `stroke` will be computed again when the comparative polyline collides the current line
    gradientTowardLabelIndex?: number; // if you add label index, `area` will be computed again when the comparative polyline collides the current line
  
    title?: string; // just for the name in `default tooltip`.
    labelColor?: string; // just for the color for the label or value in `default tooltip`.
    textColor?: string;  // just for the color for the text or value in `default tooltip`.
  
}

LineChartAreaColor can be string for a simple color. Or it can be gradient color, So, for a gradient color you should pass some parameters as follows ↓

type LineChartAreaColor = string | {
    rotation?: number; // gradient color rotations.
    grads: {           // array of stop-colors
        stop: string | number; // css units, such as `5px`, `10%`, etc.
        color: string; // color in css.
    }[]
};

Default value of labels for the chart is :

['#2384d1', '#d04441', '#46d041', '#d0c941',
    '#d07f41', '#7341d0', '#41d0b3', '#d041b1'].map((r, ix) => ({
    labelColor: r,
    stroke: r,
    title: 'value' + ix
}))

IndexesAxisInfo

You can use indexAxis property to change information shown on index axis (horizontal direction). You can pass an object of type IndexesAxisInfo, or a function that returns an object of type IndexesAxisInfo. It is shown in the following example ↓

const indexAxis = {
    linesCount: 10
}
<LineChart data={data}
           style={style}
           indexAxis={indexAxis}/>

// or you can use a function !
function indexAxisFunction(e) {
    return {linesCount: 10}
};
<LineChart data={data}
           style={style}
           indexAxis={indexAxisFunction}/>

IndexesAxisInfo consist of below properties :

type IndexesAxisInfo = {
    linesCount?: number | null;             // number of labels shown below and line spearating the chart. 
    linesProps?: SVGProps<SVGLineElement>;  // How do the lines look like?! It's the style of the lines.
    rotation?: number;                      // rotation of labels shown below of diagram.

    renderLabels?: (value: string | number, index: number) => React.ReactNode; // If you want to map or show labels of indexes different, you can use this function to change them.
}

• linesCount is 5 by default.
• linesProps, rotation and renderLabels are undefind by default.

If you use a function for indexAxis, the single argument of function consist following values ↓

• minimumValue is the minimum value computed based on the data and selectors you have passed to the LineChart component.
• maximumValue is the maximum value computed based on the data and selectors you have passed to the LineChart component.

ValuesAxisInfo

You can use valueAxis property to change information shown on value axis (horizontal direction). You can pass an object of type ValuesAxisInfo, or a function that returns an object of type ValuesAxisInfo. It is shown in the following example ↓

const valueAxis = {
    linesCount: 10,
    minimumValue: 0,
    maximumValue: 100,
}
<LineChart data={data}
           style={style}
           valueAxis={valueAxis}/>

// or you can use a function !
function valueAxisFunction({minimumValue, maximumValue}) {
    return {
        linesCount: 10,
        minimumValue: minimumValue * 0.80,
        maximumValue: maximumValue * 1.2
    }
};
<LineChart data={data}
           style={style}
           valueAxis={indexAxisFunction}/>

ValuesAxisInfo consist of below properties :

type ValuesAxisInfo = {
    linesCount?: number | null;             // number of labels shown below and line spearating the chart. 
    linesProps?: SVGProps<SVGLineElement>;  // How do the lines look like?! It's the style of the lines.
    rotation?: number;                      // rotation of labels shown below of diagram.

    minimumValue?: number;                  // the minimum value on the chart, used when you want to scale the chart.
    maximumValue?: number;                  // the maximum value on the chart, used when you want to scale the chart.
    renderLabels?: (value: number, index: number) => React.ReactNode; // If you want to map or show labels of indexes different, you can use this function to change them.
}

• linesCount is 4 by default.
• minimumValue and maximumValue are computed by the data passed to the LineChart component.
• linesProps, rotation and renderLabels are undefind by default.

If you use a function for valueAxis, the single argument of function consist following values ↓

• minimumValue is the minimum value computed based on the data and selectors you have passed to the LineChart component.
• maximumValue is the maximum value computed based on the data and selectors you have passed to the LineChart component.

Tooltip

You can pass null value for renderTooltip prop to prevent rendering of default tooltip. Or you can pass a renderer function for showing customized tooltip as shown in following example :

<LineChart data={data}
           style={style}
           className="foo"
           renderTooltip={e => {
               const c = e.data || e.prevDefinedData!;
               return <span style={e.pointPosition}>
                   <div>{e.index}: {c}</div>
               </span>
           }}/>

Remember, you should add style of returning node, unless the tooltip does not work well.

Here, renderTooltip is a function with one argument of type TooltipRendererParams that contains below properties:

type PointParameters = {
    data: object;             // data of current hovered point
    prevDefinedData?: object;  // data of previous defined point, used when `data` is undefined.
    nextDefinedData?: object;  // data of next defined point, used when `data` is undefined.
    index: string | number;   // index of current hovered point
    values: (number | undefined)[]; // values of current hovered point. It's array because we may have multiple lines, so we have multiple value at the same hovering point.
    arrayIndex: number;       // index of current hovered point in array of data passed to LineChart component
    pointPosition: { position: 'absolute', left: string, top: string, zIndex:number }; // position of the point on chart. `top` and `left` are calculated by percent.
    props: LineChartProps;    // props passed to LineChart component.
    labels: Label[];          // labels passed to LineChart component, or default value of labels if no label passed to the component.
    estimatedValue: number;// value of current line estimated on all curves
  
    defaultCssProps: React.CSSProperties; // css properties of default tooltip.
}

SeparatedTooltip

You can pass renderSeparatedTooltip prop to show multiple tooltips for each line at the same point. renderSeparatedTooltip is a function for as shown in following example :

<LineChart data={data}
           style={style}
           className="foo"
           renderSeparatedTooltip={e => {
               return <span style={{...e.pointPosition, color: e.labels[e.valueIndex].labelColor}}>
                   {e.index} : {e.value}
               </span>
           }}/>

This function will be run multiple time for each value on the same index (hovering points).

Remember, you should add style of returning node, unless the tooltip does not work well.

Here, renderSeparatedTooltip is a function with one argument of type TooltipRendererParams that contains below properties:

type SeparatedTooltipRendererParams = {
    data: object;             // data of current hovered point
    prevDefinedData?: object;  // data of previous defined point, used when `data` is undefined.
    nextDefinedData?: object;  // data of next defined point, used when `data` is undefined.
    index: string | number;   // index of current hovered point
    values: (number | undefined)[]; // values of current hovered point. It's array because we may have multiple lines, so we have multiple value at the same hovering point.
    arrayIndex: number;       // index of current hovered point in array of data passed to LineChart component
    pointPosition: { position: 'absolute', left: string, top: string, zIndex:number }; // position of the point on chart. `top` and `left` are calculated by percent.
    props: LineChartProps;    // props passed to LineChart component.
    labels: Label[];          // labels passed to LineChart component, or default value of labels if no label passed to the component.
    estimatedValues: number[];// values estimated on related curve
    estimatedValue: number;   // value of current line estimated on all curves
    prevDefinedValue?: number; // first previous defined value before current hovered index
    nextDefinedValue?: number; // first next defined value before current hovered index

    lineIndex: number;        // index of the line containing the rendering point.
    value: number | undefined; // value of the rendering point.
}

Step

You can pass renderStep prop to show multiple tooltips for each line at the same point. renderStep is a function for as shown in following example :

<LineChart data={data}
           style={style}
           className="foo"
           renderStep={e => {
               return <circle cx={e.position.left}
                              cy={e.position.top}
                              r={5}
                              fill={e.color}/>
           }}/>

This function will be run multiple time for each step on each point of each line on the diagram. Remember, you should add style of returning node, unless the step does not work well.

Here, renderStep is a function with one argument of type StepRendererParams that contains below properties:

type StepRendererParams = {
    data: object;             // data of current hovered point
    prevDefinedData?: object;  // data of previous defined point, used when `data` is undefined.
    nextDefinedData?: object;  // data of next defined point, used when `data` is undefined.
    index: string | number;   // index of current hovered point
    values: (number | undefined)[]; // values of current hovered point. It's array because we may have multiple lines, so we have multiple value at the same hovering point.
    arrayIndex: number;       // index of current hovered point in array of data passed to LineChart component
    position: { left: string, top: string, zIndex: number }; // position of the point on chart. `top` and `left` are calculated by percent.
    props: LineChartProps;    // props passed to LineChart component.
    labels: Label[];          // labels passed to LineChart component, or default value of labels if no label passed to the component.
    estimatedValues: number[];// values estimated on related curve
    estimatedValue: number;   // value of current line estimated on all curves
    prevDefinedValue?: number; // first previous defined value before current hovered index
    nextDefinedValue?: number; // first next defined value before current hovered index

    lineIndex: number;        // index of the line containing the rendering point.
    value: number | undefined; // value of the rendering point.

    hovered: boolean;         // shows whether current step is hovered or not. 
    color?: string;           // shows stroke color for this step
}

Step

You can pass renderHoverLine prop to show multiple tooltips for each line at the same point. renderHoverLine is a function for as shown in following example :

<LineChart data={data}
           style={style}
           className="foo"
           renderHoverLine={e => {
               if (e.lineIndex !== 1) return null; // we want to show a vertical line just for second diagram polyline. (array starts from 0!!!)
               return <line x1={e.position.top}
                            x2={e.position.top}
                            y1={e.sizes.top + '%'}
                            y2={e.sizes.height - sizes.bottom + '%'}
                            stroke='deepskyblue'/>
           }}/>

This function will be run multiple time for each step on each point the current hovered column on the diagram. Remember, you should add style of returning node, unless the hover line does not work well.

Here, renderHoverLine is a function with one argument of type HoverLineRenderer that contains below properties:

type HoverLineRendererParams = {
    data: object;             // data of current hovered point
    prevDefinedData?: object;  // data of previous defined point, used when `data` is undefined.
    nextDefinedData?: object;  // data of next defined point, used when `data` is undefined.
    index: string | number;   // index of current hovered point
    values: (number | undefined)[]; // values of current hovered point. It's array because we may have multiple lines, so we have multiple value at the same hovering point.
    arrayIndex: number;       // index of current hovered point in array of data passed to LineChart component
    position: { left: string, top: string, zIndex: number }; // position of the point on chart. `top` and `left` are calculated by percent.
    props: LineChartProps;    // props passed to LineChart component.
    labels: Label[];          // labels passed to LineChart component, or default value of labels if no label passed to the component.
    estimatedValues: number[];// values estimated on related curve
    estimatedValue: number;   // value of current line estimated on all curves
    prevDefinedValue?: number; // first previous defined value before current hovered index
    nextDefinedValue?: number; // first next defined value before current hovered index

    lineIndex: number;        // index of the line containing the rendering point.
    value: number | undefined; // value of the rendering point.

    sizes: object;            // sizes of diagram, to justify render output.
    color?: string;           // shows `hoverColor` or `labelColor` of label of current polyline.
}

Contribution

You can report me bugs in GitHub. 🙏 Also, I would be glad if you give me star in github. 😊