question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Line Chart : Axis - how to change color or style of Y-Axis or X-Axis

See original GitHub issue

Could you please tell me how to change the color of the axes of the line chart?

I have specified the chart with settings as below… and tried lots of different things to change the color of the axes… but I can’t get it to work… `$scope.lineChartOptions = { chart: { type: “lineChart”, showLegend:false, forceY:[0,5], // make y axis start at 0 to 5 forceX:[1,4], height: 400, width: 600, margin : { top: 20, right: 20, bottom: 40, left: 55 }, x: function(d){ return d.x; }, y: function(d){ return d.y; }, useInteractiveGuideline: true, dispatch: { stateChange: function(e){ console.log(“stateChange”); }, changeState: function(e){ console.log(“changeState”); }, tooltipShow: function(e){ console.log(“tooltipShow”); }, tooltipHide: function(e){ console.log(“tooltipHide”); } }, xAxis: { ticks: 4, // make x-axis show all 4 weeks, }, yAxis: { ticks: 6, axisLabelDistance: -10 }, callback: function(chart){ //console.log(“!!! lineChart callback !!!”); } } };

`

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
ibasonicommented, Mar 27, 2017

// X-Axis .nv-y .tick.zero line { stroke: blue; } // Y-Axis .nv-y .nv-axis g path.domain { stroke: blue; }

1reaction
ramaprvcommented, Jun 6, 2016

Directly adding <nvd3 style="fill:#e4b447;stroke:#e4b447;" options="options" data="data"></nvd3> overrides the axis, label and point colors. However doesn’t affect the area fill color.

You can also try adding this to your main css file .nvd3 .nv-axis path { fill: #e4b447; stroke: #e4b447; } if you want to change only axis color.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to customize chart axis - Get Digital Help
Press with mouse on the axis values you want to change. Go to tab "Home" on the ribbon. Press with mouse on font....
Read more >
Change the display of chart axes - Microsoft Support
To change the interval between axis labels, under Interval between labels, click Specify interval unit, and then in the text box, type the...
Read more >
How to change the color of X and Y axis lines in a JavaFX char?
To change the color of the x and y axes (to OrangeRed), set the following CSS to the chart object using the setStyle()...
Read more >
X & Y Axes Formatting in Excel - Colors, Fonts, Reverse order
http://www.TeachMsOffice.comHow to format the X and Y axes in excel. This includes changing the fonts, colors, alignment, format, etc.
Read more >
How to Change the Font Color of X-axis and Y-axis in Chart js
How to Change the Font Color of X - axis and Y - axis in Chart jsIn this video we will cover how...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found