Line chart examples #

Tiny chart #

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

Choose type:

<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.

Try it!

<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.

Try it!

<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.

Try it!

<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.

Try it!

<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.

Try it!

<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)

Try it!

<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.

Try it!

<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.

Try it!

<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 #

Try it!

<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 #

Try it!

<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 #

Try it!

<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 #

Try it!

<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 #

You can customize the tooltip through the scoped slot.

Try it!

<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 #

Try it!

<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.

Try it!

<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.

Try it!

<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 #

amt

Try it!

<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 #

Try it!

<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 #

Try it!

<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:

Try it!

<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:

Try it!

<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>

Line chart examples #

Tiny chart #

Simple line chart #

Line gradient color #

Line chart with area #

Custom area fill #

Holes in data #

Curves #

Custom dots #

Bar chart examples #

Simple bar chart #

Stacked bar chart #

Pie chart examples #

Simple pie chart #

Pie chart with custom labels #

Gauge chart #

Advanced examples #

Custom tooltip #

Dynamic data #

Inverse axes #

Responsive #

Mixed #

Large Data #

Custom ticks #

Fixed number of ticks #

Pie filling container #