Dive into the options of chart.js to create stunning charts. Interactive charts can provide a cool way to visualize your data.However most out of the box solutions are not as beautiful as they could be, with default options. I will show you how to customize your chart.js options to make some cool charts! ⚡ Quick Start What we will use: Vue.js vue-chart.js vue-cli We use to create a basic structure. So I hope you got it installed already. And we use as a wrapper for chart.js. vue-cli vue-chart.js vue init webpack awesome-charts Then we go into our project folder and install our dependencies. cd awesome-charts && yarn install And we add : vue-chartjs yarn add vue-chartjs chart.js Our first chart So, let’s create our first line chart. touch src/components/LineChart.js && subl . Now we need to import the Line BaseChart from and create our component. vue-chartjs In the function we need to call the method with our data and options. mount() renderChart() LineChart.js We pass in a basic chart.js data object with some sample data and in the option parameter, we pass So the chart will grow brased on our outer container. responsive: true. ☝ We can call the method because we extended the BaseChart, were this method and some props are defined renderChart() Mount & Test it Now we delete the Hello.vue component from our App.vue and import our chart. App.vue And after we run the dev script in our terminal, we should see our chart. yarn run dev 💄 Make me beautiful Okay, now it is time for some beautification 💅. There are a few cool tricks in chart.js. We can pass a color hex value to But we can also pass a rgba() value. So we can make our color transparent. And as chart.js is using html canvas to draw, we can utilize backgroundColor; createLinearGradient() This is where the fun starts. 🎢 But to use it we need the canvas object. But this is not a big deal, as holds a reference to it. We can access it over vue-chartjs this.$refs.canvas So in our LineChart.js we create two variables to store a gradient. Because we have to datasets. Then we create two gradients: this.gradient = this.$refs.canvas.getContext(‘2d’).createLinearGradient(0, 0, 0, 450) this.gradient2 = this.$refs.canvas.getContext(‘2d’).createLinearGradient(0, 0, 0, 450) There is another cool function we can use: addColorStop() We create three colorStops for each gradient. For 0%, 50% and 100%. this.gradient.addColorStop(0, ‘rgba(255, 0,0, 0.5)’)this.gradient.addColorStop(0.5, ‘rgba(255, 0, 0, 0.25)’);this.gradient.addColorStop(1, ‘rgba(255, 0, 0, 0)’); this.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)’)this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)’);this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)’); Now we can pass to . And we have a very nice gradient. To get a nicer effect we also set the borderColor to the individual color with an alpha of 1. (or we use the hex value) And set the borderWidth to 1 and last but not least the pointColor. this.gradient backgroundColor borderColor: ‘#FC2525’,pointBackgroundColor: ‘white’,borderWidth: 1,pointBorderColor: ‘white’, Presentation Last step is to add some styling to the container in our App.vue 👏 Final Result Happy coding!

Creating stunning charts with Vue.js and Chart.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to build a load more button with Vue.js and GraphQL

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

How to build a load more button with Vue.js and GraphQL

10 Resources That’ll Make You Better At Dashboard Creation

Top 10 JavaScript Charting Libraries for Every Data Visualization Need

10 Data Table Libraries for JavaScript

10 Dashboard Templates and Effective Indicators for Tracking KPI’s

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps