2

I created a very simple line chart, for use on mobile devices. I find that when I include the scale, it takes up a lot of space on the side of the chart.

Instead, what I've seen accomplished on other mobile charts is only showing the minimum and the maximum value. A user can use the tooltip to find specifics.

Anyway, I'm hoping someone can show me how to create a scale such as the one here:

wanted output

The two main takeaways of this scale:

  1. Only the min and max values are shown
  2. They are shown with absolute positioning approximately in the top left and bottom right corners.

My thought process was possibly using the scaleOverride, then just defining scaleSteps : 1 with a scaleStepWidth equal to the difference between the min and max of my data. Even if this is on the right track, I don't know how I would override the positioning of the scale to be absolute and not take space away from the line itself.

Tot Zam
  • 8,406
  • 10
  • 51
  • 76
itwasluck3
  • 443
  • 1
  • 5
  • 12
  • Can you add your code or a JSFiddle? – Tot Zam May 18 '17 at 01:48
  • 1
    https://jsfiddle.net/ujsg9w8r/ ... Here's a fiddle of my chart as it exists now. I messed around with the scale but didn't have much luck so I left it as I have it now. – itwasluck3 May 18 '17 at 15:12

1 Answers1

5

I've broken this answer down into the steps needed to get your chart to look like the provided image:

1. Only show max and min labels

First, use JavaScript max() and min() methods to determine the highest and lowest values in the data array:

var min = Math.min(...data);
var max = Math.max(...data);

Then, add the following options to the yAxes ticks configuration section:

  • Set the max and min values to the data array max and min values.
  • Set stepSize to the difference between the max and min value. This will ensure that it only shows the highest and lowest numbers in the labels.

2. Move labels to inside the right side of the chart

This can be done in two steps:

  • Add position: "right" to move the align the scale yAxes to the right side of the chart.
  • Set mirror: true in the ticks configuration to flip the labels over the yAxes, to get them to show inside the chart.

3. Format number with dollar sign and 2 decimal places

To format the numbers with a dollar sign and two decimal places, add a callback function to the ticks options:

callback: function(value) {
    return '$' + value.toFixed(2);
}

See How To Format Scale Numbers in Chart.js v2 and Formatting a number with exactly two decimals in JavaScript for more information.

4. Change color or hide the yAxes grid line

Although your question is about changing the color of the grid line, based on the provided image, I am assuming you want to remove the yAxes line. To remove the grid line, set drawBorder to false in the grid line configuration settings.

If you do want to change the grid line color to white, color: "#fff" will work, you just need to make sure that you put that line in the gridLines config section like:

gridLines: {
    color: "#fff"
}

5. Change label font formatting

This wasn't in your questions, but if you want to change to label font color and sizing, simply use the fontColor and fontSize tick config options.

Final yAxes code:

yAxes: [{
    id: 'share_price',
    type: 'linear',
    position: "right",
    gridLines: {
        display: false,
        drawBorder: false,
        //color: "#fff"
    },
    ticks: {
        stepSize: max - min,
        min: min,
        max: max,
        mirror: true,
        fontColor: "#fff",
        fontSize: 18,
        callback: function(value) {
            return '$' + value.toFixed(2);
        }
    }
}]

JSFiddle Demo: https://jsfiddle.net/ujsg9w8r/5/

Tot Zam
  • 8,406
  • 10
  • 51
  • 76
  • Thank you! JS is not my strong suit, so I appreciate this. Two quick follow-ups: I notice in your fiddle, the number is formatted `12.3` without any excess JS. How can I go about getting it to display as `$12.30` ... Second, any idea how to change the color of the black yaxis line? Setting `color: "#ffffff"` only changes the text, not the line. – itwasluck3 May 18 '17 at 17:46
  • 1
    @itwasluck3 I've updated my answer to include the followup questions. I've also updated the JSFiddle link. – Tot Zam May 18 '17 at 18:59
  • 1
    Fantastic. Very much appreciated! Your step-by-step is incredibly valuable from a learning perspective. Cheers! – itwasluck3 May 18 '17 at 19:42