Pixi Line Chart

Simple Line Chart Component for Vue 3.0

Features

• Ability to add points reactive, push points to points array property, several or one by one
• Ability to handle big datasets with bottom horizontal navigation
• Vertical autoscale by min and max values on selected region
• Full colors and sizes customization
• Draw data with real values horizontal scale by number or Date timestamp
• Add different point colors sizes and shapes and each point personal info text

Installation

npm i pixi-line-chart

Props

| Prop Name | Type | Default | Short Description | | ------ | ------ | ------ | ------ | | maxHorizontalLabels | Number | 20 | Number of horizontal labels | | horizontalLines | Number | 5 | Number of horizontal axe lines | | miniChartHorizontalPickerWidth | Number | 10 | picker width | | miniChartMinimumSelection | Number | 10 | min selection region size | | miniChartMaxPints | Number | 100 | auto scale points selection | | chartHeight | Number | 600 | chart height | | mainChartPadding | Object | {top: 20, bottom: 80, left: 25, right: 25} | padding for big chart | | miniChartPadding | Object | {top: 5, bottom: 5, left: 25, right: 25} | padding for mini chart | | isDateTime | Boolean | true | horizontal labels type | | dateTimeFormat | Object | {locales: 'en-US', options: {dateStyle:'short', timeStyle:'short'}} | format for Date type | | colors | Object | see table below | chart colors customize | | labelStyles | Object | see table below | chart labels customize | | infoBoxColorFollow | Boolean | true | color of infobox will depend on point color | | pointsData | Array | | Data points array, see table below |

Colors Object property

| Prop Name | Default Color | | ------ | ------ | | background | #0C0C0C| | line | #DBDBDB | | point | #7EDDA6 | | horizontalLines | #262626 | | texts | #a8a8a8 | | infoBoxBackground | #219653 | | infoBoxText | #cccccc | | infoBoxValues | #FFFFFF | | infoPoint | #219653 | | miniChartPickerLines | #BAF6D3 | | miniChartSideBackground | #121212 | | miniChartCenterBackground | #219653 | | timePickerColor | #219653 |

labelStyles Object property

| Prop Name | Default | | ------ | ------ | | fontFamily | Roboto | | horizontalLabels | Object | | horizontalLabels.fontSize | 11 | | horizontalLabels.fontWeight | normal | | verticalLabels | Object | | verticalLabels.fontSize | 11 | | verticalLabels.fontWeight | normal | | infoBoxValues | Object | | infoBoxValues.fontSize | 13 | | infoBoxValues.fontWeight | normal | | infoBoxText | Object | | infoBoxText.fontSize | 11 | | infoBoxText.fontWeight | normal |

Point Object property

| Prop Name | Type | Default | is Required |Short description | | ------ | ------ | ------ | ------ | ------ | | x | Number | | true | x coord as number or Date timestamp for data if isDateTime true| | y | Number | | true | y coord number | | color | String | | true | point color | | size | Number | | true | point size | | shape | String | | true | point shape 'circle', 'rectangle' or 'star' | | info | String | | false | additional point info text for infobox |

Example

<template>
  <div>
    <pixi-line-chart
            :pointsData="points"
            :is-date-time="false"
            :main-chart-padding="{top: 20, bottom: 60, left: 25, right: 25}"
    />
    <button @click="add">ADD POINT</button>
    <button @click="addArr">ADD ARRAY</button>
  </div>
</template>

<script>
  import pixiLineChart from "./components/pixiLineChart";
  export default {
    name: "App",
    components: {
      pixiLineChart
    },
    data: ()=>({
      points: [],
      x: 100
    }),
    methods: {
      add(){
        this.points.push({x: this.x, y: Math.tan(Math.random())*Math.random()*150, color: '#3e41e5', shape: 'circle', size: 4, info: "BUY ME A NUGGET"});
        this.x += 100;
      },
      addArr(){
        this.points.push(
                ...[
                  {x: this.x, y: Math.tan(Math.random())*Math.random()*150, color: '#e2030b', shape: 'circle', size: 4, info: "BUY ME A NUGGET"},
                  {x: this.x+100, y: Math.tan(Math.random())*Math.random()*150, color: '#e2030b', shape: 'circle', size: 4, info: "BUY ME A NUGGET"},
                  {x: this.x+150, y: Math.tan(Math.random())*Math.random()*150, color: '#e2030b', shape: 'circle', size: 4, info: "BUY ME A NUGGET"},
                  {x: this.x+200, y: Math.tan(Math.random())*Math.random()*150, color: '#e2030b', shape: 'circle', size: 4, info: "BUY ME A NUGGET"}
                ]
        );
        this.x += 300
      }
    }
  };
</script>

License

MIT