A naive implementation of a few charts with Vue.js. The charts are created using HTML5 SVG.
npm install --save vue-naive-svg-chart
or
yarn add vue-naive-svg-chart
In script tag:
import Vnsc from 'vue-naive-svg-chart'
export default {
components: {Vnsc},
data () {
return {
lineData: [
{data: [300, 86, 168, 201, 303, 365, 560], color: 'red', label: 'data1'},
{data: [720, 513, 376, 54, 13, 21, 90], color: 'green', label: 'data2'},
{data: [560, 319, 62, 75, 807, 497, 641], color: 'blue', label: 'data3'}
],
labels: [{
value: 'Monday',
popUp: 'Monday (New year)'
}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
}
}
}
Then in the template:
<vnsc id="line-chart-1" type="line" :dataset="lineData" :labels="labels" />
props: {
id: {type: String, required: true},
type: {type: String, required: true},
fontSize: {type: Number, default: 16},
padding: {type: Number, default: 16},
dataset: {type: Array, required: true},
labels: {type: Array, required: true},
showLegend: {type: Boolean, default: true},
color: {type: String, default: '#000'},
axesStrokeWidth: {type: Number, default: 2},
stack: {type: Boolean, default: false},
lineFill: {type: String, default: 'none'},
lineFillOpacity: {type: Number, default: 0.6},
animateClass: {type: String},
showPopUp: {type: Boolean, default: true},
popUpPadding: {type: Number, default: 16}
}
- Available chart types are:
'line'
,'column'
, and'bar'
. 'column'
and'bar'
charts can be stacked by setting'stack'
to'true'
- Legend can be hidden by setting
'showLegend'
to'false'
'color'
controls the colour of the axes and legend text'line'
chart can have fill below the line by setting'lineFill'
to'solid'
or'gradient'
- Pop up can be hidden be setting
'showPopUp'
to'false'
- Pop up rect has class name of
"id+'-pop-up-rect'"
where'id'
is the id of the chart - Line chart data point circle has id of
"id+'-'+l.label+'-data-point-'+index"
where'id'
is the id of the chart,'l.label'
is the label for that specific line, and'index'
is the index of that specific data point in the data array. For example, a line chart with id'chart1'
and one of the line has label'line1'
, then the first data point circle will have id of'chart1-line1-data-point-0'