Image for post
Image for post

Creating stunning charts with Vue.js and Chart.js

Jakub Juszczak
Feb 28, 2017 · 4 min read

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

We use vue-cli to create a basic structure. So I hope you got it installed already. And we use vue-chart.js as a wrapper for 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

touch src/components/LineChart.js && subl .

Now we need to import the Line BaseChart from vue-chartjs and create our component.

In the mount() function we need to call the renderChart() method with our data and options.

LineChart.js

We pass in a basic chart.js data object with some sample data and in the option parameter, we pass responsive: true. So the chart will grow brased on our outer container.

☝ We can call the method renderChart() because we extended the BaseChart, were this method and some props are defined

Mount & Test it

App.vue

And after we run the dev script in our terminal, we should see our chart.

yarn run dev 

💄 Make me beautiful

This is where the fun starts. 🎢 But to use it we need the canvas object. But this is not a big deal, as vue-chartjs holds a reference to it. We can access it over 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 this.gradient to backgroundColor. 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.

borderColor: ‘#FC2525’, 
pointBackgroundColor: ‘white’,
borderWidth: 1,
pointBorderColor: ‘white’,

Presentation

👏 Final Result

Image for post
Image for post

Happy coding!

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!

Image for post
Image for post

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Jakub Juszczak

Written by

#Freelance Developer — #Blogger, #Student, #Tea addicted, likes #photography #indie #gamedev #webdev

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Jakub Juszczak

Written by

#Freelance Developer — #Blogger, #Student, #Tea addicted, likes #photography #indie #gamedev #webdev

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store