Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide points in ChartJS LineGraph

Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth.

like image 626
Dan Avatar asked Jan 28 '16 22:01

Dan


People also ask

How do you make a line graph in Chartjs?

When we're creating a chart using the Chart. js framework, we're going to need a canvas element. The Chart JS library relies on canvas elements. So create a canvas element in the HTML section, give it an ID of line-chart , and then close off that canvas element.

Does chart js use SVG?

Chart. js renders its charts using the Canvas element which results in good performance compared with SVG, espcially when rendering a large amount of data. The other advantage of Canvas rendering is that it's relatively easy to download the chart as an image file.

Can chart js be used offline?

Is it possible to use chart. js for a desktop/mobile application using html that connects through an esp8266 access point or does it need a wifi connection? @marionboynton, CanvasJS is a standalone library that can work offline without any internet connection.

How do I create a vertical line chart in HTML?

A vertical line chart is a variation on the horizontal line chart. To achieve this you will have to set the indexAxis property in the options object to 'y' . The default for this property is 'x' and thus will show horizontal lines.

What is a line chart used for?

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

What are the options on the line chart?

options - options for the whole chart The line chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way.

What are the configuration options for the vertical line chart?

The configuration options for the vertical line chart are the same as for the line chart. However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart.


1 Answers

You can achieve this by setting point's radius property in configuration options as follows:

var chartConfig = {             type: 'line',             options: {                 elements: {                     point:{                         radius: 0                     }                 }             }         } 

Tooltips for the points will also gone off.

like image 117
Shivam Avatar answered Sep 22 '22 20:09

Shivam