Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis 'title' position alignment #803

Open
romanimm opened this issue Aug 3, 2023 · 0 comments
Open

Axis 'title' position alignment #803

romanimm opened this issue Aug 3, 2023 · 0 comments

Comments

@romanimm
Copy link

romanimm commented Aug 3, 2023

Currently there is no way to define the alignment for the xAxis / yAxis title.
For example if I want the xAxis title on the left, I have to position the title with offsets: options: { xAxis: { title: { text: 'Jahre', offsetX: -840, offsetY: -15 }}. This works fine if the chart has a fixed size, but breaks if the chart is responsive.

Example:

      const el = document.getElementById('chart-area');
      const data = {
        categories: [1,2,3,4,5,6,7,8,9,10],
        series: [
          {
            name: 'Aktien',
            data: [5000, 6000, 6200, 7000, 8000, 8900, 10000,11000,12000,14000,15000],
          },
          {
            name: 'Wachstum',
            data: [5030, 6050, 6260, 7070, 8030, 8920, 10500,11060,12700,14800,15300],
          },
          {
            name: 'Asugewogen',
            data: [5100, 6300, 6400, 7300, 8020, 8900, 15000,11200,12500,14600,15500],
          },
        ],
      };
      const options = {
        chart: {width: 'auto', height: 400,}, 
        legend: {visible: false}, 
   		theme: {
             series: {barWidth: 40, colors: ['red', 'blue', 'yellow',] },
            xAxis: {color: 'transparent'},
        	yAxis: {color: 'transparent'},  
            plot: {
            	vertical: {
                lineColor: 'transparent', lineWidth: 0,
                },
            },
        },
           yAxis: {
              
        label: { formatter: (value, infos) => {return value === '0'?  '': parseInt(value)}},
    },
          xAxis: { title:{text: 'Jahre', offsetX: -840, offsetY: -15}, pointOnColumn: true },
        series: { stack: { type: 'normal' } },
           responsive: {
    animation: { duration: 300 },
    rules: [
      {
        condition: ({ width: w }) => {
          return w <= 800;
        },
        options: {
          xAxis: {
            tick: { interval: 2 },
            label: { interval: 2 }
          },
        }
      },],
        },
      };

      const chart = toastui.Chart.areaChart({ el, data, options });
// "Jahre" is at the wrong position if el is not 900px wide.
    ```
    
Well, one could define responsive conditions for every width and set the correct offset for each of it, but the nicer API would certainly be if the title becomes an alignment option. 
@romanimm romanimm changed the title Axis 'title' positioning alignment Axis 'title' position alignment Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant