pixi-line-chart v2.0.0

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

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

Point Object property

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