Line chart examples #

Tiny chart #

A tiny example, you can use Line, Area or Bar chart.

<template>
  <div>
    <la-cartesian :width="300" :height="75" :data="values">
      <la-line animated v-if="show === 'line'" prop="value"></la-line>
      <la-area animated v-else-if="show === 'area'" prop="value"></la-area>
      <la-bar animated v-else prop="value"></la-bar>
    </la-cartesian>

    <label>Choose type:</label>
    <button @click="show = 'line'">line</button>
    <button @click="show = 'area'">area</button>
    <button @click="show = 'bar'">bar</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    show: 'line',
    values: [
      { value: 3200 },
      { value: 2600 },
      { value: 4500 },
      { value: 3040 },
      { value: 6900 },
      { value: 4910 },
      { value: 2300 }
    ]
  })
};
</script>

Simple line chart #

An example of a simple line chart with three smooth series.

Page APage BPage CPage DPage EPage FPage G0200040006000800010800
<template>
  <la-cartesian :bound="[0, n => n + 1000]" :data="values">
    <la-line dot curve prop="pv"></la-line>
    <la-line dot curve prop="uv"></la-line>
    <la-line dot curve prop="amt"></la-line>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
    <la-tooltip></la-tooltip>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
    ]
  })
};
</script>

Line gradient color #

Custom gradient color, similar to vue-trend. You need to know how to use linearGradient.

1234567891011121314-2-1012345678910
<template>
  <la-cartesian :data="values">
    <defs>
      <linearGradient id="color-id" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#2c3e50"></stop>
        <stop offset="0.5" stop-color="#42b983"></stop>
        <stop offset="1" stop-color="#6fa8dc"></stop>
      </linearGradient>
    </defs>
    <la-line curve :width="2" prop="value" color="url(#color-id)"></la-line>
    <la-x-axis></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { value: -2 },
      { value: 2 },
      { value: 5 },
      { value: 9 },
      { value: 5 },
      { value: 10 },
      { value: 3 },
      { value: 5 },
      { value: 0 },
      { value: 1 },
      { value: 8 },
      { value: 2 },
      { value: 9 },
      { value: 0 }
    ]
  })
};
</script>

Line chart with area #

This chart uses Area component to draw an area shape. Use the bound to specify the lower bound.

Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
<template>
  <la-cartesian :bound="[0]" :data="values">
    <la-area dot curve prop="pv"></la-area>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Custom area fill #

The default fill color and line color are the same, this is a custom fill way.

Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
<template>
  <la-cartesian :bound="[0]" :data="values">
    <defs>
      <linearGradient id="area-fill" x1="0" y1="0" x2="0" y2="1">
        <stop stop-color="#0076b1" offset="0%" stop-opacity="0.4"></stop>
        <stop stop-color="#0076b1" offset="50%" stop-opacity="0.2"></stop>
        <stop stop-color="#0076b1" offset="100%" stop-opacity="0"></stop>
      </linearGradient>
    </defs>
    <la-area fill-color="url(#area-fill)" dot curve prop="pv"></la-area>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Holes in data #

If the data does not exits, it will not be rendered. You can configure continuted so that the line are continuous.

1234567890100020003000400050006000700080009800
<template>
  <div>
    <la-cartesian :data="values">
      <la-area :continued="continued" dot curve prop="pv"></la-area>
      <la-x-axis></la-x-axis>
      <la-y-axis></la-y-axis>
    </la-cartesian>

    <button @click="continued = !continued">Toggle continued</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    continued: false,
    values: [
      { pv: 2400 },
      { pv: 1398 },
      { pv: 9800 },
      { pv: null },
      { pv: 4800 },
      { pv: 3800 },
      { pv: null },
      { pv: 3000 },
      { pv: 2000 }
    ]
  })
};
</script>

Curves #

All shapes are drawn through d3-shape. If curve is true, the line will be drawn as a cardinal spline. Of course you can use other curve.

You need to install d3-shape and import the curve functions.(refer: d3-shape#curves)

Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
<template>
  <la-cartesian :bound="[0]" :data="values">
    <la-line dot :curve="curveStep" prop="pv"></la-line>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>

<script>
import { curveStep } from 'd3-shape';

export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ],
    curveStep: curveStep
  })
};
</script>

Custom dots #

With scoped slot you can customize the shape of the points.

2400 1398 9800 3908 4800 3800 4300 Page APage BPage CPage DPage EPage FPage G0200040006000800010800
<template>
  <la-cartesian narrow :bound="[0, n => n + 1000]" :data="values">
    <la-line prop="pv">
      <g
        slot-scope="props"
        :fill="props.color">
        <rect
          :x="props.x - 5"
          :y="props.y - 5"
          width="10"
          height="10">
        </rect>
        <text
          :x="props.x"
          :y="props.y"
          text-anchor='middle'
          dy="-.5em">
          {{ props.value }}
        </text>
      </g>
    </la-line>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Bar chart examples #

Simple bar chart #

When you use the bar chart, it's best to configure the narrow so that there is enough space on both sides of the X axis.

Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
<template>
  <la-cartesian narrow :bound="[0]" :data="values">
    <la-bar prop="pv"></la-bar>
    <la-bar prop="uv"></la-bar>
    <la-bar prop="amt"></la-bar>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
    <la-tooltip></la-tooltip>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
    ]
  })
};
</script>

Stacked bar chart #

Page APage BPage CPage DPage EPage FPage G02000400060008000100001200014090
<template>
  <la-cartesian narrow stacked :bound="[0]" :data="values">
    <la-bar prop="pv"></la-bar>
    <la-bar prop="uv"></la-bar>
    <la-bar prop="amt"></la-bar>
    <la-x-axis prop="name"></la-x-axis>
    <la-y-axis></la-y-axis>
    <la-tooltip></la-tooltip>
  </la-cartesian>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
    ]
  })
};
</script>

Pie chart examples #

Simple pie chart #

2400139898003908480038004300
<template>
  <la-polar :data="values">
    <la-pie show-value prop="pv"></la-pie>
  </la-polar>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Pie chart with custom labels #

Page APage BPage CPage DPage EPage FPage G
<template>
  <la-polar :data="values">
    <la-pie show-label label-prop="name" prop="pv"></la-pie>
  </la-polar>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Gauge chart #

<template>
  <la-polar :data="values">
    <la-pie prop="pv" :angles="[-Math.PI / 2, Math.PI / 2]" :radius="[50, 100]"></la-pie>
  </la-polar>
</template>

<script>
export default {
  data: () => ({
    values: [
      { name: 'Page A', pv: 2400 },
      { name: 'Page B', pv: 1398 },
      { name: 'Page C', pv: 9800 },
      { name: 'Page D', pv: 3908 },
      { name: 'Page E', pv: 4800 },
      { name: 'Page F', pv: 3800 },
      { name: 'Page G', pv: 4300 }
    ]
  })
};
</script>

Advanced examples #

Custom tooltip #

You can customize the tooltip through the scoped slot.

Page APage BPage CPage DPage EPage FPage G13983000400050006000700080009800
    <template>
      <la-cartesian :data="values">
        <la-line dot label="pv" prop="pv"></la-line>
        <la-line dot label="amt" prop="amt"></la-line>
        <la-line dot label="uv" prop="uv"></la-line>
        <la-x-axis prop="name"></la-x-axis>
        <la-y-axis></la-y-axis>
        <la-tooltip>
          <div class="tooltip" slot-scope="props">
            <div class="title">{{ props.label }}</div>
            <ul class="list">
              <li
                :key="item.label"
                v-for="item in props.actived"
                :style="{ borderTop: '3px solid ' + item.color }">
                <div class="label">{{ item.label }}</div>
                <div class="value">{{ item.value }}</div>
              </li>
            </ul>
          </div>
        </la-tooltip>
      </la-cartesian>
    </template>
    
    <style scoped>
    .tooltip {
      background: rgba(0, 0, 0, 0.8);
      border-radius: 4px;
    }
    
    .title {
      padding: 10px;
      color: #959da5;
    }
    
    .list {
      list-style: none;
      display: flex;
    }
    
    .list li {
      padding: 5px 10px;
      flex: 1;
      color: #fff;
      margin: 0;
      min-width: 90px;
    }
    
    .list li::before {
      content: none;
    }
    
    .label {
      color: #dfe2e5;
      font-weight: 600;
    }
    
    .value {
      color: #959da5;
    }
    </style>
    
    <script>
    export default {
      data: () => ({
        values: [
          { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
          { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
          { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
          { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
          { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
          { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
          { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
        ]
      })
    };
    </script>
    
    

    Dynamic data #

    190120
    <template>
      <la-cartesian :bound="[n => n - 10, n => n + 10]" :data="values">
        <la-line :width="2" dashed dot animated curve prop="value"></la-line>
    
        <la-x-axis></la-x-axis>
        <la-y-axis></la-y-axis>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data: () => ({
        values: [{ value: 100 }]
      }),
    
      methods: {
        genNewData() {
          return Math.floor(Math.random() * 100);
        }
      },
    
      mounted() {
        for (let i = 0; i < 10; i++) {
          this.values.push({
            value: this.genNewData()
          });
        }
        setInterval(() => {
          this.values.shift();
          this.values.push({
            value: this.genNewData()
          });
        }, 1000);
      }
    };
    </script>
    
    

    Inverse axes #

    The Inverse axes and the normal axes can coexist, and the usage is the same.

    Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
    <template>
      <la-cartesian narrow :bound="[0]" :data="values">
        <la-bar prop="pv"></la-bar>
        <la-bar prop="uv"></la-bar>
        <la-bar prop="amt"></la-bar>
        <la-x-axis-inverse prop="name"></la-x-axis-inverse>
        <la-y-axis-inverse></la-y-axis-inverse>
        <la-tooltip></la-tooltip>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data: () => ({
        values: [
          { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
          { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
          { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
          { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
          { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
          { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
          { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
        ]
      })
    };
    </script>
    
    

    Responsive #

    The width of the chart is automatically changed when the window triggers the resize event.

    Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800
    <template>
      <la-cartesian autoresize :bound="[0]" :data="values">
        <la-area curve prop="pv"></la-area>
        <la-x-axis prop="name"></la-x-axis>
        <la-y-axis></la-y-axis>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data: () => ({
        values: [
          { name: 'Page A', pv: 2400 },
          { name: 'Page B', pv: 1398 },
          { name: 'Page C', pv: 9800 },
          { name: 'Page D', pv: 3908 },
          { name: 'Page E', pv: 4800 },
          { name: 'Page F', pv: 3800 },
          { name: 'Page G', pv: 4300 }
        ]
      })
    };
    </script>
    
    

    Mixed #

    Page APage BPage CPage DPage EPage FPage G0100020003000400050006000700080009800marker
    pv
    uv
    amt
    <template>
      <la-cartesian narrow :bound="[0]" :data="values">
        <la-bar label="pv" prop="pv"></la-bar>
        <la-line label="uv" prop="uv"></la-line>
        <la-area label="amt" prop="amt"></la-area>
    
        <la-x-axis gridline dashed prop="name"></la-x-axis>
        <la-y-axis gridline dashed></la-y-axis>
        <la-tooltip></la-tooltip>
        <la-legend selectable></la-legend>
        <la-y-marker dashed :value="4000" label="marker"></la-y-marker>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data: () => ({
        values: [
          { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
          { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
          { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
          { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
          { name: 'Page E', uv: 1890, pv: 4800, amt: 1700 },
          { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
          { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 }
        ]
      })
    };
    </script>
    
    

    Large Data #

    151101151201251301351401451500-100-50050100
    <template>
      <la-cartesian :bound="[100, -100]" :data="values">
        <la-line :width="2" prop="value"></la-line>
        <la-x-axis :interval="i => i === 0 || i === values.length - 1 || i % 50 === 0"></la-x-axis>
        <la-y-axis :interval="100" :format="v => Math.round(v)"></la-y-axis>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data() {
        const data = {
          values: []
        }
        let lastValue = 0
        for (let i = 0; i < 500; i++) {
          lastValue += Math.random() * 10 - 5
    
          data.values.push({
            value: lastValue
          })
        }
        return data
      }
    }
    </script>
    
    

    Custom ticks #

    12345678910012345
    <template>
      <la-cartesian :bound="[0, 5]" :data="values">
        <la-line :width="2" prop="value"></la-line>
        <la-x-axis></la-x-axis>
        <la-y-axis :ticks="ticks"></la-y-axis>
      </la-cartesian>
    </template>
    
    <script>
    export default {
      data() {
        const data = {
          values: [],
          ticks: [0, 1, 2, 3, 4, 5]
        }
        for (let i = 0; i < 10; i++) {
          data.values.push({
            value: Math.floor(Math.random() * Math.floor(5))
          })
        }
        return data
      }
    }
    </script>
    
    

    Fixed number of ticks #

    Sometimes you just want to show a fixed number of Y axis ticks:

    1234567891002.555
    <template>
      <div>
        <p>
          Sometimes you just want to show a fixed number of Y axis ticks:
        </p>
    
        <la-cartesian :bound="[0, 5]" :data="values">
          <la-line :width="2" prop="value"></la-line>
          <la-x-axis></la-x-axis>
          <la-y-axis :nbTicks="3"></la-y-axis>
        </la-cartesian>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        const data = {
          values: []
        }
        for (let i = 0; i < 10; i++) {
          data.values.push({
            value: Math.floor(Math.random() * Math.floor(5))
          })
        }
        return data
      }
    }
    </script>
    
    

    Pie filling container #

    fillContainer prop allows to make pie fill it's container instead of being simply centered with fixed size:

    2400139898003908480038004300
    <template>
      <div>
        <p>
          <code>fillContainer</code> prop allows to make pie fill it's container instead of being simply centered with fixed size:<br /><br />
        </p>
        <la-polar :data="values" fillContainer :width="500">
          <la-pie show-value prop="pv"></la-pie>
        </la-polar>
      </div>
    </template>
    
    <script>
    export default {
      data: () => ({
        values: [
          { name: 'Page A', pv: 2400 },
          { name: 'Page B', pv: 1398 },
          { name: 'Page C', pv: 9800 },
          { name: 'Page D', pv: 3908 },
          { name: 'Page E', pv: 4800 },
          { name: 'Page F', pv: 3800 },
          { name: 'Page G', pv: 4300 }
        ]
      })
    };
    </script>