Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can create the following column chart at highchart?

I am looking for creating a column chart at highchart as the following picture:
enter image description here. In this picture, each column has a linear gradient background color and a start and end value is defined for each column. Also,The raw chart can be found at the following link :

chart raw sample:https://jsfiddle.net/v091rnj5/20/

The values between start and end of each column, and linear gradient of each column is most important to impelement.

Tags:

2

Answers


  1. 0

    To create a column chart in Highcharts where each column has a linear gradient background color and specific start and end values, you can use the following this code

    Highcharts.chart('container', {
    chart: {
        type: 'column' // Specifies chart type
    },
    xAxis: {
        categories: ['-5', '-4', '-3', '-2', '-1', '0', '1', '2', '3', '4', '5'] // Labels for the X-axis
    },
    series: [{
        data: [
            { y: 177,  // Value of the column
              color: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, // Gradien
                stops: [
                    [0, '#ff3333'], // Start color
                    [1, '#ff9999']  // End color
                ]
            }},
           ]
         }]
       });

    So, for each column in the chart, you’ll repeat this structure, only updating the y value and the colors in stops.

    Login or Signup to reply.
  2. 0

    To apply the gradient, you can use color-axis feature with the defined colorKey as x for the series.

      series: [{
    ...,
    colorKey: 'x'
  }],
  colorAxis: {
    visible: false,
    stops: [
      [0.1, '#ba0403'],
      [0.5, '#fae5e4'],
      [0.5, '#bce0bf'],
      [1, '#1b7520']
    ]
  }

    To show x-axis labels at the beginning of columns, set pointPlacement: 'between'.

      series: [{
    type: 'column',
    pointPlacement: 'between',
    pointPadding: 0,
    groupPadding: 0,
    ...
  }],
  xAxis: {
    tickInterval: 1,
    labels: {
      x: 5
    }
  }

    Live demo: https://jsfiddle.net/BlackLabel/0okqmwrv/

    API Reference:

    https://api.highcharts.com/highcharts/colorAxis

    https://api.highcharts.com/highcharts/xAxis

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search