CODEWITHSUNDEEP
c3.js
flomei
flomei

Reputation: 880

Create offset for axis - X and Y should meet at 0, not Y-axis min value

I am using c3.js to show temperature values, as a range I expect values from -30 to +50 degrees.

This works fine so far, but I am unhappy with the graphical representation.

I would like to have my X axis meet the Y axis at 0 and not at -30. Is this possible with c3.js? I already had a look at the manual and the examples, but I didn't find anything regarding offsetting the axis in this way.

Upvotes: 1

Views: 346

Answers (1)

Dmitry Demidovsky
Dmitry Demidovsky

Reputation: 8197

You can hide default axis (1) and add custom line at zero (2).

See in action (jsfiddle)

var chart = c3.generate({
    data: {
        columns: [
            ['sample', 30, 20, -10, 40, 15, -25]
        ]
    },
    axis: {
        x: {
            show: false // (1)
        },
        y: {
            max: 50,
            min: -30,
            // center: 0,
        }
    },
    grid: {
        y: {
            lines: [{ value: 0, text: 'zero' }] // (2)
        },
    },
});

Related docs:

  1. http://c3js.org/reference.html#axis-x-show
  2. http://c3js.org/reference.html#grid-y-lines

Upvotes: 1

Related Questions