CODEWITHSUNDEEP
javascriptruby-on-railshighcharts
hashrocket
hashrocket

Reputation: 2222

Using Highcharts with Rails 6

I have a Rails 6 app in which I am using Highcharts. I'm using plain JavaScript at the moment, then I'll transition to the highchart gem when I have the chart exactly how I want it. I have the chart almost exactly how I want it to render except for two things:

  1. How can I use two different colors for a scatter chart?
  2. How can I have just two lines bisecting my chart?

My data, at the moment is just a hard-coded array of arrays, something like this: [[3, 5], [7, 3], [22, 10], [35, 35], [10, 5], [10, 7]]. I would like to split the array in two and use two different colors for the points on the scatter chart.

For the lines, I would only like to show a line on the 'y' axis at point 50 (my y axis goes from 0 to 100) and one line on the 'x' axis at point 100 (my x axis goes from 0 to 200). Currently, I have both the lines on point 0.

Upvotes: 0

Views: 279

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

  1. Split your data into two series and set individual color for them.

  2. Set gridLineWidth to 0 for both axes and add the lines by plotLines.

chart: {
    type: 'scatter',
},
yAxis: {
    min: 0,
    max: 100,
    gridLineWidth: 0,
    plotLines: [{
        value: 50
    }]
},
xAxis: {
    min: 0,
    max: 200,
    gridLineWidth: 0,
    plotLines: [{
        value: 100
    }]
},
series: [{
    color: 'red',
    data: [
        [3, 5],
        [7, 3],
        [22, 10]
    ]
}, {
    color: 'blue',
    data: [
        [35, 35],
        [10, 5],
        [10, 7]
    ]
}]

Live demo: http://jsfiddle.net/BlackLabel/vm9Lrgds/

API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines

Upvotes: 1

Related Questions