ankane / chartkick

Create beautiful JavaScript charts with one line of Ruby
https://chartkick.com
MIT License
6.33k stars 565 forks source link

No discrete xAxis values in bar chart #577

Closed walczyk123 closed 2 years ago

walczyk123 commented 2 years ago

Hello,

I ran into a problem that I couldn't find a solution to on the internet.

I have a bar_chart and in it I only want integers on the X axis. I've already tried discrete: true, variations in precision, variations in rounding, but there are always fractions.

This is my target: obraz

Isn't that a problem with the bar_chart option to discrete?

Here is my chart (simplified)

obraz

First Search existing issues to see if it’s been reported and make sure you’re on the latest version:

Similar problem on stackoverflow: https://stackoverflow.com/questions/47717943/rails-gem-chartkick-remove-axis-values-from-bar-graph

HTML generated by Chartkick

<div id="chart-3" style="height: 150px; width: 100%; text-align: center; color: #999; line-height: 150px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">
  <canvas style="display: block; box-sizing: border-box; height: 149.633px; width: 604.117px;" width="541" height="134"></canvas>
</div>

<script nonce="">
  (function() {
    if (document.documentElement.hasAttribute("data-turbolinks-preview")) return;

    var createChart = function() { new Chartkick["BarChart"]("chart-3", [{"name":"In progress","stack":2,"color":["#3B82F6"],"data":[["Person 1",3]]},{"name":"Finished","stack":1,"color":["#9CA3AF"],"data":[["Person 1",1]]}], {"stacked":true,"legend":false,"loading":"Loading...","discrete":true}); };
    if ("Chartkick" in window) {
      createChart();
    } else {
      window.addEventListener("chartkick:load", createChart, true);
    }
  })();
</script>

Ruby code:

<%= bar_chart [{:name=>"In progress", :stack=>2, :color=>["#3B82F6"], :data=>{"Person 1"=>3}},
      {:name=>"Finished", :stack=>1, :color=>["#9CA3AF"], :data=>{"Person 1"=>1}}],
      stacked: true,
      legend: false,
      loading: "Loading...",
      width: "100%",
      height: "#{50 + officer_user_count * 50}px",
      nonce: content_security_policy_nonce,
      discrete: true
%>
ankane commented 2 years ago

Hey @walczyk123, discrete applies to the y-axis on bar charts. You'll need to see if there's a library option for that customization.