CODEWITHSUNDEEP
colorsruby-on-rails-3.2chart.jsaxis-labelschartkick
mamesaye
mamesaye

Reputation: 2153

chartkick chart.js change colour of axis and colour of axis title

In my rails app I added some chart and wanted to change the colours from black (see image).
enter image description here

Here is the code in my view: 

<%= line_chart $tweet_per_day, id: "line_chart $tweet_per_day", width: "400px", height: "300px", ytitle: "Tweets count", ytitleFontColor: ["pink", "#F76161"], colors: ["blue", "#76BDD1"], download: "top_hashtags", refresh: 60 %>

the chart is getting the right color but the axis title are black so are the axis.

Upvotes: 1

Views: 2292

Answers (1)

mamesaye
mamesaye

Reputation: 2153

Ok, it seem like chartkick with chart.js has some limitations. So I switch to google charts.
I removed the chart.js code in my application.html.erb and application.js and replace it with google chart code.
To change my line chart this page was helpful.
Below is the working code in my view: 

<%= line_chart $tweet_day, id:"line_chart $tweet_day",xtitle: "Day of the Week", ytitle: "Tweets Count", colors: ["#C2F4FF"], download: "tweet_day", refresh: 60, 
  library: { 
    vAxis: { baselineColor: "#F76161",  gridlines: {Color: "" }, textStyle: { color: "#76BDD1"}, titleTextStyle: {color: "#F76161"} }, 
    hAxis: { baselineColor: "#F76161" , gridlines: {Color: "" }, textStyle: { color: "#76BDD1"} , titleTextStyle: {color: "#F76161"} } } %>

hope it help someone.

Upvotes: 1

Related Questions