How to remove the line/rule of an axis in Chart.js?

I managed to remove all horizontale lines/rules in my chart using this:

scales: {
       xAxes: [{
        gridLines: {
            display: false
        }  
    }]
}

But I also want to get rid of the rule/bar that represents the Y-axis as well. But I want to keep the labels:

Unfortunately I can't find any option for that. I can only remove the whole axis including labels.

I'm using Chart.js 2.3.

I found a way to remove this line. It's actually called the border of the axis and there's an option for it, see "Grid Line Configuration":

scales: {
    yAxes: [{
        gridLines: {
            drawBorder: false,
        }
    }]
}

How to remove the Chart.js x Axis bottom line?, I am using Chart.js 2.8.0 trying to get rid of the X/Y axis border. With gridLines { showBorder: false }} I am still seeing the X axis border. I also have the color set to � Is there a way to remove the y-axis line with chartjs? I attached the screenshot of what I am referring to. I know you can get rid of the labels but I would need to get rid of the line also on that side.

This should work

 options: {
     scales: {
          yAxes: [{
               gridLines: {
                  display: false,
              }
          }]
     },
  }

Axes – amCharts 4 Documentation, In amCharts 4, most of the chart types that require axes need two of those. In most JavaScript. JSON E.g. to disable zero-line you'd do something like this:. To hide or remove the axes, simply set them to be transparent. You can do this with scaleLineColor in Chart.defaults.global: Chart.defaults.global.scaleLineColor = 'tranparent'; Customise the y-axis labels. To customise the y-axis labels, use a custom function for scaleLabel in Chart.defaults.global. The function has one argument (the value on the axes), and returns the desired label.

gridLines: {zeroLineColor: 'transparent'}

jQuery Charts.js- combined bar and line chart, myBar = new Chart(ctx, { type: 'bar', data: barChartData, options: true, position: "right", id: "y-axis-2", gridLines:{ display: false }, labels: { show:true, } }] } } }); }; </ script> </body> </html> TODO: Remove "ordinalParse" fallback in next major release. this. Adding/subtracting hours does not follow // this rule. var getSetHour� Linear Radial Axis. The linear scale is used to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis. The following additional configuration options are provided by the radial linear scale. Configuration Options

This worked for me in version 2.8.0 -

scales: {
    yAxes: [{
        gridLines: {
            tickMarkLength: false,
        }
    }]
}

Line Plot — NodePit, A line plot using a JavaScript based charting library. Disable this option if image is not needed or creation is too time consuming. Maximum number Choose column for x-axis: Defines the column that contains the values for X coordinates. Choose Chart title (*): The title of the graph shown above the generated image. If true, draw lines beside the ticks in the axis area beside the chart. tickMarkLength: number: 10: Length in pixels that the grid lines will draw into the axis area. zeroLineWidth: number: 1: Stroke width of the grid line for the first index (index 0). zeroLineColor: Color 'rgba(0, 0, 0, 0.25)' Stroke color of the grid line for the first index

You can use the scaleLineColor: 'transparent' it will remove the y any x axis

Single-Page Reference | JavaScript, Figure attribute reference for Plotly's JavaScript open-source graphing library. The scatter trace type encompasses line charts, scatter charts, text charts, and Sets the tick label formatting rule using d3 formatting mini-languages which are So if your app can add/remove traces before the end of the `data` array, such� The data object can be accessed as this.chart.data // buildTicks() should create a ticks array on the axis instance, if you intend to use any of the implementations from the base class buildTicks: function {}, // Get the value to show for the data at the given index of the the given dataset, ie this.chart.data.datasets[datasetIndex].data[index

Chart.js, Created 4 years ago in chartjs/Chart.js with 22 comments. Hello again. Throw a more specific error such that the developer understands what's wrong and that his style rule is not applied. I'm displaying a line chart where I want to show the Y-axis scale ticks on both sides (left and right). Remove Google Analytics. The latest chart.js support hiding the axes. To hide the y-axis only, you can set the following chart option { 'scaleShowLabels': false, }; if you want to hide both x and y axes and the grid lines, just set { 'showScale': false, }; Chart.js Documentation - Chart options 👍

Styling � Chart.js documentation, The grid line configuration is nested under the scale configuration in the gridLines key. It defines options for the grid lines that run perpendicular to the axis. The x-axis(horizontal) will be used to plot the Javascript frameworks as labels while the y-axis(cross axis) will be used to plot the number of Github stars each framework has. We need to store the data in arrays.

Using Chart.js to show fully configurable charts in a dashboard , An example showing the use of chart.js where the x axis is not time based can be .125698","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"[]","tot":"json"}] chart will be cleared each\ntime the browser is refreshed (and will be clear on 'line',\n data: {\n datasets: [{\n topic: \"Sin\", // used here not by chart.js\n label:� For example, to configure all line charts with spanGaps = true you would do: Chart.defaults.line.spanGaps = true; Data Structure. The data property of a dataset for a line chart can be passed in two formats. number[] data: [20, 10] When the data array is an array of numbers, the x axis is generally a category. The points are placed onto the

Comments
  • in x axis gridLines u make it as false and looking in the y axis to display the false
  • @Parthasarathy The example show ho to remove the horizontal gridlines. But this option doesn't remove the actual line for the axis (horizontally or vertically doesn't matter). So I'm looking for an option how to remove the actual line of the axis not only the grid lines.
  • This doesnot work. DownVoted because of that (sorry) this code worked for me: gridLines: { display:false } Update it and I will upvote again!
  • worked for me, I already had display:none but was not sufficient for that borders. thanks
  • Doesn't work in v.2.9.0, but fixed in v.3.0.0 github.com/chartjs/Chart.js/issues/6876
  • This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
  • While this code may solve the OP's issue, it is better to add context, or an explanation as to why this solves the OP's problem, so future visitors can learn from your post, and apply this knowledge to their own issues. High Quality Answers are much more likely to be upvoted, and contribute to the value and quality of SO as a platform. You can also add a link to documentation, if that helps.
  • @john An answer that's not fully explained, incomplete, or just plain wrong is still an answer. If you think it's a bad answer, that's what downvotes are for. See when to flag an answer as "not an answer"?
  • This will remove the labels as well, right? The labels should stay. Only the line should be gone.
  • you want to remove both the axis lines?
  • Actually only the Y-axis line. Is this a global setting? I can't find it in the Chart.js docs.
  • new Chart(ctx, { type: 'line', data: data, options: { scales: { yAxes: [{ display: false }] } } }); please have a look on the link it will help you chartjs.org/docs/#line-chart-chart-options
  • Thanks a lot for your help - I found an option to remove the line, which is actually the "´border`" option of the gridlines.