Mixed Chart Types using Chartkick/Highcharts on Rails

Question

I'm trying to create a mixed column/line chart using Highcharts.

I've been trying to use the library functionality to set one of my data series to be of type "line". I have tried a few different approaches, but I can't seem to figure out how to pass the type parameter of a given series using the Highcharts API.

<%= column_chart( ChartData.new(@forecast).revenue_and_net_income, library: {
  title: {
    text: "Revenue and Net Income"
  },
  series: [{
    1 => {
      type: "line"
    }
  }],
} ) %>

Where my data come from the following method:

def revenue_and_net_income
data = [
  {
    name: "Revenue",
    data: revenue_by_year
  },
  {
    name: "Net Income",
    data: net_income_by_year,
  }
]

end

Not sure what I'm doing wrong? I only seem to be able to access the Highcharts API methods listed under 'Chart', none of the series options etc. seem to work. Can anyone point me in the right direction for how to successfully get this to work?

Have you tried to do that in chart object like api.highcharts.com/highcharts#chart.type ? — Sebastian Bochan
What would be the correct syntax use that approach to change the type of only one series? — James Connolly
Im sorry but Im not rails developer so dont know how your wrapper working. — Sebastian Bochan

giapbnv giapbnv · Accepted Answer · 2019-12-09T09:12:36

you can try this way.

<%= line_chart [
        {
            name: "Amount", type: "column", data: @cause.donations.map {
                |t| [t.user.name, t.amount] 
            }
        },
        {
            name: "Test", type: "line", data: @cause.donations.map {
                |t| [t.user.name, t.amount]
            }
        }
    ],
    prefix: "$",
    adapter: "highcharts"
%>

just don't care line_chart, column_chart or anythings... ONLY custom type in data. OK

Mixed Chart Types using Chartkick/Highcharts on Rails

1 Answers